Falling tools
Physics, Hover
NewFree
Back to the library
The elastic net
A minimal-style physics animation: a net of very thin threads stretched in a frame, with a word printed on it. The pointer presses it like a finger on a trampoline, the mesh sinks and the word bends with it, getting heavier where the net pulls hardest; let go, it swings and settles. A click strikes it and a wave runs out to the frame.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Spanne</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a taut net of hairlines in a frame, with one word printed on it: the pointer presses the net like a finger
on a trampoline, and the word bends with the mesh -->
<main class="stage" data-stage>
<canvas class="net" data-net aria-hidden="true"></canvas>
<h1 class="sr" data-word>bounce</h1>
<p class="brand">Spanne</p>
<p class="hint" data-hint>Press the net. Click to strike it.</p>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
19 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The elastic net” from Animorio and fit it into my siteWhat it does
A warm white page, with a thin frame and four small pegs at the corners. Inside, a net of very thin grey threads, and printed on the net the word ‘bounce’ in light Archivo. At the opening the net is slack, sagging in the middle: the frame pulls it and it rises, goes a hair past flat and settles, while the threads draw themselves from the middle to the edges. With the pointer over it the net sinks as if under a finger: the threads slide towards the pressed point and bend, the word curves with the mesh, and the letters near the finger gain weight. The threads pulled hardest turn vermilion, in three steps. Move the pointer and the dent follows it; take it away and the net comes back up, swings about one and a half times and stops, and the letters go light again. A click, a tap or Enter strike it: a wave runs from the hand to the frame and comes back weaker. When nobody moves the pointer, an invisible hand passes over the net, presses it, lets go, strikes it once and lets it settle.
How it works
A membrane of points
The net is a grid of points, each with a depth. At a fixed step (a two hundred and fortieth of a second, several steps per frame) every point moves by Verlet integration: the new depth is the current one plus the difference from the previous one, slowed by DAMPING, plus the sum of the differences with its four neighbours times STIFFNESS. It is the wave equation on a cloth: the points of the frame stay at zero, so the waves bounce off them.
The finger
The pointer is a rounded tip: inside PUSH_RADIUS no point can sit higher than the shape of the tip (a bell, minus PUSH_DEPTH times the square of one minus the squared distance). The net is pushed down but keeps its speed, so when the finger lifts it bounces back on its own. A click instead changes the previous depth of a patch of net: it is a kick of speed, and a wave starts.
From depth to drawing
Seen from above, depth does not show: what shows is the threads sliding towards the dent. Each point is drawn shifted against the slope under it (the difference between the neighbours left and right, above and below), times SLIDE. The same slope is the tension: past a threshold the pieces of thread take the vermilion in three steps of transparency.
The bent word
Each letter has its own fixed centre, measured on the fullest weight, and on every frame the word is repainted on a hidden canvas with each letter at its weight. Then every cell of the net that holds ink is split into two triangles, and each triangle copies its piece of the word with the exact affine map that takes the three flat corners onto the three bent ones, clipped a pixel wider so no joins show.
Weight and the invisible hand
The weight of each letter follows, on a spring with a hair of bounce, the highest tension of the points under it, from LIGHT to HEAVY. When the real pointer has been gone for 2.4 seconds, a repeating GSAP timeline takes an invisible hand on a walk that comes back the same: it presses, lifts, strikes once and lets the net settle.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
WORD | script.js | 'bounce' | The word printed on the net (up to 12 letters). |
COLS | script.js | 36 | How many threads across (fewer on a phone). |
ROWS | script.js | 22 | How many threads down. |
STIFFNESS | script.js | 2400 | How taut the net is: 800 a hammock, 6000 a drum. |
DAMPING | script.js | 2.6 | How quickly a swing dies out: 0.8 rings for long, 8 stops at once. |
PUSH_RADIUS | script.js | 5 | How wide the finger is, in threads. |
PUSH_DEPTH | script.js | 70 | How deep the finger presses, in px. |
SLIDE | script.js | 0.8 | How much the threads slide towards the dent (0: depth only shows in the colour). |
STRIKE | script.js | 1 | How hard a click strikes the net. |
LIGHT | script.js | 300 | The weight of the word on a slack net (100 to 900). |
HEAVY | script.js | 820 | The weight where the net pulls hardest (100 to 900). |
When to use it
For a heading you can touch: the opening of a design studio or an agency, the name of a product on a landing page, a 404 page to play with, a section of a sports site or a theme park. It works with any short word.
On phones
The same net, narrower and taller, with fewer threads across: the finger presses it while it rests on the screen, and lifting it the net bounces back. A tap also strikes it. The hint says Tap instead of Click.
With reduced motion
Nothing moves: the net fades in flat, with the word light, and stays still; the pointer and the click do not bend it.
Pitfalls
- With the weight made by laying two images over each other, a light one and a full one, the full letters were wider and a second grey word showed, shifted: now every letter has a fixed centre and the word is repainted every frame with each letter at its weight.
- With one affine map per cell (taken from three corners) the fourth corner did not match, and steps appeared on the letters where the net was pulled hard: every cell is now split into two triangles, each with its exact map.
- With the accent lit at low tension, the opening wave turned half the net red: the thresholds now start at a high tension, so the vermilion stays on the tautest threads.
Libraries
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 7.9 KB; the libraries: GSAP 28 KB.
Testing
Tested on 21 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
