Hero221: Afternoon Blinds Hero

A full-bleed hero over the sun-blinds WebGL surface, where afternoon sunlight falls through venetian blinds onto a plaster wall with swaying slat shadows, a leaf shadow and drifting dust, while a serif headline, an intro and two buttons sit inside the light.

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/hero221?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hero221.tsx plus the sun-blinds background and the button23 and button2 buttons it uses.

Quick start

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

import { Hero221, hero221Demo } from "@/components/beste/block/hero221";

export default function Page() {
  return <Hero221 {...hero221Demo} />;
}

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

import { Hero221 } from "@/components/beste/block/hero221";

export default function Page() {
  return (
    <Hero221
      eyebrow="Furniture and interiors"
      heading="Rooms that keep the afternoon."
      description="Slow furniture in oak, linen and brass, and the rooms shaped around it."
      buttons={[
        { label: "Visit the showroom", href: "/showroom" },
        { label: "View the catalog", href: "/catalog" },
      ]}
      light={{ wallColor: "var(--background)", lightColor: "#ffcc8c", slats: 12, leaves: true, dust: 0.5 }}
    />
  );
}

Props

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

Behavior notes

• The section background is set to light.wallColor (or var(--background)), so the wall color shows before the canvas fades in over 2.4 seconds.
• Text and buttons use theme tokens (foreground, primary), and the demo wall is var(--background), so the hero follows light and dark mode. If you set a fixed wallColor, check it against the theme's foreground.
• The sun shifts a little toward the cursor by the follow amount when interactive is on.
• The loop pauses offscreen or in a hidden tab, and render scale is capped at 0.8 of one device pixel and lowered when frames run slow.
• With reduced motion, the light holds a still frame and the text skips its slow 2-second settle. Without WebGL, a striped CSS gradient in the wall color is shown.
• The copy is vertically centered in a section at least max(640px, 100svh - 78px) tall.