Uilora Cinescope
Cinematic 2.39:1 lightbox with letterbox bars, scan-line grain, HUD scrubber, and film metadata.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| image | string | https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?q=80&w=2187&auto=format&fit=crop | Main image (landscape images work best for 2.39:1 ratio). |
| backgroundColor | string | #000000 | Pure black background for maximum cinematic effect. |
When to Use
Perfect for film production companies and cinematic brand campaigns. The letterbox trigger card and animated bars make every open feel like a film screening.
Best Practices
Use wide-format (landscape) images for the correct 2.39:1 cinematic ratio. Keep backgroundColor at #000000 — the letterbox illusion requires true black.
Why This Component Matters
Cinematic framing communicates quality, intentionality, and production value. This Uilora template makes every image feel like a film still.
FAQ
QWhat's the trigger?
A 2.39:1 aspect-ratio card with letterbox bars and a hover '▶ PLAY' reveal — it looks like a physical Blu-ray cover.
QWhat's the progress scrubber?
A decorative 2px playhead that animates from 0% to 60% width over 8 seconds, simulating a film timeline.
QIs it mobile responsive?
The 2.39:1 container scales proportionally to viewport width on all screen sizes.
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.