Film Strip
Film strip gallery with horizontal scrolling.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [...array of image URLs] | Array of image source URLs. |
| backgroundColor | string | #f0f0f0 | Background color (hex, rgb, or hsl). |
| archiveText | string | Archive 2024 | Archive label text displayed at top. |
| figurePrefix | string | FIG. | Prefix for figure labels. |
| isoText | string | ISO 400 | ISO text displayed on each image. |
| scrollHeight | string | 300vh | Total scroll height for the component. |
When to Use
Ideal for creative studios, experimental art projects, and Next.js portfolios that want an organic 'Film-Strip' aesthetic. Use this layout for an engaging experience where content feels 'Mailed' and 'Drafted' by physical film borders.
Best Practices
Maintain scalable component architecture by keeping the archive labels consistent. Follow React best practices by pairing this with bold, technical typography. Optimize for performance by managed the marquee intensity.
Why This Component Matters
Hand-drawn film animations create a sense of digital 'Authenticity' and human touch. This production-ready UI template helps you build an interface that feels alive and 'Drafted', adding a unique signatures to your brand structure.
FAQ
QAre those film labels real?
The component features localized metadata strings (ISO 400, FIG.) and rough film-strip borders to simulate the raw structural honesty of architectural blueprint failures.
QHow does it scroll?
The strip uses localized scroll-driven animations with varying offsets for each row, creating a high-fidelity 'physical' movement as the user navigates the page.
QIs it mobile responsive?
The horizontal flow and typographic scales adapt for mobile, ensuring the 'Draft' narrative remains impactful and structural on small screens.
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.