Hero206: Watercolor Scroll Hero

A pinned scroll hero that opens as blank paper with a centered serif headline, then blooms a landscape photo across the paper from 3 points in a WebGL watercolor shader as the page scrolls, until the headline, an intro and two links settle in over the finished photo.

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

Base UI flavor

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

This installs the block to components/beste/block/hero206.tsx.

Quick start

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

import { Hero206, hero206Demo } from "@/components/beste/block/hero206";

export default function Page() {
  return <Hero206 {...hero206Demo} />;
}

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

import { Hero206 } from "@/components/beste/block/hero206";

export default function Page() {
  return (
    <Hero206
      eyebrow="A photobook on cotton paper"
      heading="Every place arrives slowly."
      description="Twelve years of walking one coastline, collected in a clothbound book."
      buttons={[
        { label: "Order the book", href: "https://beste.co" },
        { label: "Leaf through it", href: "/book" },
      ]}
      image={{
        src: "https://images.unsplash.com/photo-1701870856373-bc7273fe6c2c?w=2000&q=80",
        alt: "A rocky cove with wildflowers above turquoise water",
      }}
    />
  );
}

Props

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

Behavior notes

• The section is 260vh tall with a sticky stage of 100svh minus 78px (at least 640px). The bloom maps page scroll from 5% to 38% of the section onto 0 to 1; the canvas eases toward it, filling slowly and drying back faster when you scroll up.
• The text runs through 3 states: intro (at or below 4% scroll), painting, and ended (from 28%). Ended latches until you are back at the top, so the overlay never sits half visible. The closing overlay adds a dark bottom gradient and turns pointer events on. Its copy stays white in every theme because it sits on the photo, not on the paper.
• The paper color is read from the stage's computed bg-background and re-read when the class, style or data-theme of any ancestor changes, so it follows the theme, even one scoped to a wrapper.
• The canvas renders at up to 1.5x device pixel ratio and pauses when offscreen or when the tab is hidden.
• Without WebGL, on a failed shader, a lost context or an image error, a plain <img> cross-fades in between 8% and 35% scroll instead. The image must allow cross-origin loading for the shader.
• The opening headline is the h1; the copy in the closing overlay is an aria-hidden paragraph. With reduced motion the section is 1 screen tall, the photo is fully painted and the closing overlay is shown with a real h1.