Make three pricing cards for a fictional pixel art editor called Bitloom on a near-black page (#0e0f13). Small uppercase label "Bitloom pixel editor" and the heading "Pick the canvas that fits". Cards are #15171d with a 1px #262a33 border and 20px radius, each with an 8 by 8 pixel art icon drawn in SVG rects, a plan name, a one line description, a big price, three features with square bullets and a full-width button. Plans: Doodle, Free, mint (#3ee8b5); Sprite, £6 a month, coral (#ff8a5c) with a "Most picked" badge; Studio, £14 a seat, violet (#9d8cff). Behind each card's content is a canvas grid of square pixels every 9px, in three shades of the card colour. On hover the pixels bloom outward from the point where the pointer entered: each pixel waits 0.7ms per pixel of distance plus up to 140ms at random, grows over 260ms with a small overshoot, then shimmers between 45% and 100% of its 4px size. Pixels are brightest at the top and fade to 8% behind the features. On leave they shrink away from the exit point. The border takes the card colour, the card lifts 4px and the button fills. Keyboard focus blooms from the centre. On phones the cards become a sideways scroll-snap row and the card in the middle blooms by itself. Reduced motion shows a still pixel field.
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 renaming the plans and picking a palette for each one.
About this pixel hover effect
This pixel hover effect fills a card with light the way an old screen warms up. When the pointer enters, a grid of tiny squares pops into life starting from that exact spot and ripples out to the corners, each pixel landing with a small bounce before it settles into a slow shimmer. Leave the card and the field drains away from where you left.
The pixels are drawn on one canvas per card, in three shades of that plan’s colour, so Doodle glows mint, Sprite glows coral and Studio glows violet. They fade towards the bottom of the card, which keeps the features and button easy to read, and the animation loop stops completely once every card is dark again.
Why the prompt works
It gives the bloom timing as a formula, delay by distance plus a random spread, which is what makes it ripple.
It sets pixel size, spacing and shimmer range in pixels and percentages.
It fades the pixels behind the text, so the effect never fights the copy.
It gives phones their own behaviour, a swipeable row where the centred plan blooms.
Where to use it
Pricing pages, feature grids and game or creative tool sites. It suits brands with a playful, retro edge; for a sober product, use one colour and a slower shimmer.
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.
