Thumbnail Marquee Hero

Hero136: Thumbnail Marquee Hero

Full-bleed hero whose background crossfades to the active item, paired with an infinitely auto-scrolling marquee of clickable thumbnails along the bottom edge and a giant heading with the active item's caption above the strip.

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

Base UI flavor

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

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

Quick start

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

import { Hero136, hero136Demo } from "@/components/beste/block/hero136";

export default function Page() {
  return <Hero136 {...hero136Demo} />;
}

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

import { Hero136 } from "@/components/beste/block/hero136";

export default function Page() {
  return (
    <Hero136
      heading="Everything in one grey."
      items={[
        {
          image: {
            src: "https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=1920&h=1200&fit=crop",
            alt: "Concrete stair detail under flat daylight",
          },
          name: "Stair, study in shadow",
          href: "/work/stair-study",
        },
        {
          image: {
            src: "https://images.unsplash.com/photo-1554907984-15263bfd63bd?w=1920&h=1200&fit=crop",
            alt: "Folded paper sculpture on a plain surface",
          },
          name: "Paper, folded once",
          href: "/work/paper-fold",
        },
      ]}
    />
  );
}

Props

type MarqueeFrame = {
  image: MarqueeImage;
  name: string;
  href: string;
};

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

Behavior notes

• The thumbnail strip is an infinite CSS marquee: items is duplicated ([...items, ...items]) and the doubled track runs a scoped hero136-marquee keyframe animation (translateX(0) to translateX(-50%)) over 32 seconds, linear, infinite, producing a seamless loop.
• Hovering anywhere over the marquee track pauses the animation via group-hover/marquee:[animation-play-state:paused]; hovering an individual thumbnail also sets it active, which crossfades the section background.
• The duplicated second half of the track is marked aria-hidden with tabIndex={-1}, so keyboard and screen-reader users only encounter each thumbnail once despite the doubled DOM used for the loop.
• Left and right edges of the marquee fade to the hero's overlay color via gradient masks, so thumbnails visually emerge from and dissolve into the background instead of being hard-clipped.
• The background itself still auto-advances every 4000ms via setInterval, independent of the marquee's own 32-second scroll cycle.