Hero240: Aperture Reveal Hero

A pinned scroll hero over the aperture-reveal component: it opens on a closed camera iris with the eyebrow and a large heading above it, scrolling turns the blades open until a photograph fills the screen, and then the heading, a description, an Arrow Pill and an underline link settle at the lower left over a soft scrim.

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

Base UI flavor

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

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

Quick start

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

import { Hero240, hero240Demo } from "@/components/beste/block/hero240";

export default function Page() {
  return <Hero240 {...hero240Demo} />;
}

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

import { Hero240 } from "@/components/beste/block/hero240";

export default function Page() {
  return (
    <Hero240
      eyebrow="Halden Optics, lenses made by hand"
      heading="Let the light decide."
      description="Prime lenses ground, assembled and tested in one small workshop, for photographers who work after dark."
      buttons={[
        { label: "Explore the lenses", href: "/lenses" },
        { label: "Visit the workshop", href: "/workshop" },
      ]}
      aperture={{
        imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=2400&q=80",
        imageAlt: "Snowy peaks under the Milky Way above a dark line of pines",
        blades: 9,
        interactive: true,
      }}
    />
  );
}

Props

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

Behavior notes

• The section is 280vh tall with a sticky stage of 100svh - 78px (at least 640px); useScroll progress from 0.03 to 0.8 maps to the iris opening, and the block drives progress itself with autoplay off.
• The text switches between 3 clean states, intro, opening and open, instead of fading with the scroll: open latches at 0.7 progress and only resets once the reader is back at the top.
• Heading level: the centered intro heading is the h1, and the lower-left copy repeats it as an aria-hidden paragraph, so screen readers hear it once.
• The light on the metal blades follows the cursor when interactive is on; the component pauses through an IntersectionObserver and on hidden tabs.
• With reduced motion the section is 1 screen tall, the iris shows fully open, and the eyebrow, h1, description and buttons render at the lower left with no intro state.
• While closed, the lower copy is pointer-events-none, so hidden buttons cannot be clicked.
• The iris and the photograph are a fixed dark scene, so the section keeps a near-black neutral-950 ground, white copy and a white Arrow Pill in every theme.