Cinematic Noir
Video portrait testimonial with cinematic black and white aesthetic.
Main Features of Cinematic Noir
How to Use Cinematic Noir in Next.js
Installation Guide for Cinematic Noir
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
video | string | https://assets.mixkit.co/videos/mixkit-portrait-of-a-woman-in-a-pool-1259-large.mp4 | Video source URL. |
quote | string | The platform didn't just change our workflow; it fundamentally shifted how we perceive creativity. | Testimonial quote text. |
author | string | Elena Corves | Author name. |
role | string | Creative Director | Author role/title. |
backgroundColor | string | #000000 | Background color (hex, rgb, or hsl). |
progressColor | string | #dc2626 | Progress bar color (hex, rgb, or hsl). |
progressDuration | number | 15 | Progress bar animation duration in seconds. |
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 testimonial 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
QWhy 'Noir'?
The component uses localized CSS filters (grayscale) and high-contrast video backgrounds to simulate the raw structural honesty of physical film-noir cinema.
QCan I adjust duration?
Absolutely, you can customize both the `progressDuration` and the primary 'progressColor' to match your brand's specific 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.