Kinetic Rotating-Word Hero

Hero133: Kinetic Rotating-Word Hero

Full-bleed hero over a static photo with a badge eyebrow and a giant headline whose final word auto-cycles through a word list, backed by numbered clickable chips to jump to a specific word and a dedicated pause/play toggle.

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

Base UI flavor

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

This installs the block to components/beste/block/hero133.tsx, the badge7 eyebrow and button12 CTA button it renders through, and its dependencies.

Quick start

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

import { Hero133, hero133Demo } from "@/components/beste/block/hero133";

export default function Page() {
  return <Hero133 {...hero133Demo} />;
}

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

import { Hero133 } from "@/components/beste/block/hero133";

export default function Page() {
  return (
    <Hero133
      badge={{ label: "Auralis" }}
      headingPrefix="We shape "
      words={["brands.", "products.", "spaces."]}
      backgroundImage={{
        src: "https://images.unsplash.com/photo-1646127628160-ac5d61c39abd?w=1920&h=1200&fit=crop",
        alt: "Concrete facade catching low afternoon light",
      }}
      button={{ label: "See the work", href: "/work" }}
    />
  );
}

Props

type HeroImage = { src: string; alt: string };
type Badge = { label: string };
type ActionButton = { label: string; href: string };

Behavior notes

• The active word cycles every 2500ms via setInterval. Each swap remounts the word <span> with key={active}, re-triggering the animate-in fade-in slide-in-from-bottom-3 entrance animation on every rotation.
• A dedicated pause/play icon button flips a paused boolean that gates the rotation effect. Clicking any word chip also calls setPaused(true), so manually picking a word stops the auto-rotation until the user presses play again.
• Word chips double as controls and progress indicators: each shows a 01, 02… tabular-nums index next to the word, and the active chip switches to a solid bg-foreground text-background fill while the rest stay outlined and translucent.
• Badge7 renders at reduced opacity (text-background/70) to stay legible over the photo, and Button12 renders with tone="outline" for the CTA.
• The pause/play toggle only renders when there is more than one word (words.length > 1).