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.
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>
);
}
Part of Motiq — browse the full library on 21st.dev.