Cinematic
Cinematic gallery with widescreen presentation.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| image | string | https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?q=80&w=2700&auto=format&fit=crop | Main image source URL. |
| backgroundColor | string | #000000 | Background color (hex, rgb, or hsl). |
| title | string | Élégance | Main title text. |
| subtitle | string | Cinematic Experience | Subtitle text. |
| triggerTexts | string[] | ['Zoom.', 'Expand.', 'Immerse.'] | Array of trigger text strings displayed during scroll. |
| scrollHeight | string | 250vh | Total scroll height for the component. |
When to Use
Excellent for high-end fashion campaigns, award-winning portfolios, and Next.js applications that want a meaningful 'Cinematic' aesthetic. Use this layout 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
Cinematic-based aesthetics communicate technical reliability, clarity, and timeless craft. This production-ready UI template helps you build an interface that feels organized and professional, reflecting a brand identity rooted in design purity.
FAQ
QHow does it scale?
The component uses localized scroll-driven transforms (scale, blur) to simulate a high-fidelity 'Camera Zoom' into the heart of the project narrative.
QCan I adjust scroll?
Yes, both the direction and intensity of the zoom (scrollHeight) 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.