Stacking Cards

Show a process in sticky cards. As each card slides into place, the previous card tilts back.

Dependencies: gsap
Size: 320 lines
Controls: 10 controls

example.tsx

1import { StackingCards } from "@/components/onycx/stacking-cards";23export default function Example() {4  return (5    <StackingCards6      eyebrow={"05 / A shared journey"}7      heading={"YOUR THOUGHTS.\nOUR PERSPECTIVE."}8      headingAccent={"Something extraordinary."}9      top={110}10      scaleTo={0.965}11      tilt={-2}12      scrub={0.7}13      background={"#e3ebee"}14      card={"#f8fafb"}15      accent={"#354b60"}16    />17  );18}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/stacking-cards.json

1 · Dependencies

npm install gsap

2 · Copy the source

components/onycx/stacking-cards.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the stacking-cards.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
items	StackingCard[]	—	{ label, title, body, detail?, image, imageAlt? } per card.
eyebrow / note	string	"05 / A shared journey" / "Good things take a little consideration."	Top row: dotted eyebrow and a muted note.
heading / headingAccent	string	—	Uppercase heading lines ("\n" breaks) and a serif last line at 0.78em.
intro	string	—	Muted paragraph beside the heading. Empty hides it.
top / endOffset	number	110 / 130	Sticky offset, and the viewport offset where the next card finishes covering.
scaleTo / tilt / scrub	number	0.965 / -2 / 0.7	How a covered card recedes and how tightly it follows scroll.
background / card / accent	string	"#e3ebee" / "#f8fafb" / "#354b60"	Section, card surface and step number colours.
className	string	—	Extra classes on the section.

Behaviour notes

Default images point to /media/interior-gallery/… (the original project's renders); replace them with your own.
The recede scrub runs only at 1000px+ with a fine pointer; at 900px and below, on coarse pointers and with reduced motion the cards are not sticky and scroll as a plain list.
Breakpoints follow the source: 1100px stacks the heading and tightens the cards, 900px drops sticky, 600px stacks image under copy with a 240px image.
The heading and intro rise 28px once (1.1s power2.out) unless already in view.

Pattern origin

IntDes (interior studio) 'A shared journey' process stack: cards sticky at top 110px, grid 1fr / 1.1fr, gap 35px, min-height 470px, radius 32px, padding 16px on #f8fafb over an #e3ebee section with 45px top corners; the covered card scrubs to scale 0.965 and rotateX −2° (origin center top) while the next card travels from top 85% to top 130px, scrub 0.7, perspective 1200px.

#sticky#scroll#cards#process#gsap