Hero179: Turning Word Hero

A hero whose headline ends in a word that takes turns, each candidate blurring up as the last blurs out, beside an intro and a pill, above three photographs that drift at their own pace with the middle one set a step lower.

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

Base UI flavor

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

This installs the block to components/beste/block/hero179.tsx plus the button22 sliding-marker pill and the text4 turning word it uses.

Quick start

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

import { Hero179, hero179Demo } from "@/components/beste/block/hero179";

export default function Page() {
  return <Hero179 {...hero179Demo} />;
}

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

import { Hero179 } from "@/components/beste/block/hero179";

export default function Page() {
  return (
    <Hero179
      eyebrow="A practice for slow change"
      headingStart="Room to"
      words={["breathe.", "think.", "rest.", "begin again."]}
      description="Whatever you need the room for this season, it is here."
      button={{ label: "Take the room", href: "/book" }}
      images={[
        { src: "/photos/grass.jpg", alt: "Tall grass in a sunlit field" },
        { src: "/rooms/table.jpg", alt: "A calm room with a long stone table" },
        { src: "/photos/waterfall.jpg", alt: "A waterfall falling through a green gorge" },
      ]}
    />
  );
}

Props

type HeroImage = {
  src: string;
  alt: string;
};

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

Behavior notes

• The cycling headline is the text4 component rather than markup of its own, so the turn logic, the timer and the reduced-motion handling live in one place and this block only supplies the copy and the type styling.
• wordClassName puts the turning word in the muted tone, which is what makes the change legible: the fixed part holds still in full contrast while the moving part reads as the variable.
• The intro waits on 0.6 + headingStart.split(" ").length * 0.07, so it arrives after the fixed words have settled and the first turning word is already in place.
• Only three photographs are rendered. The third spans two columns on a phone (col-span-2) and returns to one from md, so a three-up row never leaves a single narrow image stranded on its own line.
• The middle photograph drifts 12% against the outer two at 7% and is pushed down by md:mt-16, so the row reads as a composed group rather than a strip.
• Images enter after the copy, with a 0.15s stagger between them.
• words is what drives the effect: with a single entry the headline simply holds that word, and the timer never starts.