Cinematic Stack
Sticky scroll feature grid with full-bleed cinematic image cards, Uilora-branded feature content, and smooth whileInView animations on a black background.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Why teams choose Uilora | Section heading rendered in the top header block. |
| description | string | Every component is crafted to be production-ready, accessible, and beautiful out of the box. | Subtitle shown below the section heading. |
| accentColor | string | #6366f1 | Hex accent used for the label badge on each sticky card and the header eyebrow. |
When to Use
Perfect for landing pages with deep narrative-driven feature sections, product launch pages, and any page that benefits from a premium, immersive scroll experience. The cinematic quality signals quality and depth.
Best Practices
Use a dark or neutral page background so the black section blends cleanly. The sticky offset (top-24) assumes a fixed navbar — adjust if your navbar height differs. Keep feature headings concise for the large text to read comfortably at 7xl.
Why This Component Matters
Stacked scroll sequences guide users through complex feature sets with a sense of physical depth and narrative momentum. The cinematic aesthetic elevates perceived product quality immediately.
FAQ
QHow does sticky stacking work?
Each card uses CSS `sticky` positioning. As you scroll down, earlier cards remain pinned while new ones slide in from below, creating a layered stack effect.
QCan I change the feature content?
The 4 feature items (headings, sub-descriptions, images) are hardcoded in the features array at the top of the component. Clone and edit that array to customize.
QIs it responsive?
Yes — the text scales from text-5xl on mobile to text-7xl on desktop. The sticky offset works on all screen sizes.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.