Vertical Index List Hero

Hero128: Vertical Index List Hero

Full-bleed hero whose background crossfades between project photos, with a giant heading anchored bottom-left and a numbered vertical index list on the right where each row is itself the trigger: hovering, clicking, or the auto-timer all move the active project and its background together.

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

Base UI flavor

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

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

Quick start

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

import { Hero128, hero128Demo } from "@/components/beste/block/hero128";

export default function Page() {
  return <Hero128 {...hero128Demo} />;
}

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

import { Hero128 } from "@/components/beste/block/hero128";

export default function Page() {
  return (
    <Hero128
      heading="Selected work, one frame at a time."
      items={[
        {
          name: "Marlow Coastal House",
          category: "Architecture",
          image: {
            src: "https://images.unsplash.com/photo-1566067218066-fe52f5431e10?w=2000&auto=format&fit=crop",
            alt: "Pale concrete living room washed in afternoon light",
          },
          href: "https://beste.co",
        },
        {
          name: "Norden Reading Room",
          category: "Interiors",
          image: {
            src: "https://images.unsplash.com/photo-1539984831038-a068fe437441?w=2000&auto=format&fit=crop",
            alt: "Minimal stone interior with a long horizontal window",
          },
          href: "https://beste.co",
        },
      ]}
    />
  );
}

Props

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

type IndexItem = {
  name: string;
  category: string;
  image: IndexImage;
  href: string;
};

Behavior notes

• Every list row is a real Link with both onClick and onMouseEnter handlers wired to setActive(index), so simply hovering a row (not just clicking it) swaps the active background image; this differs from hero119/hero127, where only the numbered pager buttons change the selection.
• Because each row keeps its href, the list also works as ordinary navigation: keyboard/tab focus reaches every project's link, and a click follows through to item.href after updating the active state.
• The background crossfade is the same technique as hero127: every photo is stacked as its own absolutely-positioned <img>, the active one at opacity-100 and the rest at opacity-0, blended with a 700ms transition-opacity.
• A 4000ms setInterval inside useEffect auto-advances the active index using a functional state update, so it always continues from wherever a hover or click last left it rather than from a fixed schedule.
• The active row is marked with a solid border-background left border and full-opacity text; inactive rows sit at text-background/50 and step up to text-background/80 on hover, before becoming fully active.