Stack Spread

A scroll-driven scattering card stack animation with spring-physics pointer parallax and responsive touch layouts. Built with Motion.

Preview

Digital products, interfaces, and experiences built around people.

Scroll

Install the component using the CLI.

$npx shadcn@latest add https://www.ankurz.me/r/stack-spread.json

Import the component:

import StackSpread from "@/components/ui/stack-spread"

Use it in your code:

<StackSpread
  scrollLength={350}
  bgColor="#ececeb"
  textColor="#141414"
  showScrollHint={true}
/>

Property	Type	Default	Description
`scrollLength`	`number`	`350`	Scatter scroll distance, in vh.
`bgColor`	`string`	`"#ececeb"`	Background color of the stage container.
`clusterRotation`	`boolean`	`true`	Fan the clustered stack or start flat.
`stackScale`	`number`	`0.82`	Scale of cards while clustered before scatter.
`cardRadius`	`number`	`8`	Corner radius on each card in px (desktop).
`textColor`	`string`	`"#141414"`	Color of the centre headline and subtitle.
`textFadeStart`	`number`	`0.3`	Scroll progress (0-1) where text starts fading in.
`showScrollHint`	`boolean`	`true`	Show the scroll to spread hint at the bottom.