Create a shopping basket for a fictional bagel bakery, Holeworth Bagels, on a warm cream page (#f4efe6). A 540px white card (#fffdf8, 30px radius) has a red uppercase label (#e4572e), the headline "Boiled at five, at your door by eight" and a dark bag icon with a red count badge. Three rows (Everything bagels, Sesame and sea salt, Rye and caraway), each with a small SVG bagel with scattered seeds, the name, the pack size and a line price, and a pill quantity selector with 44px round minus and plus buttons around the number. The number is a real text input (inputmode numeric, 16px or more, a hidden label) that becomes visible when focused, so people can type a quantity, with arrow keys stepping it. Every number on the card rolls digit by digit with the Web Animations API, 420ms with a slight overshoot, and only the digits that change move: new digits enter from below when the value goes up and from above when it goes down, with the old digit leaving the other way and a 45ms stagger from the right. Quantities run 0 to 12; at 0 the row fades and is struck through. Under the rows, a free delivery bar fills toward £25 and turns green (#2f7d4f), then a rolling subtotal and a dark Checkout button. Skip the roll 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 swapping in your own products, prices and delivery threshold.
About this quantity selector
The plus and minus buttons in a basket are tapped more than almost anything else in a shop, yet they usually just swap one number for another. This quantity selector makes each change visible. Tap plus and the new digit rolls up from below while the old one slides away, tap minus and it rolls the other way, and the line price, the badge on the bag and the subtotal all roll with it, so your eye follows the change straight to the total.
Only the digits that actually change move, which keeps it calm when the subtotal goes from £21.00 to £26.40. Underneath, the number is a real input you can type into, the buttons have clear labels for screen readers, and the free delivery bar fills as you go and turns green once you cross the line.
Why the prompt works
- It makes direction matter, up from below when rising and down from above when falling.
- It rolls only changed digits with a small stagger from the right.
- It keeps a real input, so typing 9 is quicker than tapping nine times.
- It links every number, from line price to badge to subtotal.
Where to use it
Baskets, ticket and seat pickers, guest counters and any order form where people change quantities and watch a total.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
