Hero192: Half Photo Command Hero

A full-height split: the command and its case on the left, an edge-to-edge photograph on the right that clears from a blur and drifts as the page moves.

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

Base UI flavor

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

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

Quick start

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

import { Hero192, hero192Demo } from "@/components/beste/block/hero192";

export default function Page() {
  return <Hero192 {...hero192Demo} />;
}

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

import { Hero192 } from "@/components/beste/block/hero192";

export default function Page() {
  return (
    <Hero192
      eyebrow="For teams that ship with agents"
      heading="The page is already written."
      description="Point your agent at a library of finished sections and it stops guessing at layouts."
      command="npx your-cli@latest"
      copyLabel="Copy command"
      copiedLabel="Copied"
      buttons={[{ label: "See what it builds", href: "/blocks" }]}
      image={{ src: "/photos/bay.jpg", alt: "A small rocky bay below a wooded hillside" }}
      caption="Built with your theme, in your repository."
    />
  );
}

Props

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

Behavior notes

• The split only exists from the medium breakpoint up. Below it the photograph becomes a 4:5 panel above the text, which keeps the picture from being cropped to a strip on a phone.
• The photograph is scaled to 120 percent inside its frame so the parallax travel from minus 8 to 8 percent never exposes an edge.
• It fades up only once the file has loaded, checked with an onLoad handler and an img.complete test for cached images.
• The text column is padded rather than constrained by a max width, so the two halves meet at the exact centre of the viewport at every size.
• The caption sits directly on the picture in the fixed background token, since the surface underneath is a photograph and not a theme colour.
• The command pill is outlined rather than filled, which keeps the filled pill below it as the single strongest action in the section.
• There is no scrim here because the caption is short and sits over the darkest part of the frame. Pass a darker photograph or drop the caption if yours is bright.