Cine-Parallax
Cinematic parallax testimonial section with depth effects.
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). |
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
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.
FAQ
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.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.
Enjoying Uilora? Unlock the full library.
56+ premium components, unlimited CLI, unlimited MCP, v0 + Claude prompts — one payment, forever.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.