Stacked Card Parallax Hero

What this builds

A full-viewport hero section where 3-5 content cards are initially stacked/overlapping at the center, then separate and fan out with parallax depth as the user scrolls. Each card moves at a different speed, creating a true depth illusion. A headline sits above or between the cards, and the stack reassembles on scroll-up.

• 3-5 overlapping cards in a tight initial stack
• Scroll-driven separation with per-card speed ratios derived from a depth model
• Subtle rotation and scale differences per card for visual depth
• Optional tilt-on-hover per card (mouse-reactive 3D tilt)
• Headline + subline above the stack
• prefers-reduced-motion fallback: cards shown in a flat grid, no parallax
• Mobile: stack converts to a horizontal scroll or vertical list

When to use / when not to

• Use when the hero needs to showcase 3-5 product features, pricing tiers, testimonials, or content pieces that benefit from a "deck of cards" metaphor.
• Use when the brand wants a tactile, physical-feeling interface with perceived depth.
• Do NOT use for a single hero image or message. The card stack needs 3+ distinct content items. Use hero-gradient-mesh-aurora for single-message heroes.
• Do NOT use when cards have heavy interactive content (forms, complex inputs). Parallax movement during interaction is disorienting.
• For the underlying parallax depth math in isolation, see primitive parallax-depth-systems. This toolkit builds the complete card-stack hero around it.