Cinematic Stack
Cinematic scroll-stacked feature grid with sticky cards and smooth transitions.
Main Features of Cinematic Stack
How to Use Cinematic Stack in Next.js
Installation Guide for Cinematic Stack
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
features | Array<{title: string, desc: string, icon?: React.ReactNode, img?: string}> | [{title: 'Global Edge', desc: 'Latency is a choice. We chose zero.', img: '...'}, ...] | Array of feature items with title, description, optional icon, and optional image. |
backgroundColor | string | #000000 | Background color (hex, rgb, or hsl). |
stickyTop | string | top-24 | Sticky positioning class (Tailwind class). |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QHow does the 'Stack' work?
The component uses sticky positioning combined with Framer Motion scroll-offsets to 'lock' cards as the user scrolls, creating a physical stacking effect.
QCan I use videos?
Absolutely, each card is a container that supports high-fidelity video backgrounds or cinematic static textures for the feature reveal.
QIs it mobile responsive?
Yes, the stacking depth and sticky offsets scale dynamically for mobile, Ensuring the cinematic narrative remains impactful on small screens.