Hero186: Half Photo Hero

A hero split down the middle: eyebrow, headline, intro and two pills on the left, and on the right a photograph filling the half edge to edge that clears from a blur on load and drifts slower than the page.

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

Base UI flavor

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

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

Quick start

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

import { Hero186, hero186Demo } from "@/components/beste/block/hero186";

export default function Page() {
  return <Hero186 {...hero186Demo} />;
}

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

import { Hero186 } from "@/components/beste/block/hero186";

export default function Page() {
  return (
    <Hero186
      eyebrow="Couples work"
      heading="Two people, one room, and a way back to each other."
      description="Fortnightly sessions for couples who have stopped hearing one another."
      buttons={[
        { label: "Book for two", href: "/couples" },
        { label: "What a session is like", href: "/first-session", tone: "outline" },
      ]}
      image={{ src: "/rooms/kitchen.jpg", alt: "A kitchen with oak cabinets and a window onto a garden" }}
    />
  );
}

Props

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

Behavior notes

• The section has no horizontal padding of its own, so the photograph runs to the edge of the viewport; the gutter lives on the copy column instead, which is what gives the split its full-bleed look.
• The photograph clears from a 1.1 scale and blur(24px) on decode, with a complete check on mount because a cached image fires its load event before hydration.
• The Tailwind scale-[1.2] on the same element writes the standalone scale property, so it composes with the animated transform rather than fighting it; that extra scale is what keeps the edges covered through the 20% drift.
• The image column is md:min-h-0 inside a md:min-h-svh grid, so it takes its height from the row rather than from a fixed value, and falls back to min-h-[24rem] on a phone where the two halves stack.
• The headline runs with trigger="mount", since a hero sits above the fold, and the copy is offset from 0.4 + heading.split(" ").length * 0.07.
• The copy column is vertically centred, so it stays composed whether the headline runs to two lines or four.
• Without image the copy column simply takes the left half of the grid rather than stretching, so give the block an image whenever you want the split.