Filmstrip Scrub

Component 13

About

A horizontal filmstrip scrubber with a spring-loaded playhead — drag or hover the strip to crossfade a large preview between stills, with frame ticks, a live monospace timecode, and idle auto-scrubbing.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Filmstrip Scrub to your project and fits it to your theme.

Code

How Filmstrip Scrub is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  FilmstripScrub,
  type FilmstripFrame,
} from "@/components/ui/filmstrip-scrub";

const frames: FilmstripFrame[] = [
  {
    id: "1",
    src: "https://cdn.21st.dev/assets/mirror/55/5597753f46fe1b5bfa010aec0794172d4aa3d009b123edba9f4c80c6040722f8.jpg",
    alt: "Frame 1",
    label: "dawn",
  },
  {
    id: "2",
    src: "https://cdn.21st.dev/assets/mirror/d7/d7957275389281b631ca134f9f4fc5560da4ed105c5b696d0679efb0fa9deaae.jpg",
    alt: "Frame 2",
  },
  {
    id: "3",
    src: "https://cdn.21st.dev/assets/mirror/a5/a5949a2974ebc6548e02025442e01c18b7f1afdc131f8a93f74ef72d18d24c4c.jpg",
    alt: "Frame 3",
  },
  {
    id: "4",
    src: "https://cdn.21st.dev/assets/mirror/b2/b20fb75ce6c360980d56e2e79deea31c8f8ff245c73a53d63347907ecb5d4f47.jpg",
    alt: "Frame 4",
    label: "morning",
  },
  {
    id: "5",
    src: "https://cdn.21st.dev/assets/mirror/06/06beb710c16ef85e132981438f81921057b2163e8c00ed6c011a940511289a24.jpg",
    alt: "Frame 5",
  },
  {
    id: "6",
    src: "https://cdn.21st.dev/assets/mirror/19/19ad0af31a1dfdce7da7bf71561eceee72c6825e58c23fa537c079c9ba94a980.jpg",
    alt: "Frame 6",
  },
  {
    id: "7",
    src: "https://cdn.21st.dev/assets/mirror/3e/3e187d9804bc4474211726837a979111cb1aa3be4053e7f424525e2db88daae4.jpg",
    alt: "Frame 7",
    label: "noon",
  },
  {
    id: "8",
    src: "https://cdn.21st.dev/assets/mirror/76/76424c2e11da164df4af40c6169b88f29e586a8c32d119d50c04c7c1bed58994.jpg",
    alt: "Frame 8",
  },
  {
    id: "9",
    src: "https://cdn.21st.dev/assets/mirror/0e/0e1834c4506bb9d7f1a3ff98b209e499c64a5777301f106988fcafcb66166677.jpg",
    alt: "Frame 9",
  },
  {
    id: "10",
    src: "https://cdn.21st.dev/assets/mirror/02/0233de16bfb61d42ef51d96b60a20eb6f533743b240a6449b0c2f323ad8645b6.jpg",
    alt: "Frame 10",
    label: "dusk",
  },
  {
    id: "11",
    src: "https://cdn.21st.dev/assets/mirror/84/8430347b0522e5f65489c4328b43e96dda0e0d7e94d4e7243a350b61bf9d27a5.jpg",
    alt: "Frame 11",
  },
  {
    id: "12",
    src: "https://cdn.21st.dev/assets/mirror/cd/cd8211b7e42d4b2b564b9c73ba10a241b6c8ce8de775f0dfbeed5bfc8b06eb57.jpg",
    alt: "Frame 12",
    label: "night",
  },
];

export default function FilmstripScrubDemo() {
  return (
    <div className="flex w-full items-center justify-center bg-[var(--color-bg,#080c14)] p-8">
      <div className="w-full max-w-2xl">
        <FilmstripScrub frames={frames} />
      </div>
    </div>
  );
}