The logo on the guide lines

Intro, TextGSAPMediumCompressed weight: Demo 6.2 KBGSAP 28 KBFreeDownload the zip

A minimal-style logo intro in the language of type design: the five guide lines are drawn (ascender, cap height, x-height, baseline, descender) and the letters of the name grow up from the baseline, wide and light, until each one snaps onto its own lines, which feel the hit. In the end only the baseline is left, in the accent colour.

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.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The logo on the guide lines</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: five guide lines of a type designer, then the letters of the name snapping onto them -->
    <svg class="palco" data-stage role="img" aria-label="Halyard" xmlns="http://www.w3.org/2000/svg">
      <g data-guides></g>
      <g data-labels></g>
      <g data-letters></g>
    </svg>
    <button class="pillola" type="button" data-replay data-autoclic>
      <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

Open the Playground

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 on the guide lines” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A warm white page, empty. From the left, one after another, five very thin lines draw themselves with a soft brake: they are the guide lines of a type designer, and next to each one its name appears in small type, on the right and on the left in turn (ascender, cap height, x-height, baseline, descender), so the two top lines, very close together, never get mixed up. Then the letters of the name, Halyard, arrive in a scattered order: each is born low, wide and light on the baseline and grows taller, speeding up as it narrows and gains weight, until its ends touch the right lines: the H the cap height, the l and the d the ascender, the a and the r the x-height, the y dropping down to the descender. When it gets there it goes a pixel too far and springs back, and the line it touched gives a little under it and shivers before it lies straight again. Once the name is set the labels slip away to the margins, the lines fade from the top and the bottom, and the baseline, left alone, shrinks to the width of the name and turns vermilion. Only then the Replay button appears at the bottom, and it draws it all again.

How it works

The real measures of the face

The five heights are not made up: a canvas set in the same face, Roboto Flex, uses measureText to measure the ink of the l (ascender), the H (cap height), the x (x-height) and the p (descender). The canvas cannot change the width axis, so the width of each letter at the end of its run is measured by the SVG itself with getComputedTextLength on a hidden text with its font-variation-settings. The size is the one that fits the name into two thirds of the lines and the block of lines into a third of the height.

Which line each letter touches

For every letter the script measures how far the ink rises and drops and compares it with the heights of the lines: the top line is the nearest among ascender, cap height and x-height; the bottom one is the descender if the letter drops below the baseline, otherwise the baseline. So with any name the stems touch the right lines.

Growing from the baseline

Every letter is an SVG group with a translate to its place on the baseline and a vertical scale: it starts at half height, wide (wdth axis 132) and light (wght 260). A power3.in tween takes it one pixel past its height, speeding up like something snapping; an elastic.out one brings it back to 1. Meanwhile a third tween narrows it to wdth 90 and takes it to wght 640.

The line that feels the hit

The lines are paths redrawn on every frame with a point every four pixels. When a letter arrives it adds a bell-shaped dip, exp of minus x squared, as wide as the letter, upwards on the top line and downwards on the bottom one; its depth goes back to zero with elastic.out, so the line shivers and stops.

One direction

Everything that moves is an object of numbers: how much of each line is drawn, the label, the height, width and weight of each letter, how far the baseline has shrunk. A GSAP timeline animates them, one function on the ticker turns them into SVG attributes; on resize only the measures change, so the direction carries on without a jump. With reduced motion the logo appears already on its line, with a fade.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'Halyard'`	The name: a word with letters that rise and drop puts all five lines to work.
`GUIDES`	script.js	`['ascender', 'cap height', 'x-height', 'baseline', 'descender']`	The names of the five lines, top to bottom.
`DRAW_TIME`	script.js	`1.3`	How many seconds each line takes to draw itself.
`LINE_STAGGER`	script.js	`0.2`	The seconds between one line and the next.
`STAGGER`	script.js	`0.16`	The seconds between one letter and the next.
`GROW_TIME`	script.js	`0.6`	How many seconds a letter takes to grow onto its lines.
`SNAP`	script.js	`1`	How many pixels the letter goes past its line before it settles.
`WOBBLE`	script.js	`2.2`	How many pixels the line gives where the letter touches it.
`WIDE`	script.js	`132`	The width (wdth axis) a letter is born with.
`NARROW`	script.js	`90`	The width it ends with.
`LIGHT`	script.js	`260`	The weight a letter is born with.
`HEAVY`	script.js	`640`	The weight it ends with.
`HOLD`	script.js	`1`	How many seconds the name stays on its five lines before they are cleared.
`SPEED`	script.js	`1`	2 is twice as fast, 0.5 half as fast.

Try them in the Playground

When to use it

For the opening of a type foundry’s site, a graphic design studio or a branding agency, the loader of a wordmark made of a single word, the launch of a new typeface.

On phones

The same animation: the lines run from edge to edge, the name is smaller and the labels sit above or below their line, at its ends, instead of in the margins.

With reduced motion

Nothing moves: the logo fades in already on its vermilion baseline, then the Replay button, which makes it fade out and back in.

Pitfalls

In Instrument Sans the ascender of the l and the height of the H are the same: there were four lines, not five. In Roboto Flex the l rises above the H.
Letters starting at a tenth of their height looked like dumbbells (two blobs and a bar): now they start at half height and fade in.
The labels of the ascender and the cap height, a few pixels apart, overlapped: they sit on opposite sides, and on a phone above and below the lines.
In the drawing function, a constant called right inside the loop shadowed the one holding the right edge of the name, used earlier: a not-yet-defined variable error. It is now called onRight.
The preview’s autopilot pressed Replay halfway through the entrance and the animation started over: the video stopped at 3.7 seconds. Now Replay only shows up once the name is set and, while the entrance runs, clicks do nothing.

Libraries

GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 6.2 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.