Hero238: Curtain Reveal Hero

A pinned scroll hero where a CurtainReveal WebGL velvet curtain with lit folds and gathered swags fills the screen behind a centered serif headline, then draws open to both sides as the page scrolls, revealing a stage photo while the headline, an intro, an Arrow Pill and an underline link settle at the lower left.

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

Base UI flavor

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

This installs the block to components/beste/block/hero238.tsx plus the curtain-reveal component and the button23 and button2 buttons it uses.

Quick start

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

import { Hero238, hero238Demo } from "@/components/beste/block/hero238";

export default function Page() {
  return <Hero238 {...hero238Demo} />;
}

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

import { Hero238 } from "@/components/beste/block/hero238";

export default function Page() {
  return (
    <Hero238
      eyebrow="Harrow Hall, the new season of orchestral music"
      heading="The house lights are going down."
      description="40 evenings of symphonies, chamber music and new work."
      buttons={[
        { label: "Book the season", href: "https://beste.co" },
        { label: "See the program", href: "/program" },
      ]}
      curtain={{
        imageSrc: "https://images.unsplash.com/photo-1465847899084-d164df4dedc6?w=2400&q=80",
        imageAlt: "Violinists of an orchestra playing under warm stage light",
        color: "#6a0d1b",
        sheenColor: "#ec6a78",
        folds: 12,
      }}
    />
  );
}

Props

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

Behavior notes

• The section is 250svh tall with a sticky stage of 100svh minus 78px (at least 640px). Curtain progress maps page scroll from 5% to 75% of the section onto 0 to 1, clamped.
• The copy runs through 3 states with hysteresis: intro below 0.12 progress, opening, and open from 0.85. Open only drops back below 0.7 and intro only returns below 0.08, so text never hangs half faded at a threshold.
• The open-stage overlay adds a black/80 scrim on the lower 3/4 and hides with visibility: hidden when closed, so its links are not focusable behind the curtain.
• The centered headline is the h1; the copy in the open overlay is an aria-hidden paragraph. The stage photo is a real <img> with imageAlt.
• The stage is lit like a theater in every theme: the section is black and the copy stays white (text-white with /75 and /80 steps) over the curtain and the photo, and the Arrow Pill keeps its light tone. CSS drape halves stand in until the WebGL curtain is ready.
• With reduced motion the section is 1 screen tall, the curtain is fully open and the overlay shows the eyebrow and a real h1 from the start.