ISby Informeek Studio·Made with Claude·11 November 2026
LiveMove the cursor around and click anywhere for a ripple
The prompt
Claude · Claude Opus 5.5
Build an interactive dot grid background on a warm off-white page (#fafaf7). Draw it on a full-screen canvas: small grey (#cfcfc8) dots every 26px (22px on phones). Dots within 150px of the pointer are pushed away from it, grow up to 3x larger and turn coral red (#ff4d2e), with the push easing smoothly so the grid feels elastic. Clicking or tapping sends a ring-shaped ripple across the whole grid that briefly enlarges and colours the dots it passes. When nobody has moved the pointer for 2.5 seconds, an invisible point drifts around the screen on its own so the background is never static, which also covers touch screens. Over it, centred, a coral uppercase label "Design systems, measured", an extra bold headline "Every pixel on the grid" and a grey subline, with a soft off-white glow behind the text so it stays readable. Scale the canvas for retina screens and draw a still grid 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 changing the dot colour and spacing to match your own grid.
About this interactive dot grid background
A dot grid background says “precise” before anyone reads the headline, which is why design tools and agencies love it. This one reacts. Dots near the cursor slide away, grow and turn coral, then ease back into line as it moves on, so the grid feels elastic rather than rigid. Click anywhere and a ripple rolls across the whole page.
When nobody is moving the pointer, an invisible point wanders around on its own after a couple of seconds. That keeps the page alive while people read, and it is also what phone visitors see, since a touch screen has no cursor to follow. A soft glow behind the headline keeps the text clean over the dots.
Why the prompt works
It gives spacing, radius and colours, the three numbers that define the look.
It separates two interactions, pointer push and click ripple.
It plans for idle and touch with the wandering point.
It protects the headline with a glow behind it.
Where to use it
Design systems, developer tools, agency homepages and product sites with a clean, technical feel.
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.