Stack Spread

Eight image cards start clustered in a stack. Scroll, and they fan out across the screen - each card gets its own rotation and depth, drifting slightly with cursor position once the spread finishes. A centered headline fades in partway through.

Built on framer-motion's scroll and spring hooks - no GSAP, no canvas. Card radius, stack scale, cluster rotation, background and text color, and the scroll distance the spread plays out over are all exposed as controls. Respects reduced motion: rotation and scale-in flatten, cursor parallax turns off.

Key Features

• 8 photo cards scatter from a clustered stack as the page scrolls, no scroll-jacking library involved

• Each card carries its own rotation, offset, and depth, so the scatter reads as organic rather than uniform

• Cursor parallax kicks in once the cards are fully spread, and pauses automatically once you scroll past the section

• Centered headline fades in partway through the scatter, timed to scroll progress

• Reduced-motion aware: card rotation and the headline's scale-in flatten, cursor parallax turns off entirely

• Framer-motion only no GSAP, no canvas, no extra runtime dependency

How to Use

Drop the component onto a page. It sets its own section height from the Scroll Length control (in vh) - the scatter plays out over that scroll distance, so give it room.

Stack Scale and Card Radius shape the clustered starting look; Cluster Rotation toggles whether that starting stack is fanned or flat. Background and Text Color set the section's palette, and Text Fade Start (0-1) controls how early in the scroll the centered headline starts appearing.

One limitation worth knowing before you install: the 8 images, their positions, and the headline copy are fixed for this release - none of that is exposed as a property control yet. What you can adjust is the motion and the palette, not the content.