Getting Started
Templates
Components
A sophisticated filmstrip component featuring Mac dock-style magnification, animated rolling timecode numbers, and an info panel. Each frame displays unique metadata with smooth transitions powered by Framer Motion and NumberFlow.
Key Features:
import { FilmstripTimecode } from "@/components/ui/filmstrip-timecode"
const frames = [
{
id: "frame-01",
src: "/images/project-1.jpg",
alt: "Project Alpha",
headline: "Product Launch",
subline: "From concept to market in 90 days.",
meta: ["Status: shipped", "Team: 4 engineers", "Impact: 2x growth"],
},
{
id: "frame-02",
src: "/images/project-2.jpg",
alt: "Project Beta",
headline: "System Redesign",
subline: "A complete overhaul of the core architecture.",
meta: ["Status: in progress", "Team: 6 engineers", "Timeline: Q2"],
},
{
id: "frame-03",
src: "/images/project-3.jpg",
alt: "Project Gamma",
headline: "Mobile App",
subline: "Cross-platform experience for iOS and Android.",
meta: ["Status: beta", "Downloads: 10k+", "Rating: 4.8"],
},
]
export default function Example() {
return (
<FilmstripTimecode
items={frames}
defaultIndex={0}
showHelperText={true}
exploreButtonText="View Details"
onFrameChange={(index, item) => {
console.log("Active frame:", item.headline)
}}
onExplore={(index, item) => {
console.log("Explore clicked:", item.id)
}}
/>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
items | StripItem[] | Default items | Array of frame items to display |
defaultIndex | number | 0 | Initially active frame index |
onFrameChange | (index: number, item: StripItem) => void | undefined | Callback when active frame changes |
onExplore | (index: number, item: StripItem) => void | undefined | Callback when explore button clicked |
showHelperText | boolean | true | Show navigation helper text |
exploreButtonText | string | "Explore frame" | Text for the explore button |
className | string | undefined | Additional CSS classes |
| Property | Type | Description |
|---|---|---|
id | string | Unique identifier for the frame |
src | string | Image source URL |
alt | string | Alt text for the image |
headline | string | Frame headline/title |
subline | string | Short description |
meta | string[] | Array of metadata strings (key: value format) |
The filmstrip uses a Mac dock-style magnification effect:
Each frame generates a unique timecode based on its ID and headline:
HH:MM:SS:FF (hours, minutes, seconds, frames)A custom cursor ring follows the pointer when hovering the filmstrip:
mix-blend-difference for visibility on any background| Key | Action |
|---|---|
| Arrow Left | Previous frame |
| Arrow Right | Next frame |
| Home | First frame |
| End | Last frame |
role="tablist" and role="tab" structure