Create a moving tile background for an encaustic cement tile maker on a 2D canvas. Generate eight tile patterns once as sprites, quatrefoil, eight point star, quarter circles, lozenge, rosette, nested frames, fan and compass, in cream #efe6d4, terracotta #c4623f, indigo #2e3f6e, sage #8fa58a, ochre #d9a441 and charcoal #2b2a28, with a cement speckle. Lay them in rows of 118px tiles (100px on tablets, 78px on phones) with 4px grout (#d9cfbd), the whole floor rotated minus 10 degrees around a point at 66% across. Pick each design from its row and column. Each row slides sideways towards a target set by the pointer's x position, odd rows the opposite way, each row with its own lag and amplitude over a slow drift. After 2.5s idle the target sways on its own. Clicking a tile inverts the rotation to find it, lifts it 12% with a soft shadow and a cream outline, and shows "Picked No. 05, Saffron Rosette" with a thumbnail in a live output beside the button. On desktop a charcoal panel (#1f1d1a) fills the left 46% with a terracotta label "Madder and Lime cement tiles", a 68px serif headline "Floors that were poured, not printed", one line and a square "Order a sample box" button. Below 900px the panel sits on top and tiles fill the rest. Draw still rows 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 drawing your own eight patterns and changing the tilt.
About this tile background
A tile background is usually a flat repeating pattern. Here it is a floor of encaustic cement tiles, tilted slightly and laid in rows that slide against each other as you move the cursor from side to side, odd rows one way and even rows the other, each with a little more or less lag. The result feels like a kinetic installation in a showroom, and it shows off a whole range of patterns at once without a single photograph.
Every tile is drawn in code: a quatrefoil, a star, quarter circles, a lozenge, a rosette, nested frames, a fan and a compass, in six pigment colours with a faint cement speckle. Click any tile and it lifts out of the floor with a soft shadow, while the panel tells you its pattern number and name, which turns the background into a simple product picker.
Why the prompt works
- It draws the patterns once as sprites, so hundreds of tiles cost almost nothing.
- It gives each row its own lag, which makes the shear feel alive.
- It explains the click maths, undoing the rotation to find a tile.
- It keeps the copy on a solid panel.
Where to use it
Tile and flooring shops, interior designers, ceramicists, textile printers and pattern libraries.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
