Create a grid distortion background for a jigsaw puzzle maker, using WebGL over a picture painted once on a 2D canvas. Paint an alpine lake at dusk, a sky from #22245a through #e0767a to #f9b267, a sun, three jagged ranges, a shimmering lake, a rowing boat, pines and a lit cabin, and upload it as a texture. Cut the screen into jigsaw pieces about 84px across (70px on tablets, 58px on phones). In the fragment shader, give each edge a hashed knob of radius 0.17 cells pointing one way or the other, decide which piece owns each pixel, read that piece's offset from a small grid sized data texture with nearest filtering and sample the picture shifted by it. Draw faint outlines everywhere and dark seams round moved pieces. In JavaScript, give every piece a spring with stiffness 70 and damping 7.5; pointer movement adds velocity to pieces within about two cells, so dragging shoves pieces that wobble and click home, and a tap pops them upward. After 2.5s idle a ghost hand drags across every 4.2s. Copy on a cream box lid card (#fbf3e4) with an inner rule at bottom left, a label "Larkfold Puzzles" and "No. 41, Lake at dusk", a 50px serif headline "A thousand pieces of somewhere quiet", one line and two pills. Show the still picture without WebGL or 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 painting your own scene and changing the piece size.
About this grid distortion
Grid distortion effects split an image into cells and push each cell around with the cursor. This one gives the cells a reason to exist by making them jigsaw pieces. The picture is an illustrated alpine lake at dusk, painted in code, with faint piece outlines across the whole thing like a finished puzzle on the table. Drag across it and the pieces you touch slide with your hand, their picture shifting inside them, then wobble and click back into place. Tap and they pop up for a moment.
The knobs are worked out in the shader. Every edge between two cells gets a round tab that belongs to one side or the other, chosen by a hash, so each pixel can tell which piece it belongs to and borrow that piece’s offset. The offsets live in a tiny texture with one pixel per piece, and the springs that pull them home run in plain JavaScript, so the whole effect costs one draw call.
Why the prompt works
- It explains piece ownership, the step that turns squares into jigsaw shapes.
- It stores offsets in a data texture, cheap and fast.
- It uses springs with overshoot, so pieces click home.
- It keeps the copy on a solid card.
Where to use it
Puzzle and game makers, illustrators, print shops, travel posters and galleries.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
