Hero189: Command on Photo Hero

A full-height photographic hero where the command sits in a frosted pill over the picture: the photo clears from a blur and drifts slower than the page behind film grain, while a column of figures anchors the right edge.

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

Base UI flavor

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

This installs the block to components/beste/block/hero189.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

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

import { Hero189, hero189Demo } from "@/components/beste/block/hero189";

export default function Page() {
  return <Hero189 {...hero189Demo} />;
}

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

import { Hero189 } from "@/components/beste/block/hero189";

export default function Page() {
  return (
    <Hero189
      eyebrow="Sections for coding agents"
      heading="One command, every screen."
      description="Run it once in your project and every page you will need is already written."
      image={{ src: "/photos/cove.jpg", alt: "A turquoise bay ringed by pines and limestone" }}
      command="npx your-cli@latest"
      copyLabel="Copy command"
      copiedLabel="Copied"
      buttons={[{ label: "See what it builds", href: "/blocks", tone: "light" }]}
      facts={[{ value: "1,500", label: "Finished sections" }]}
    />
  );
}

Props

type Fact = {
  value: string;
  label: string;
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• The photograph only fades up once its file has loaded, checked through both an onLoad handler and an img.complete test for images the browser already had cached.
• The picture drifts to 28 percent of the scroll while the content moves 12 percent and fades out by 70 percent, so the text clears the frame before the photo does.
• A gradient scrim runs from foreground/85 at the base to foreground/25 at the top, which is what keeps the headline legible over an unpredictable photograph.
• Grain is an inline feTurbulence filter at 8 percent opacity in soft light, with its filter id taken from useId so several blocks on one page never collide.
• Text on the photo uses the fixed background token rather than an adaptive one, because the surface underneath is a picture and not a theme colour.
• The command pill is frosted rather than solid, so the photograph stays readable through it while the mono text keeps its contrast.
• Buttons default to the light tone here, which is the pill built for photographic surfaces.