Templates · Page section
Stacked cards
A four-step process section in which each colour card pins as you scroll and the next slides over it, like sheets of paper.
Open the live pageDownload the prompt
One HTML file: CSS sticky positioning and springs.
The prompt
One prompt that asks for one self-contained HTML file. The live page is the reference output it produced.
--- slug: stacked-cards category: section tone: light industry: [agency, saas, portfolio] stack: [css-sticky, springs] --- # Stacked Cards Build **one self-contained HTML file** that renders the layer described below. ## Intent A four-step "how we work" process in which each step is a large colour card. As you scroll, each card pins to the viewport, and the next card slides up over it. The covered card sinks back: it scales down, lifts slightly and dims, so the stack reads like physical paper. The section drops into any page. ## Composition - Intro header (70svh) → the stack → footer (70svh), so the section is seen in context. - Each card sits in a `position: sticky; top: 0; height: 100svh` wrapper; the card is centred at `min(1100px, 100%)` × `min(72svh, 640px)`. - Card grid: a step number top-left, a large title spanning the bottom, and body copy in the right column. - Below 768px: single column. ## Look | Token | Value | Role | |---|---|---| | `--bg` | #eeece7 | page | | `--card-1..4` | #1f3d2b, #c8553d, #2d4059, #e0b04a | card fills | | `--on-card` | #fbf8f1 | text on dark cards (card 4 uses `--fg`) | | `--radius` | 28px | card corner | - Type: Manrope 800 for titles `clamp(2rem, 5vw, 4rem)`, 400 for body. ## Motion | Element | Trigger | Behaviour | Physics | |---|---|---|---| | Card *n* | scroll | Progress = how far card *n+1* has covered it (0→1). Scale down by up to 10%, translateY −3svh, black overlay → 35% (never fade the card itself, or the card beneath shows through) | spring k=180 c=26 per card | Read positions with `getBoundingClientRect` inside the single rAF loop; write only `transform` and the overlay's opacity (via a `--dim` custom property). ## Constraints - Semantic: `<section aria-label>`; each card is an `<article>` with an `<h2>`. - Reduced motion: sticky stacking stays, the springs do not run. ## Deliverable Return only the complete `index.html`, with no commentary.