The dinosaur-bitten logo
Intro, SVG, Text
NewFree
Back to the library
The logo that finds the bubble
A minimal-style logo intro borrowed from a spirit level: a thin beam draws itself tilted across the page, with the vial underneath and its vermilion bubble pushed to the high end. The letters of the name drop onto the beam one by one, narrow and light, and slide down until they bump into each other at the bottom. Then the beam rocks: the letters slide back up and spread out, the beam settles on a spring until the bubble sits between the two marks, and the name, finally level, gains weight and width; the reading underneath says 0.0°.
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>The logo that finds the bubble</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>
<main class="scena" data-stage>
<p class="marca">Trueline <span>Surveying instruments</span></p>
<h1 class="sr" data-label>Trueline</h1>
<!-- the spirit level: a thin beam with the name standing on it and the vial with its bubble underneath; the whole
group tilts until the bubble sits between the two marks -->
<div class="banco" data-bench aria-hidden="true">
<div class="livella" data-level>
<div class="parola" data-word></div>
<span class="trave" data-beam>
<span class="trave__tacca trave__tacca--a" data-end></span>
<span class="trave__tacca trave__tacca--b" data-end></span>
</span>
<span class="fiala" data-vial>
<span class="fiala__segno fiala__segno--a" data-mark></span>
<span class="fiala__segno fiala__segno--b" data-mark></span>
<span class="bolla" data-bubble><span class="bolla__luce"></span></span>
</span>
</div>
<p class="lettura" data-readout><span data-readout-label>Tilt</span> <span class="lettura__valore" data-readout-value>0.0°</span></p>
</div>
<p class="motto" data-tagline>Every line, true.</p>
<button class="pillola" type="button" data-replay>
<span class="pillola__scritta" data-testo="Replay">Replay</span>
</button>
</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.
25 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 logo that finds the bubble” from Animorio and fit it into my siteWhat it does
A warm white page. A thin beam draws itself from the middle, already tilted by seven degrees, with a tick at each end; underneath appears the glass vial of the level, with two marks in the middle and the vermilion bubble squeezed towards the high end, and under that the tilt reading. The letters of Trueline drop onto the beam one after another, narrow and light: as they land they squash for a moment, lean with the slope, then slide down faster and faster and stop against the letter before with a small knock, a pixel back and down again. Once they are all piled at the bottom, the beam rocks the other way: the letters slide back up, the rightmost leaving first, and spread out to their places gaining weight and width; the beam settles on a spring, the bubble follows a little late, stretching as it runs, and stops between the two marks. In that moment the name is level: each letter gives a small nod, from the middle outwards, the beam hums, the marks of the vial blink vermilion and the reading turns from Tilt to Level 0.0° in vermilion. The motto and the Replay button arrive. Afterwards the pointer (or a dragging finger) tips the beam slightly and the letters slide a little downhill; let go and it springs back level. After a pause the intro starts again by itself.
How it works
One angle for the whole level
The beam, the word and the vial sit in a group that rotates around its centre: GSAP animates a single number, the angle, and every frame writes it on the group. The bubble goes the opposite way of the tilt, a little late, computed every frame, and stretches slightly as it runs.
The letters measured twice
Every letter is measured narrow and light (wdth 70, wght 260) and wide and heavy (wdth 100, wght 760). The first measures give the pile at the low end of the beam, the second the final, centred places. The letters drop onto their places, then slide to the pile with power2.in, which speeds up like on a slope, and bounce back a pixel.
Movement and weight together
When the beam rocks, a second number, s, goes from 0 to 1: each letter sits between the pile and its place in proportion to s, with a slightly different delay for each, and gains weight and width in the same proportion, so they never bump as they widen. The angle returns to zero with elastic.out: the beam settles and the bubble stops between the marks.
Level, and then to touch
The letters nod from the middle outwards, the marks of the vial blink and the reading becomes Level 0.0°. Afterwards the horizontal position of the pointer tips the beam a few degrees with quickTo and the letters slide downhill; on release everything springs back to zero. With reduced motion the logo appears already level, with a fade.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
WORD | script.js | 'Trueline' | The name: short, six to nine letters. |
TILT | script.js | 7 | How many degrees the beam is tilted at the start. |
DROP_GAP | script.js | 0.08 | Seconds between one letter landing and the next. |
SETTLE | script.js | 1.7 | How many seconds the beam takes to settle on its spring. |
LIGHT | script.js | 260 | The weight of the letters while they slide. |
HEAVY | script.js | 760 | The weight of the letters once level. |
NARROW | script.js | 70 | The width (wdth axis) while they slide. |
WIDE | script.js | 100 | The width once level. |
NUDGE | script.js | 2.5 | How many degrees the pointer can tip the beam at the end. |
HOLD | script.js | 3 | How many seconds the finished logo stays before the intro plays again. |
SPEED | script.js | 1 | 2 is twice as fast, 0.5 half as fast. |
When to use it
For the opening of a site for a maker of measuring tools, a surveyor, an architecture studio or a builder, the loader of a one-word wordmark, the launch of a product that should feel precise.
On phones
The same animation: the name and the beam are smaller, and at the end the beam tips when you drag a finger sideways.
With reduced motion
Nothing drops or slides: the logo appears already level, with the beam, the vial and the reading at 0.0°, in a fade; then the motto and the Replay button.
Pitfalls
- The letters change width as they move: if position and weight went their own ways they would overlap. Both depend on the same number, and the pile is measured with the narrow letters.
- GSAP animates numbers on plain objects and a single draw pass every frame writes the transforms and the axes: that way the letter’s transform and its child’s (the squash) never wipe each other out.
- The Replay button and the automatic loop only start once the entrance is over, and the loop waits while the beam is being dragged.
Libraries
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 6.9 KB; the libraries: GSAP 28 KB.
Testing
Tested on 23 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.
