Hero249: Slice Assembly Hero

A pinned scroll hero where the slice-assembly component cuts a photograph into vertical strips that float apart in 3D space and settle one after another into the whole picture as the page scrolls; the headline holds from the start, and the intro and two buttons settle in once the picture is whole.

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

Base UI flavor

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

This installs the block to components/beste/block/hero249.tsx plus the slice-assembly component and the button23 and button2 buttons it uses.

Quick start

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

import { Hero249, hero249Demo } from "@/components/beste/block/hero249";

export default function Page() {
  return <Hero249 {...hero249Demo} />;
}

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

import { Hero249 } from "@/components/beste/block/hero249";

export default function Page() {
  return (
    <Hero249
      eyebrow="Autumn and winter 2026"
      heading="Cut, then made whole."
      description="Twelve pieces in wool, cotton and waxed cloth, cut by hand and made to be worn for a decade."
      buttons={[
        { label: "Shop the collection", href: "/shop" },
        { label: "View the lookbook", href: "/lookbook" },
      ]}
      slices={{
        imageSrc: "https://images.unsplash.com/photo-1485968579580-b6d095142e6e?w=1400&q=80",
        imageAlt: "A woman in a dark check coat walking down a city street",
        strips: 14,
        scatter: 0.6,
        stagger: 0.6,
      }}
    />
  );
}

Props

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

Behavior notes

• From md the section is h-[240svh] with a sticky frame, and assembly maps scroll progress from 0.04 to 0.62 onto 0 to 1, leaving a long look at the whole photo before the section scrolls away.
• The intro and buttons switch between two states with hysteresis: shown at 0.6 progress, hidden again below 0.5. While hidden they are aria-hidden, ignore the pointer and the links drop out of the tab order.
• Phones are not pinned: the photo is full width and assembles as it scrolls into view (from its top entering the screen to its center reaching the middle), and the copy follows it in the normal flow.
• The strips are DOM images in CSS 3D perspective, so there is no WebGL to fail. The picture leans gently toward a mouse cursor when interactive is on; touch is ignored.
• With reduced motion, the section is not pinned, the photo is shown whole and all copy is visible from the start.