Create a product card for a fictional ceramic table lamp, the "Oriel table lamp" by Wrenfold Ceramics, on a warm stone page (#e9e2d6). The card is #faf7f2, 26px radius: a square product shot up to 400px on the left, details on the right. Draw the shot in SVG: a tinted wall with a framed print, a wooden table edge (#b98c64), a warm pool of light, a speckled stoneware base with a glaze gradient, a pleated linen shade, books and a sprig. Make one version per glaze, each with its own wall tint: Clay #c9714f, Sage #8fa58a, Ink #33456b, Saffron #dca23a. Details: the serif title, "£148 free delivery", two lines of copy, a "Glaze, Sage" legend, four 32px swatches as real radio inputs in 46px labels and a dark "Add to basket" button that becomes "Added, Sage glaze". Hovering or choosing a swatch plays a pixelate effect on canvas: over 720ms the block size eases up through 1, 2, 3, 4, 6, 8, 11, 15, 20, 26 and 34px and back down, drawn by shrinking the image onto a tiny canvas and scaling it up with smoothing off, crossfading to the new glaze at the blockiest moment. Until someone interacts, it cycles glazes every 3.2s. On phones the shot sits on top, up to 230px tall. Reduced motion swaps instantly.
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 the lamp for your own product and its colour options.
About this pixelate effect
This pixelate effect turns a colour change into a small moment. Hover a swatch and the lamp breaks up into bigger and bigger blocks, switches glaze while it is at its coarsest, then sharpens back into a crisp picture in the new colour. It takes under three quarters of a second, which is quick enough for shopping and slow enough to notice.
The trick is cheap. The picture is drawn onto a tiny canvas and stretched back up with smoothing turned off, so every frame is two image copies whatever the size. The block sizes follow a fixed ladder rather than a smooth curve, which gives it the stepped, chunky look people expect from pixel art. The wall behind the lamp changes tint with the glaze too, so each colour gets its own mood.
Why the prompt works
- It lists the exact block ladder and the duration, so the steps look deliberate.
- It names the canvas technique, shrink then enlarge with smoothing off.
- It describes the product shot in detail, lighting, props and all four glazes as hex codes.
- It keeps the swatches as real radio inputs, so keyboards and screen readers work.
Where to use it
Colour and material pickers in shops, theme switchers and game skin selectors. It suits products with strong colours; for subtle shades, use a shorter ladder so the change is easier to follow.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
