The dinosaur-bitten logo
Intro, SVG, Text
NewFree
Back to the library
The Morse-keyed logo
A minimal logo intro: a thin red pen keys the name in Morse code, at the real rhythm of the code, on a hairline; as soon as a letter’s code is complete, the letter rises out of the line above its own dots and dashes, light and narrow. Then the word closes up, the letters take on weight and width with a spring, and the code stays under the name like a signature. In the Playground you type your own name or upload your own logo.
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 Morse-keyed logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script measures it, keys the name in Morse on a thin tape and raises the letters out of it -->
<svg class="palco" data-stage role="img" aria-label="tellum" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- the letters live above the tape: they rise out of it and sink back into it -->
<clipPath id="above-tape"><rect data-letter-clip /></clipPath>
<!-- the tape rolls up into the pen from its left end -->
<clipPath id="tape-roll"><rect data-tape-clip /></clipPath>
</defs>
<g data-world>
<!-- a hidden line of text, only to measure the letters with their variable axes -->
<text class="misura" data-measure visibility="hidden" aria-hidden="true"></text>
<!-- the tape: a hairline and the dots and dashes of the code -->
<g clip-path="url(#tape-roll)" data-tape>
<rect class="riga" data-line />
<g data-marks></g>
</g>
<!-- the letters, one text each -->
<g clip-path="url(#above-tape)" data-letters></g>
<!-- the pen that keys the code -->
<rect class="penna" data-pen />
</g>
</svg>
<p class="nota">Click or tap to see it again</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.
14 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 Morse-keyed logo” from Animorio and fit it into my siteWhat it does
On an empty warm white ground a small red pen drops in, a thin vertical tick that arrives a touch too tall and settles. It sets off at an even pace, leaving a very thin black line behind it, and keys the name of the made-up brand, tellum, in Morse code, at the real rhythm of the code: a dot is one beat, a dash three, one gap between signs, three between letters. Wherever the key is down the line thickens into a dot or a dash, which is born a little too tall and settles, and the pen dips by a pixel. As soon as a letter’s code is complete, that letter rises out of the line right above its signs, thin and narrow like the code: it shoots up, goes a pixel too far, stretches as it rises and squashes a little as it stops, and its signs below feel the blow. Once the whole name is keyed, the word closes up: from the middle outwards the letters slide to their places taking their code with them, pass the spot by a pixel and a spring pulls them back, while they take on weight and width (the two axes of the variable face) until they become the full logo. The code stays under the name, tightened to its width, with the pen at the end. While the logo is on show the pen lifts, goes back to the start and reads the code again: the signs jump under it and every letter gives a small nod when its code is read. Then the letters thin out and sink back into the line, the tape rolls up into the pen and it all starts again. A click restarts it. A picture can take the place of the word: the name is keyed all the same and at the end the picture rises out of the line.
How it works
The code in beats
The name becomes a row of signs measured in beats, as in real Morse: a dot is one, a dash three, one beat between the signs of a letter, three between letters, seven between words. Each letter remembers where its code starts and ends. Accented letters are keyed as the plain letter (normalize('NFD') and the marks dropped). A beat lasts about three seconds divided by all the beats of the name, with a ceiling: a long name is never keyed in much more than four seconds.
Measuring with the axes
A canvas can measure the weight but not the width of a variable face, so the letters are measured on a hidden line of SVG text, in the same face (Anybody) with the same axes: getStartPositionOfChar and getSubStringLength give the centre of every letter in the closed-up word, with the real kerning, and getComputedTextLength the width of every narrow, light letter as it rises. From there comes the scale of the tape: wide enough for every letter to sit above its code without touching its neighbours, never wider than the screen.
The pen and the key
The pen runs with ease 'none', at an even speed like a telegraph tape, and the line behind it is the same tween. Each sign widens as the pen passes over it, and is born 1.8 times too tall, then settles with an elastic. Whether the pen dips or not is not a tween: the function that draws everything decides it every frame, by looking at whether the pen is over a sign. So the key snaps down and up exactly, at any speed.
The word closing up
Each letter has its x on the wide tape and its x in the closed-up word: from the middle outwards, 45 thousandths of a second apart, it goes there with power3.inOut to a point one pixel past (SETTLE), then elastic.out brings it back. Weight and width (font-variation-settings, 'wght' and 'wdth') grow with the same curve but a tenth of a second later: so a letter never grows before it has room, and neighbours never touch. On arrival a small squash, and the letter’s signs follow it in the same wave.
Direction and your logo
The whole intro is one timeline, with the labels start, key, close, reveal, rest and leave, and timeScale for the speed. The letters sit in a group clipped by a clipPath that ends just above the line: they rise from behind the line and sink back into it at the end. The tape has its own clipPath, which closes from the left towards the pen to roll it up. If IMAGE holds an address, the name is keyed all the same and at the end the picture rises out of the line; in the Playground, next to the field, there is a button to upload a file, which goes into the code as a data: address.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
NAME | script.js | 'tellum' | The logo as a word: it is keyed in Morse and its letters rise out of the code. Letters, digits and common punctuation have their code; accented letters are keyed as the plain letter. |
IMAGE | script.js | '' | The logo as a picture: the address of a file, or upload it from your computer. If there is one, it rises out of the line in place of the letters; the name is keyed all the same. |
WEIGHT | script.js | 580 | How heavy the letters are once the word has closed up: 100 is a hairline, 900 is black. They always rise thin. |
SETTLE | script.js | 1 | How many pixels the letters pass their place by before the spring pulls them back (0 = they stop dead). |
CODE | script.js | true | Whether the code stays under the logo as a thin line of dots and dashes. With false the tape rolls up into the pen and only the name is left. |
SPEED | script.js | 1 | The speed of the whole animation: 2 is twice as fast, 0.5 half as fast. |
REST | script.js | 4.5 | How many seconds the logo stays on show before it sinks into the line. From 3.4 seconds up there is time for the pen to read the code again. |
LOOP | script.js | true | Whether the logo sinks into the line and the name is keyed again. With false the logo stays, and now and then the pen reads the code again. |
When to use it
To present a logo with a precise, slightly secret gesture: the opening of the site of a communications brand, an agency, a radio station or a podcast, a graphic design studio, a product about messages and connections, a preview for a client, a loading screen, a social post. It suits pages where everything else is quiet. It works with a written wordmark and with a picture.
On phones
The same animation with the sizes adapted: the name is smaller, the tape narrower and the signs shorter, so the wide code still fits on the screen. A tap restarts it.
With reduced motion
Nothing moves: the line with the code fades in already tightened under the name, then the logo appears. If the animation starts again, everything leaves with a fade.
Pitfalls
- A canvas cannot measure the width axis (fontStretch only takes a few keywords, not 62%): the narrow letters came out as wide as the normal ones. They are measured on a hidden line of SVG text with font-variation-settings, and the positions come from getStartPositionOfChar, which also takes the kerning into account.
- With weight and width growing along with the slide, halfway through the swelling letters touched: the axes start a tenth of a second later with the same curve, so they always grow less than the letters have closed in.
- The pen dipping on every sign, done with two tweens per sign, got stuck: a dot's return tween was still alive when the next dot pushed it down, and in the end it won. Now the drawing function decides, by looking at whether the pen is over a sign; and the jump of the signs when their letter arrives is a separate property added to the height, so it does not fight the settle.
- The tape rolling up started from a clip off the left of the screen and for a third of the time nothing happened: the clip starts at the beginning of the line with fromTo, but with immediateRender: false, or it would cut the wide tape while it was still being keyed.
- A long name such as “Northwind Supply Co.”, at the rhythm of a short one, took ten seconds to key: the length of a beat has a ceiling, and a long name is always keyed in a little over four seconds.
Libraries
GSAP 3.15.0, Anybody (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 9.1 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.
