Hero176: Unveiling Hero

A centred hero that unveils its photograph: the headline settles in word by word above the intro and two pills, then a wide band opens outward from an inset clip, closed by a row of short facts.

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

Base UI flavor

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

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

Quick start

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

import { Hero176, hero176Demo } from "@/components/beste/block/hero176";

export default function Page() {
  return <Hero176 {...hero176Demo} />;
}

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

import { Hero176 } from "@/components/beste/block/hero176";

export default function Page() {
  return (
    <Hero176
      eyebrow="Therapy, coaching, and the space between"
      heading="You do not have to arrive with the words."
      description="Most people who come to us are not sure what they need. That is a fine place to start."
      buttons={[
        { label: "Start a conversation", href: "/book" },
        { label: "See how we work", href: "/approach", tone: "outline" },
      ]}
      image={{ src: "/photos/hills.jpg", alt: "Soft fog rolling over layered green hills" }}
      facts={["Lisbon and online", "Weekly or fortnightly", "First call is free"]}
    />
  );
}

Props

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

Behavior notes

• The unveil is a clip-path animation from inset(12% ... round 6px) to zero, so the frame opens outward from its own centre rather than fading or sliding. The round 6px is carried in both keyframes, which is what keeps the corners rounded for the whole reveal.
• The band switches aspect ratio rather than height, 16/9 on a phone becoming 21/9 from md, so the crop stays cinematic on a wide screen without going letterbox-thin on a small one.
• The section has bottom padding of its own only through the facts row (py-8 rising to py-10), so a hero without facts ends flush against the next section by design.
• The headline runs with trigger="mount", since a hero is above the fold and a scroll-triggered stagger would never fire.
• Everything after it is offset from 0.4 + heading.split(" ").length * 0.07, so the copy, the buttons, the unveil and the facts arrive in that order however long the headline runs.
• Inside the frame the photograph still drifts -12% to 12% against a 1.25 scale as the page scrolls, so the band keeps moving after the reveal has finished.
• Facts are plain strings with dot markers drawn as spans, so the row stays a real list without inheriting browser bullet styling.