Chapter Progress Tabs Hero

Hero129: Chapter Progress Tabs Hero

Full-bleed monochrome hero with a giant heading pinned bottom-left over a crossfading photo background, and a row of equal-width "chapter" tabs below it. Each tab carries a number, a label, an optional caption, and a thin progress track that fills over four seconds before the hero auto-advances to the next chapter and crossfades its background image.

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

Base UI flavor

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

This installs the block to components/beste/block/hero129.tsx and its dependencies.

Quick start

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

import { Hero129, hero129Demo } from "@/components/beste/block/hero129";

export default function Page() {
  return <Hero129 {...hero129Demo} />;
}

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

import { Hero129 } from "@/components/beste/block/hero129";

export default function Page() {
  return (
    <Hero129
      heading="Chapter by chapter."
      items={[
        {
          label: "Foundations",
          caption: "Naming, marks & systems",
          image: {
            src: "https://images.unsplash.com/photo-1558008749-f9505aabf726?w=1920&h=1200&fit=crop",
            alt: "Concrete spiral staircase seen from below",
          },
          href: "/work/foundations",
        },
        {
          label: "Surfaces",
          caption: "Space, light & material",
          image: {
            src: "https://images.unsplash.com/photo-1490806843957-31f4c9a91c65?w=1920&h=1200&fit=crop",
            alt: "Minimal interior wall meeting a shadowed ceiling",
          },
          href: "/work/surfaces",
        },
      ]}
    />
  );
}

Props

type ChapterItem = {
  label: string;
  caption?: string;
  image: HeroImage;
  href: string;
};

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

Behavior notes

• Background images are stacked as absolutely positioned <img> layers; only the active layer is opacity-100, and the swap between layers is a 700ms CSS opacity transition, not a hard cut.
• The active chapter auto-advances every 4000ms via setInterval, and each tab's progress track uses a @keyframes hero129Fill animation (4000ms linear) that is force-restarted by remounting the track <div> with key={active} on every chapter change.
• Clicking a tab does two things at once: onClick sets it active immediately (jumping the background instantly) while the surrounding Link also navigates to item.href.
• The tab row is a 2-column CSS grid on mobile and switches to a single horizontal flex row at the sm breakpoint.
• There is no pause control or hover-to-pause behavior: the four-second auto-advance keeps running regardless of user interaction with a tab.