The dinosaur-bitten logo
Intro, SVG, Text
NewFree
Back to the library
The weight specimen logo
A minimal-style logo intro: the name arrives written nine times, from weight 100 to 900, like a type specimen; a thin vermilion line steps down and picks a weight, the other rows close onto it like a fan and the chosen row grows into the logo. In the Playground you type your own name and choose the weight.
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 weight specimen logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" role="img" aria-label="ostra" data-stage>
<!-- the specimen: one row of the name for every weight, built by the script -->
<div class="rows" data-rows aria-hidden="true"></div>
<!-- the thin selector that picks the weight and stays under the logo -->
<span class="sel" data-sel aria-hidden="true"></span>
</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.
11 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 weight specimen logo” from Animorio and fit it into my siteWhat it does
On a black background nine rows with the brand name, “ostra”, arrive from top to bottom one after another: the first very thin, weight 100, the last very black, weight 900, like a page of a type specimen; to the left of every row sits its weight in small grey numbers. A thin vermilion line appears under the first row and steps down, one row at a time, to the chosen weight, 700: it passes it by a hair and springs back, and the number 700 lights up in vermilion. Then the other rows close onto the chosen one, the nearest first and the furthest last, speeding up: as they travel they take on its weight, squash and fade, like a fan closing; the numbers leave and the line narrows until it sits under the name. The chosen row feels the knock, squashes and comes back, then grows to the middle of the screen and becomes the logo, a touch too big and then right, and widens a little on the width axis. The logo stays still with its line underneath for a few seconds; then it narrows and fades, the line draws back and the specimen starts again.
How it works
One typeface with every weight
Roboto Flex is variable in weight (100 to 1000), width and optical size: the nine rows are the same text with different font-variation-settings. The row size is chosen so that nine fit in two thirds of the height and the widest, at 900, fits the width with its numbers alongside; the logo size so that the widened name fits 56% of the width (80% on a phone).
Numbers, not pixels
The GSAP timeline moves, for every row, its entrance and its closing (from 0 to 1), for the line the row it sits on (even halfway) and how far it has become the logo’s line, for the logo its growth. A function on the ticker turns them into positions, weights and sizes, reading the current measurements: if the window changes size halfway, everything stays in place.
The stepping line
The line’s descent is a series of short tweens (70 milliseconds, power2.out), one per row, with a 15 millisecond stop between them: it feels like a clicking selector. On the chosen weight it goes eight hundredths of a row too far and springs back with an elastic.out.
The closing fan
Every row closes with a power3.in, starting later the further it is from the chosen one (60 milliseconds per row): as it travels its weight moves towards the chosen one, its height scale drops to 15% and its opacity follows the cube of the distance covered, so rows only fade as they arrive.
The growth
The chosen row grows with an expo.inOut to 1.2% too big and settles with an elastic.out; meanwhile the optical size goes from 48 to 144, the spacing tightens and the width axis rises by WIDEN points with a power3.out that starts halfway through the growth.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
NAME | script.js | 'ostra' | The brand name (up to 12 letters). |
WEIGHT | script.js | 700 | The weight chosen for the logo, from 100 to 900: the line stops on the nearest row. |
LABELS | script.js | true | The weight numbers beside the specimen rows. |
WIDEN | script.js | 14 | How much the logo widens at the end, on the width axis (0 = it stays as it is). |
SPEED | script.js | 1 | 2 = twice as fast, 0.5 = half as fast. |
REST | script.js | 3 | Seconds the logo stays still. |
LOOP | script.js | true | The logo narrows, disappears and the intro starts again. |
When to use it
To present a wordmark with a typographer’s gesture: the opening of a type foundry’s, a graphic design or a branding studio’s site, a portfolio, the loading screen of a design app, presenting an identity to a client.
On phones
The same animation with the sizes adapted: the nine rows fit in two thirds of the height, the numbers stay readable beside them and the final logo fills 80% of the width.
With reduced motion
Nothing moves: the logo fades in already at its weight, with the line underneath.
Pitfalls
- The chosen weight’s number stayed visible while the row grew and ended up over the vermilion line: it now fades as the line moves under the name.
- Heavy rows are much wider than light ones: with each row centred, numbers aligned to their own row would jump about. All the numbers align to the widest row, the one at 900.
- To start again identically, with no jumps, the rows’ entrance and closing, the line and the growth start from written values (fromTo) and not from whatever they find: on the second run the specimen starts empty even though the logo has only just faded.
Libraries
GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 4.8 KB; the libraries: GSAP 28 KB.
Testing
Tested on 19 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.
