Elastic spring mesh
A net of springs that dents and ripples as the pointer passes, then settles back, changing color where it stretches, on canvas.
Settings
Code
<div class="pt-uvq16-elastic-mesh"><canvas></canvas></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
See all BackgroundsWhere to use it
A physics toy as a background. Every node of the grid is tied to its rest position and to its four neighbours by springs, so a push travels outwards as a ripple before the mesh calms down. The pointer presses into the net and drags it a little with its speed, and when nobody is around small random pokes keep it alive.
The first color is the relaxed mesh, the second the stretched lines and the third the glowing nodes under the most tension. Density sets the cell size and speed the number of physics steps per frame. Good for developer tools, science content and playful landing pages.