Hero235: Bauhaus Composition Hero

A hero on a strict twelve-column grid: a heavy sans headline, an intro, a Turn Arrow block button and an underline link on the left, and on the right the bauhaus-composition SVG poster, whose circles, quarter circles, squares, bars and rules spring into a new balanced arrangement every few seconds and lean away from the cursor.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/hero235?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero235?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero235.tsx plus the bauhaus-composition component, the button24 Turn Arrow button and the button2 underline link it uses.

Quick start

The installed file exports hero235Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

import { Hero235, hero235Demo } from "@/components/beste/block/hero235";

export default function Page() {
  return <Hero235 {...hero235Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hero235 } from "@/components/beste/block/hero235";

export default function Page() {
  return (
    <Hero235
      eyebrow="Hollin School of Form, spring term"
      heading="Shape first. Everything else later."
      description="A twelve-week studio course in composition, color and type."
      buttons={[
        { label: "Apply for spring", href: "/apply" },
        { label: "See student work", href: "/work" },
      ]}
      composition={{
        inkColor: "var(--foreground)",
        paperColor: "var(--background)",
        accentColor: "#d9412b",
        secondaryColor: "#e3b23c",
        tertiaryColor: "#2c5aa0",
        shapes: 14,
        seed: 7,
        interval: 4,
      }}
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
};

Behavior notes

• The composition always renders, filling a panel under its own 2px rule; leave out composition and the component falls back to its own defaults.
• Every interval seconds the forms spring to a new arrangement snapped to the grid with a slight stagger, and a click moves on at once. seed fixes the cast of forms and every arrangement they move through.
• With inkColor and paperColor set to var(--foreground) and var(--background), the poster follows the theme while the three accents stay fixed.
• The composition pauses offscreen and holds one arrangement for reduced motion; the copy and panel also skip their fade-in.
• From md the copy takes 5 columns with the headline pushed to the bottom and the poster takes 7; on phones the poster stacks below at a minimum of 26rem tall.