Filmstrip Stage Viewer

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its media-slot dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/gallery/gallery20.tsx instead.

Usage

The file also exports gallery20Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Gallery20, gallery20Demo } from "@/components/blocks/gallery/gallery20";

export default function Page() {
  return <Gallery20 {...gallery20Demo} />;
}

Props

Types

interface StageFrame {
  image?: { src: string; alt: string };
  caption: string;
}

Behavior notes

• Real client-side state: `activeIndex` (number) drives which frame the stage shows; the round arrow buttons on the picture step it forward/backward with wraparound.
• Clicking any filmstrip thumbnail jumps straight to it via the same `activeIndex` state, it isn't limited to stepping one at a time.
• A `useEffect` keyed on `activeIndex` calls `scrollIntoView({ behavior: "smooth", inline: "center" })` on the active thumbnail's own ref (tracked in a `useRef` array, one entry per frame) so the filmstrip auto-scrolls to keep it in view - a real DOM side effect, not derived state.
• Inactive thumbnails render at `opacity-40`; the active thumbnail is full opacity with a primary-colored ring and border, plus `aria-current` for assistive tech.
• The dark stage surface (bg-neutral-950), the foot gradient (from-black/85), and the white arrow-button chrome on top of the photo are the deliberate dark-viewer-surface exception to the semantic-tokens rule - everything else in the block (heading, description, filmstrip border/ring colors) uses normal semantic tokens.
• "use client" component, so its demo props live in the sibling gallery20.demo.tsx file per this repo's client/demo-file-split rule, not in gallery20.tsx itself.