Kinetic Grid
Spring-connected grid mesh with traveling force impulses, tension-colored connections in cyan and magenta.
What is Kinetic Grid?
Kinetic Grid is a spring-mass simulation on a 40 x 25 lattice — 1,000 nodes linked to their neighbours by springs, held in flat Float32Arrays so the whole network steps without allocating. Periodic impulses kick a random node, and the disturbance travels outward as a wave while damping (0.978) and a weak restoring force (0.003) pull the mesh back to rest. Connections are coloured by tension: slack springs read cool, stretched springs shift warm, so you can watch the force move through the grid. Impulse rate, spring tension and impulse strength are all live parameters. Because it is Canvas 2D the cost is per node rather than per pixel, so it stays comfortable as a full-screen background; it also honours prefers-reduced-motion. Well suited to developer tools and product pages that want an engineered, technical feel.
Kinetic Grid is a free Canvas 2D web effect in the TappyPrism library. Spring-connected grid mesh with traveling force impulses, tension-colored connections in cyan and magenta. It is drawn with the Canvas 2D API, which trades some GPU efficiency for the widest possible browser and device support. It ships as a single self-contained HTML file (kinetic-grid.html) with zero dependencies — no npm package, no framework, no build step. It exposes 5 live parameters — Impulse Rate, Spring Tension, Impulse Force, Damping, Return Force — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Impulse Rate | IMPULSE_RATE | 0.3 – 3 | 0.7 |
| Spring Tension | SPRING_TENSION | 0.2 – 3 | 1 |
| Impulse Force | IMPULSE_STRENGTH | 0.3 – 3 | 1 |
| Damping | DAMPING | 0.95 – 0.995 | 0.978 |
| Return Force | RETURN_FORCE | 0.001 – 0.01 | 0.003 |
How to add Kinetic Grid to your page
- Download the standalone file kinetic-grid.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/kinetic-grid.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Kinetic Grid"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'IMPULSE_RATE', value: 0.7 }, '*');
Frequently asked questions
What is Kinetic Grid?
Kinetic Grid is a spring-mass simulation on a 40 x 25 lattice — 1,000 nodes linked to their neighbours by springs, held in flat Float32Arrays so the whole network steps without allocating. Periodic impulses kick a random node, and the disturbance travels outward as a wave while damping (0.978) and a weak restoring force (0.003) pull the mesh back to rest. Connections are coloured by tension: slack springs read cool, stretched springs shift warm, so you can watch the force move through the grid. Impulse rate, spring tension and impulse strength are all live parameters. Because it is Canvas 2D the cost is per node rather than per pixel, so it stays comfortable as a full-screen background; it also honours prefers-reduced-motion. Well suited to developer tools and product pages that want an engineered, technical feel. Kinetic Grid is a free Canvas 2D web effect in the TappyPrism library. Spring-connected grid mesh with traveling force impulses, tension-colored connections in cyan and magenta. It is drawn with the Canvas 2D API, which trades some GPU efficiency for the widest possible browser and device support. It ships as a single self-contained HTML file (kinetic-grid.html) with zero dependencies — no npm package, no framework, no build step. It exposes 5 live parameters — Impulse Rate, Spring Tension, Impulse Force, Damping, Return Force — adjustable in the browser or at runtime.
How do I add Kinetic Grid to my website?
Download the standalone file at https://prism.tappypotato.com/fx/kinetic-grid.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/kinetic-grid.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Kinetic Grid"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'IMPULSE_RATE', value: 0.7 }, '*').