Hero182: Centred Photo Hero

A full-screen centred hero: the photograph clears from a blur and drifts under an ink wash and film grain, with the headline settling in word by word above an intro and a pair of pale pills.

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

Base UI flavor

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

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

Quick start

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

import { Hero182, hero182Demo } from "@/components/beste/block/hero182";

export default function Page() {
  return <Hero182 {...hero182Demo} />;
}

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

import { Hero182 } from "@/components/beste/block/hero182";

export default function Page() {
  return (
    <Hero182
      eyebrow="Altair, Lisbon"
      heading="Come as you are. Stay as long as it takes."
      description="Therapy and coaching for the seasons when the usual things stop working."
      buttons={[
        { label: "Begin here", href: "/book", tone: "light" },
        { label: "Meet the practitioners", href: "/team", tone: "outline" },
      ]}
      image={{ src: "/photos/hills.jpg", alt: "Soft fog rolling over layered green hills" }}
    />
  );
}

Props

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

Behavior notes

• The content is centred on both axes inside a min-h-svh section, so the hero holds its composition at any viewport height rather than being pinned to the top.
• Buttons fall back to the light tone rather than primary, which is right here: the hero is dark, so an unspecified button should come out pale instead of taking the brand colour.
• The photograph clears from a 1.12 scale and blur(24px) on decode, with a complete check on mount because a cached image fires its load event before hydration and would otherwise stay blurred.
• It drifts 26% against the page as it scrolls away, so the section keeps moving even though the copy inside it does not.
• The wash is a flat foreground/55 rather than a gradient, because the copy is centred rather than sitting at the foot and needs even contrast across the whole frame.
• The grain filter takes its id from useId, so two grain surfaces on one page cannot collide on a global SVG id.
• The headline runs with trigger="mount", and the copy waits on 0.4 + heading.split(" ").length * 0.07 so it lands as the last word settles.