Create a scroll stack for a fictional removals firm, Boxwell Removals, on a warm paper page (#efe7da) with ink text (#1e1b16). Left: a terracotta uppercase label, a heavy headline "Moving day, planned backwards", one line of copy, a progress rail with "0 of 15 done" and a dark "Get a fixed quote" button. Right: a 480px tall scrolling panel (#e5dccd, 30px radius, hidden scrollbar) holding five 330px cards with 46px gaps, each position sticky with a top offset of 14px plus 12px per card so the edges of earlier cards peek out above. Cards are tape yellow (#f2c14e), kraft (#c89b6d), blue (#3d5a80), coral (#e2725b) and ink, each with a stage pill (8 weeks out, 4 weeks out, 1 week out, Moving day, First week), a short title, a small flat SVG illustration and three real checkboxes that update the progress. On scroll, every card shrinks by 5% and darkens by 14% for each later card that slides over it, worked out from each card's natural top so it stays smooth. After 700ms the panel scrolls itself through the first two cards with an ease in out, stopping as soon as the visitor touches it. Arrow keys step card by card. On phones the panel is 372px tall with 300px cards. Turn off the scaling for reduced motion.
Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.
Use it in three steps
Copy the prompt with the button above.
Paste it into your tool, such as v0, Lovable, Bolt or Claude.
Make it yours by turning the five stages into your own process or pricing steps.
About these stacking cards on scroll
Stacking cards on scroll turn a long list of steps into something you can feel move. Here a removals firm lays out a move in five stages, and as you scroll each card slides up and settles on top of the last, leaving a thin edge of every earlier card showing above it like a pile of index cards. The cards underneath shrink a little and dim, so the one in front is always clearly the one to read.
The stacking itself is CSS, sticky cards with growing top offsets inside their own scrolling panel. A short script only adds the depth, working out from each card’s natural position how many cards cover it. The cards are working checklists, so ticking items fills the progress rail beside them, and a gentle self scroll on load shows visitors what to do before they touch it.
Why the prompt works
It uses sticky positioning for the stack, which keeps it smooth on phones.
It defines depth as a number, 5% smaller and 14% darker per covering card.
It keeps the effect inside a panel, so it fits a card on a phone.
It makes the cards useful, with checkboxes tied to a progress rail.
Where to use it
Process sections, onboarding plans, service steps and case study timelines, especially where each stage has a few things to do.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
We use cookies to measure how the site is used and, if you allow it, to show advertising. Prompts you copy and previews you try are never collected. See our privacy policy.
