Create a paint colour picker for a fictional paint maker, Oldfield Paint Co. The whole page is the wall, painted in the chosen colour with a soft window light, a 14px off-white skirting board and a 72px oak floor. Left: a small label, the serif heading "Hold it up to the wall first", a swatch with the colour name and number, "£38 for 2.5 litres", and two buttons, "Order a tester pot, £4" and "Fold the fan". Right: a paint fan deck of seven 96 by 340px paper strips (#fbf8f2) pinned by a brass rivet near the bottom, each with three chips (a 42% tint, the colour, a 24% shade), the name running vertically and the number in a white foot. Colours: Chalk Hill #e7dfcc, Quince Jam #e2a238, Clay Pot #b8643e, Rhubarb Stalk #c3556a, Sea Fret #93abb0, Moss Bank #6c7c47, Inkcap #2e3443. On load the closed deck springs open to 13.5 degrees apart with a 70ms stagger, with a spring (stiffness 0.085, damping 0.8) on rotate and translateY so each strip overshoots. Hovering lifts a strip 38px and pushes its neighbours 8 degrees aside, halving with distance. Clicking paints the wall over 700ms, with light text on dark colours. On phones the strips shrink to 60 by 218px and you slide a finger along the fan, lifting to choose. Arrow keys move, Enter paints. Reduced motion skips the springs.
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 loading your own colour names and numbers into the strips.
About this bounce animation in CSS
Most bounce animation css examples are a ball hopping on a loop. This one puts the bounce where it earns its keep: a paint fan deck that springs open when the page loads, strip by strip, each one swinging a little past its place and settling back. Hover a colour and it lifts out of the deck while the strips either side spring away to give it room.
The motion is plain CSS transforms, a rotation around the brass rivet and a lift along the strip, driven by a tiny spring so every move has a natural overshoot. Picking a colour repaints the whole page, which is the point of a paint chart: you see the colour as a wall, not a chip. Dark colours flip the text to light automatically.
Why the prompt works
- It gives the spring numbers, stiffness and damping, which is what makes the bounce feel physical.
- It sets the pivot, a rivet near the bottom, so the fan opens like a real deck.
- It lists every colour with a name and hex code.
- It gives phones a gesture, sliding along the fan and lifting to choose.
Where to use it
Paint, fabric and finish pickers, flooring samples and any shop where people choose between close colours. For a pure CSS version, a cubic bezier with a value above one gives a similar overshoot.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
