Create a method page for a fictional bakery, Brickfield Bakehouse, where each recipe step springs in as it scrolls into view. Use a full screen scroll container on flour cream #f7f1e6 with dark rye text #2a1a12, crust brown #8a4b23 and wheat #e2b86b. Header: a small loaf logo, the serif headline "From starter to slice in thirty six hours" with the second half italic in brown, and two summary tiles, 36h and 55 min hands on. Below, a vertical timeline with a 2px line down the middle that fills brown as you read, and six alternating cards (24px radius, cream #fffaf1): a 72px inline SVG drawing, the time ("Fri 9pm"), the step title, one line of quantities and a sage hands on chip. Each card enters from its own side: left cards from 150px left with a 5 degree tilt, right cards from the right, some from 90px below at 86% scale. Drive them with a real spring (stiffness 190, damping 15, two substeps a frame) so they overshoot and settle, stagger cards that trigger together by 110ms, and reset a card when it leaves below the screen so it plays again. On phones use one column with the line at the left and 70px offsets. End with a dark panel and a "Book the Saturday class, £45" button. Reduced motion shows the cards in place.
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 writing your own process into the six cards and redrawing the little pictures.
About this animate on scroll effect
Most animate on scroll effects fade a block up by twenty pixels on a fixed curve, and after the third one you stop noticing. This version gives every step a direction and a little weight. Cards on the left swing in from the left, cards on the right from the right, and a few rise from below, and all of them are pushed by a spring that overshoots slightly and settles, like a card dropped onto a table.
The content is a real method, a country loaf over thirty six hours, so the motion follows the reading order. A brown line fills down the timeline as you go, and when a card drops back below the screen it resets, so scrolling back down replays the arrival instead of leaving a page that only moves once.
Why the prompt works
- It names the spring values, stiffness 190 and damping 15, which set the size of the bounce.
- It gives each card a starting point, so the page has rhythm instead of one repeated move.
- It staggers cards that arrive together, by 110 milliseconds.
- It shrinks the offsets on phones, so nothing pokes out sideways.
Where to use it
Recipes, how it works pages, onboarding steps and project timelines, wherever the order of things matters as much as the things.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
