Cinematic
Cinematic gallery with widescreen presentation.
Main Features of Cinematic
How to Use Cinematic in Next.js
Installation Guide for Cinematic
Props
Customize the component with these 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. |
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 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 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 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.