Cinematic Hero
Seamless layout transition lightbox with cinematic hero view.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| image | string | https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?q=80&w=2000&auto=format&fit=crop | Main image source URL. |
| backgroundColor | string | #09090b | Page background color. |
When to Use
Excellent for high-end fashion campaigns, award-winning portfolios, and Next.js applications that want a meaningful 'Cinematic' aesthetic. Use this lightbox to communicate digital excellence and sophisticated storytelling through widescreen modules.
Best Practices
Use high-resolution wide images for the most cinematic impact. Dark backgrounds (near #09090b) make the layout-morph transition most dramatic.
Why This Component Matters
Cinematic-based aesthetics communicate technical reliability, clarity, and timeless craft. This production-ready Uilora template helps you build an interface that feels organized and professional, reflecting a brand identity rooted in design purity.
FAQ
QHow does the expansion work?
The component uses Framer Motion layout-id to seamlessly morph the thumbnail card into the full-screen cinematic view.
QCan I use my own image?
Yes — pass any image URL via the `image` prop. It fills both the thumbnail and the full-screen view.
QIs it mobile responsive?
The lightbox container uses 95vw × 90vh, scaling fluidly to any screen size.