The wrecking-ball logo
Intro, Physics, SVG, Text
NewFree
Back to the library
Words in bubbles
In the minimal style: words inside bubbles drawn with a single line, rising slowly towards a thin rule. They knock into each other with real soft-body physics and share a flat wall where they press; when two words that belong together touch, their bubbles merge into a bigger one with the two words side by side, taking on weight. Under the rule the bubbles gather, push it up and pop in a small ring; a click pops one, a click on the empty page blows a new one.
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>Words in bubbles</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>
<!-- words in hairline bubbles rising to a surface: two words that belong together merge when they touch -->
<main class="stage" data-stage>
<svg class="field" data-field aria-hidden="true">
<path class="surface" data-surface d="" />
<g data-bubbles></g>
<g data-rings></g>
</svg>
<div class="words" data-words aria-hidden="true"></div>
<p class="hint" data-hint>Click a bubble to pop it, or the empty page to blow a new one.</p>
<p class="said" data-said aria-live="polite"></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 “Words in bubbles” from Animorio and fit it into my siteWhat it does
A warm white page, a thin grey rule that draws itself from the middle outwards near the top edge, and from the bottom of the page bubbles rising slowly in a wide column in the middle, with plenty of empty paper on either side. Every bubble is a one-pixel ink circle holding a light word (wght 320) and a small grey arc at its top left, where it would catch the light; its size depends on the word, and bigger bubbles rise a little faster. The words are six pairs that belong together: moon and light, sea and salt, slow and motion, still and life, free and fall, paper and plane. The bubbles are soft bodies: when two press together they flatten into a straight shared wall where they touch, like real foam, and after a knock they wobble slightly from ovals back to circles. Two words of the same pair seek each other: they drift together and, as they come close, they already take a little weight and narrow a little. When their bubbles touch they merge: the neck between the two circles fills in as between two drops, the new bubble rounds off with a couple of swings along the line of the two old ones, its line turns blue and the two words slide side by side (moon light), take on weight (wght 600) and close up (wdth 86). At the top the bubbles push the rule up, which bends around them, and the bubbles flatten slightly against it; under the rule they draw together into a small raft. After a moment each one pops: its line opens into a ring that widens and fades, the letters spread, lose weight and vanish, the bubbles nearby get a push and wobble, and the rule drops back with a few waves. When the last bubble has popped the round starts again, the same. A click on a bubble pops it at once; a click on the empty page blows a new bubble there, which inflates on a spring (preferably the word missing from a bubble left alone). With the mouse over it, a bubble swells by a couple of pixels, its line gets thicker and the word takes on weight.
How it works
Bubbles made of points
Every bubble is a closed SVG path, redrawn every frame from 72 points around its centre: at each angle the radius is the circle's, plus an oval-shaped wobble, minus what its neighbours and the rule take away. The points are joined with a smooth curve (Catmull-Rom written as Bézier curves), so even where the bubble flattens there are no sharp corners. The word is an HTML element centred on the bubble's point, with its weight and width written in font-variation-settings.
Soft-body physics
The physics is our own, in fixed steps of 1/120 of a second inside gsap.ticker. Every bubble has an upward push that brings it to its speed (bigger, faster), a sideways sway and a little drag. Two bubbles that overlap push apart like two damped springs, in proportion to how far they press into each other: that is why they can press together by a few pixels. In the drawing, where two circles overlap the radius stops on the plane where the two circles cross (the radical plane): both bubbles get the same straight wall, as in foam. A knock starts an oval wobble, a damped spring along the direction of the knock.
Words that merge
Two words of the same pair attract each other with a small constant force and, as they come closer, take on a little weight. When they touch a single bubble is born at their centre of mass, with the area of the two together (or more, if the two words side by side do not fit). For a moment its outline is the soft union of the two old circles (a soft maximum, which makes a neck as between two drops) and a GSAP tween takes it to the new circle; then a kick to the wobble makes it swing along the line of the two bubbles. The words slide into place and take their weight and width with elastic.out; if they have to swap sides, one passes over the other.
The rule that bends
The rule at the top is a string: a damped wave equation over a hundred or so points. A bubble that touches it pushes it up by three quarters of how far it presses in, and the rest is the bubble flattening against it. After a moment of pressure the bubble pops, the string is free and drops back with a few waves. Under the rule the bubbles attract each other a little, like cereal floating in milk, and make a small raft.
The pop and the round
As it pops, the bubble's line becomes an SVG circle that widens by almost half, thins and fades; the letters spread, lose weight and vanish, and the bubbles nearby get a push and a wobble. The bubbles arrive on a fixed schedule with a random number that always restarts from the same seed, and the round starts again only when the page is empty and the rule is still: so every round is identical to the first. With reduced motion the physics runs all at once out of sight, half the pairs appear already merged and the bubbles stay still; a click fades them out.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
PAIRS | script.js | ['moon light', 'sea salt', 'slow motion', 'still life', 'free fall', 'paper plane'] | The pairs of words that belong together, two words per entry (up to 8 pairs, 12 letters a word). Every round sends them all up. |
RISE | script.js | 56 | How fast the bubbles rise, in pixels a second. |
SWAY | script.js | 12 | How much they sway sideways as they rise, in pixels a second. |
PULL | script.js | 1 | How strongly two words that belong together seek each other: at 0 they merge only if they meet by chance. |
SOFTNESS | script.js | 1 | How much the bubbles flatten when they press together: 0.4 is stiff, 2 is soft. |
LIGHT | script.js | 320 | The weight of the type of a word on its own, from 100 to 900. |
HEAVY | script.js | 600 | The weight two words take when they merge. |
LINE | script.js | 1 | The thickness of the bubbles' line, in pixels. |
When to use it
To say that things belong together: the pairings of a restaurant or a wine bar, the services of a studio that complete each other, the keywords of a portfolio, an event page with its themes. It also works on its own as a calm, playful opening, or as a waiting page you can touch.
On phones
The same physics with the sizes adapted: words and bubbles a little smaller relative to the page and the column wider, nearly the full width. A tap on a bubble pops it, a tap on the empty page blows a new one.
With reduced motion
Nothing rises and nothing sways: the physics runs all at once out of sight, half the pairs appear already merged in blue and the bubbles stay still in the middle, fading in. A click on a bubble fades it out, with no widening ring; when they are all gone, the group fades back in.
Pitfalls
- With the union of the two circles made with a true maximum, the outline of the merging bubble had two corners in the neck and a spike where a ray grazed the small circle: with a soft maximum and a little added under the root, the neck is round as between two drops.
- Going from the two circles to the new one with elastic.out overshot and turned the neck inside out, with two corners: now the change is power3.out with no overshoot, and the swing comes from the oval spring, kicked along the line of the two bubbles.
- With the words sliding into place on elastic.out, the two words overshot towards the middle and touched (moonlight): the positions arrive with power3.out, the weight and width on the spring.
- Spread across the full width, the bubbles rose in a row without ever touching and the deformation never showed: they rise in a column in the middle, at slightly different speeds, and under the rule they draw together into a raft.
- The card's video stops when the round starts again the same: the sideways sway used the time since opening and the second round came out different from the first. Now every round resets its clock, the seed of the random numbers and the leftover of the physics steps.
- The ring's circle started with no radius and the console logged an error on the r attribute: the radius is written before the tween.
Libraries
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 12 KB; the libraries: GSAP 28 KB.
Testing
Tested on 16 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.
