Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
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:
| 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