Cinematic Hero
Seamless layout transition lightbox with cinematic hero view.
Main Features of Cinematic Hero
How to Use Cinematic Hero in Next.js
Installation Guide for Cinematic Hero
Props
Customize the component with these 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. |
thumbnailImage | string | Optional thumbnail image URL (uses main image if not provided). | |
backgroundColor | string | #09090b | Background color (hex, rgb, or hsl). |
hoverText | string | Open Cinematic View | Text displayed on thumbnail hover. |
title | string | Mountain Solitude | Title text displayed in lightbox. |
description | string | Captured during the golden hour in the Alps. The silence was deafening, the air crisp. | Description text displayed in lightbox. |
Related Components
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
Maintain consistent spacing within your design system by using it for focal narratives. Follow React best practices by pairing this with bold, professional typography. Optimize for performance by using efficient image textures.
Why This Component Matters in Modern UI Development
Cinematic-based aesthetics communicate technical reliability, clarity, and timeless craft. This production-ready UI template helpsคุณ build an interface that feels organized and professional, reflecting a brand identity rooted in design purity.
Frequently Asked Questions
QHow does the 'Expansion' work?
The component uses localized shared-element transitions (layout-id) to seamlessly morph the thumbnail into the full-screen cinematic view, creating a high-fidelity 'opening' effect.
QCan I adjust the zoom?
Yes, the transform intensity and primary background blur are fully configurable to match your scroll intensity.
QIs it mobile responsive?
The cinematic scale and typographic scales adapt for mobile, ensuring the objective clarity remains consistent on high-density mobile screens.