Hero222: Concertina Book Hero

A pinned scroll hero with a serif headline, an intro, an Arrow Pill and an underline link above a ConcertinaBook whose pages share one wide photo and unfold in 3D from a zigzag pile as the page scrolls, until the picture lies flat and unbroken.

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

Base UI flavor

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

This installs the block to components/beste/block/hero222.tsx plus the concertina-book component and the button23 and button2 buttons it uses.

Quick start

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

import { Hero222, hero222Demo } from "@/components/beste/block/hero222";

export default function Page() {
  return <Hero222 {...hero222Demo} />;
}

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

import { Hero222 } from "@/components/beste/block/hero222";

export default function Page() {
  return (
    <Hero222
      eyebrow="Hollis Bindery"
      heading="Books that open like a landscape."
      description="Hand-sewn concertina books, folded from one long sheet of cotton paper."
      buttons={[
        { label: "Order a concertina", href: "https://beste.co" },
        { label: "See the bindery", href: "/bindery" },
      ]}
      image={{
        src: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=2400&q=80",
        alt: "A calm lake below dark pines and pale mountains",
      }}
      book={{ pages: 6, fold: 78, shade: 0.5, pageAspect: 0.72 }}
    />
  );
}

Props

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

Behavior notes

• The section is 320vh tall with a sticky stage of 100svh minus 78px (at least 640px). The book receives the section's raw scrollYProgress from start start to end end as its progress.
• The text sits at the top of the stage and the book fills the remaining height (at least 280px), so scrolling down turns into sideways travel while each page unfolds with light and shade on its folds.
• The copy rises in on mount with delays from 0.1s to 0.35s, and the book fades in over 1.4s after 0.3s.
• With reduced motion the block renders a plain section instead: no pinning, no rise-ins, and the book at a fixed 26rem (34rem from md) height showing its flat pages in a swipeable row.
• Every prop is optional; without image the stage holds only the text.