Filmstrip Hero

Hero131: Filmstrip Hero

Full-bleed hero whose background crossfades between photos, with a giant heading and the active frame's title pinned bottom-left, and a row of equal-width filmstrip thumbnails running along the bottom edge.

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

Base UI flavor

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

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

Quick start

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

import { Hero131, hero131Demo } from "@/components/beste/block/hero131";

export default function Page() {
  return <Hero131 {...hero131Demo} />;
}

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

import { Hero131 } from "@/components/beste/block/hero131";

export default function Page() {
  return (
    <Hero131
      heading="Light, held still."
      items={[
        {
          image: {
            src: "https://images.unsplash.com/photo-1601326167532-d457cd8186cc?w=1920&h=1200&fit=crop",
            alt: "Long exposure of a misted ridge at dawn",
          },
          name: "Ridgeline at first light",
          href: "/work/ridgeline",
        },
        {
          image: {
            src: "https://images.unsplash.com/photo-1559255244-34f2765f07c4?w=1920&h=1200&fit=crop",
            alt: "Fog rolling over a quiet pine valley",
          },
          name: "Valley, holding its breath",
          href: "/work/valley",
        },
      ]}
    />
  );
}

Props

type FilmFrame = {
  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; the active layer is opacity-100 and the rest sit at opacity-0.
• Active frame auto-advances every 4000ms via setInterval.
• Filmstrip thumbnails respond to both onMouseEnter and onClick, but not focus: hovering a thumbnail swaps the background immediately, while keyboard users only trigger the swap by activating the link, not by tabbing to it.
• Thumbnails are flexible (min-w-0 flex-1, capped at sm:max-w-[11rem]) so the whole strip shrinks to fit the section width rather than scrolling horizontally; there is no hover-scale transform, only a border-color and opacity change to mark the active frame.
• Each thumbnail is itself a link to item.href, so clicking a frame both updates the hero and navigates.