Section Library

Stacking Cards

  • GSAP + ScrollTrigger
  • Scroll-pinned
  • 3–6 items
Live preview
Full screen ↗
Loading preview…

Scroll & click inside the frame — it's the real section running with demo content

Step 1 — your customization message
Integrate the following section into my site, placing it [where on the page].
Replace ALL placeholder text and images with content for my project:
[1-2 sentences about your business/site].
My images are in [folder/paths]. Match the section's colors and fonts
to my site's existing design.

[PASTE THE FULL SECTION PROMPT HERE]
Step 2 — the prompt · Stacking Cards479 lines · 16,725 chars
You are given a task to integrate an existing React component in the codebase.

The codebase should support:
- Next.js (App Router or Pages)
- Tailwind CSS
- TypeScript

If it doesn't, provide instructions on how to install Tailwind or TypeScript.

What it is

A scroll-pinned showcase where full-screen project cards slide up and stack on top of each other, one per scroll. Each card has a big image, a title, three metrics (like area / rooms / year), a price, and a link.

Perfect for

Portfolios with 3–6 items: properties, projects, products, case studies, menu highlights. This is your “here's what we've made” section.

What to prepare

  • 3–6 items, each with: a cover image, name, one-line subtitle, location/tag, three metrics, and a price or key figure
  • A page or route each card should link to (or tell Claude Code to make them non-clickable for now)

Good to know

Stick to 3–6 cards — the prompt itself says it best: “2 feels accidental, 7 is a slog.” Every field on the card gets displayed, so fill them all with real data. Like Aperture Reveal, it's static-stacked on mobile on purpose.