Film Strip
Uilora Film Strip — vintage horizontal scroll gallery with sprocket-hole framing.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [...5 image URLs] | Array of image URLs to display in film strips. |
| backgroundColor | string | #111 | #111 Background color (hex, rgb, or hsl). |
| borderColor | string | #222 | #222 Film strip border color (hex, rgb, or hsl). |
When to Use
Ideal for vintage storytelling, film archives, and Next.js applications that want a nostalgic 'Film Strip' aesthetic. Use this gallery to communicate cinematic history, process, and digital 'Draft' culture through horizontal scrolling.
Best Practices
Maintain scalable component architecture by keeping the film spacing consistent. Follow React best practices by pairing this with high-contrast, moody photography. Optimize for performance by using efficient image textures.
Why This Component Matters
Film-based aesthetics create a sense of authenticity and human touch. This Uilora-ready template helps you build an interface that feels alive and scanned, adding a unique cinematic signature to your brand narrative.
FAQ
QAre colors editable?
Absolutely, you can change both the `backgroundColor` and `borderColor` (strip color) to create 'Noir' or 'Kodak' film effects.
QHow does the scroll work?
The component features a localized horizontal scroll container that simulates a continuous negative strip being 'Pulled' through a projector.
QIs it mobile responsive?
Yes, the film height and sprocket spans scale for mobile, ensuring the vintage narrative remains consistent on small screens.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.