Vertical Dot Pager Hero

Hero134: Vertical Dot Pager Hero

Full-bleed hero whose background crossfades across a set of items, steered by a minimal vertical pager pinned to the right edge and vertically centered; a giant heading and the active item's clickable name sit bottom-left.

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

Base UI flavor

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

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

Quick start

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

import { Hero134, hero134Demo } from "@/components/beste/block/hero134";

export default function Page() {
  return <Hero134 {...hero134Demo} />;
}

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

import { Hero134 } from "@/components/beste/block/hero134";

export default function Page() {
  return (
    <Hero134
      heading="Quiet work, plainly seen."
      items={[
        {
          image: {
            src: "https://images.unsplash.com/photo-1692115345789-34b87a01f7b5?w=1920&h=1200&fit=crop",
            alt: "Concrete stair sweeping through a grey atrium",
          },
          name: "The Atrium Rebuild",
          href: "/work/atrium-rebuild",
        },
        {
          image: {
            src: "https://images.unsplash.com/photo-1487958449943-2429e8be8625?w=1920&h=1200&fit=crop",
            alt: "Bare facade of a monolithic office block",
          },
          name: "Facade Study, No. 4",
          href: "/work/facade-study",
        },
      ]}
    />
  );
}

Props

type ChapterItem = {
  image: HeroImage;
  name: string;
  href: string;
};

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

Behavior notes

• Backgrounds crossfade through stacked absolute <img> layers with a 700ms opacity transition, auto-advancing every 4000ms via setInterval.
• The pager is a vertical column of pill buttons pinned to the right edge (top-1/2 -translate-y-1/2, right-4/right-6). The active pill grows to h-10 at full opacity while the rest stay h-4 and dimmed to opacity-40, animated over 500ms.
• Only the active item's name is shown at a time, as a single clickable line above the heading's baseline, rather than a full list of item names.
• The pager is only rendered when there is more than one item (items.length > 1); with a single item the hero falls back to a static background and heading with no visible controls.