Cine-Parallax
Cinematic parallax testimonial section with depth effects.
Main Features of Cine-Parallax
How to Use Cine-Parallax in Next.js
Installation Guide for Cine-Parallax
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
testimonials | TestimonialItem[] | [] | Array of testimonial items with id, name, role, company, content/text, media, avatar/image, video. |
backgroundColor | string | #0a0a0a | Background color of the component (hex, rgb, or hsl). |
blobColor | string | rgba(99, 102, 241, 0.2) | Color of the blob effect (hex, rgb, or hsl). |
blobSize | number | 800 | Size of the blob effect in pixels. |
title | string | Voices of Innovation. | Main title text. |
titleGradientFrom | string | #ffffff | Start color of the title gradient (hex, rgb, or hsl). |
titleGradientTo | string | rgba(255,255,255,0.5) | End color of the title gradient (hex, rgb, or hsl). |
subtitle | string | See how leading teams are reshaping their workflows using our platform. Real stories, real impact. | Subtitle text. |
subtitleColor | string | #a3a3a3 | Color of the subtitle text (hex, rgb, or hsl). |
trustedPartnersCount | string | 500+ | Trusted partners count text. |
trustedPartnersLabel | string | Trusted Partners | Trusted partners label text. |
trustedPartnersCountColor | string | #ffffff | Color of the trusted partners count (hex, rgb, or hsl). |
trustedPartnersLabelColor | string | #737373 | Color of the trusted partners label (hex, rgb, or hsl). |
cardBgColor | string | #171717 | Background color of the testimonial cards (hex, rgb, or hsl). |
cardBorderColor | string | rgba(255,255,255,0.1) | Border color of the testimonial cards (hex, rgb, or hsl). |
cardHoverBorderColor | string | rgba(255,255,255,0.2) | Border color of cards on hover (hex, rgb, or hsl). |
imageOverlayFrom | string | rgba(0,0,0,0.9) | Start color of the image overlay gradient (hex, rgb, or hsl). |
imageOverlayVia | string | rgba(0,0,0,0.2) | Middle color of the image overlay gradient (hex, rgb, or hsl). |
imageOverlayTo | string | transparent | End color of the image overlay gradient (hex, rgb, or hsl). |
playButtonBgColor | string | rgba(255,255,255,0.2) | Background color of play buttons (hex, rgb, or hsl). |
playButtonBorderColor | string | rgba(255,255,255,0.3) | Border color of play buttons (hex, rgb, or hsl). |
playButtonIconColor | string | #ffffff | Icon color of play buttons (hex, rgb, or hsl). |
nameColor | string | #ffffff | Color of the author name text (hex, rgb, or hsl). |
roleColor | string | #a3a3a3 | Color of the author role text (hex, rgb, or hsl). |
quoteColor | string | #d4d4d4 | Color of the quote text (hex, rgb, or hsl). |
avatarBorderColor | string | rgba(255,255,255,0.2) | Border color of the avatar images (hex, rgb, or hsl). |
Related Components
When to Use
Perfect for deep-tech brands, cinematic portfolios, and Next.js applications that want an immersive, volumetric social proof experience. Use this React component for a premium dark-mode section with video-enabled cards and deep parallax effects.
Best Practices
Maintain scalable component architecture by keeping foreground text bright and readable. Follow React best practices by pairing this with dark-themed layouts. Optimize for performance by managed the parallax intensity on touch devices.
Why This Component Matters in Modern UI Development
Cinematic parallax increases the perceived value and interactivity of a digital interface. This production-ready component helpsคุณ build an interface that feels deep and tangible, turning standard feedback into an interactive experience.
Frequently Asked Questions
QHow does the parallax work?
The cards and background blobs move at different speeds relative to the user's scroll position, creating a sense of three-dimensional depth.
QCan I add video testimonials?
Yes, each card supports an optional video background that plays on hover for a truly cinematic and alive feel.
QWhat are the partners for?
The component includes a dedicated 'Trusted Partners' counter to reinforce authority before showing individual testimonials.