Anatomy of a letter

Hover, TextGSAPMediumCompressed weight: Demo 7.5 KBGSAP 28 KBFreeDownload the zip

In the minimal style: a very large word in a serif typeface, on the four thin lines of a type specimen. Pointing at a part of a letter (the stem, the bowl, the ear of the g), a thin crosshair lands on the spot, a vermilion leader line draws itself with a bend and the name of the part rises out of its mask with a line on what it is; the letter being read stays black, the others turn grey.

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>Anatomy of a letter</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter-tight@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <header class="top">
      <span class="top__name">Kestrel Type</span>
      <span class="top__note">Specimen, the parts of a letter</span>
    </header>

    <!-- one word set very large on four thin guide lines. Pointing at a part of a letter draws a leader line from it
         to its name, like the notes on a type specimen; pointing at a guide line names the line -->
    <div class="sheet" data-sheet>
      <div class="guides" aria-hidden="true" data-guides></div>
      <p class="word" data-word aria-label="Rag"></p>
      <svg class="notes" aria-hidden="true" data-notes></svg>
      <div class="labels" aria-live="polite" data-labels></div>
    </div>

    <p class="hint" data-hint>Point at a part of a letter</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.

84 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 “Anatomy of a letter” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a paper-coloured ground there is the word Rag in Fraunces, very large, in the middle, on four very thin grey lines that cross the page, each with its name in small print on the right: Cap height, x-height, Baseline, Descender. When the page opens the lines grow from the left, the letters rise one after the other, heavy, and thin out to their weight; then the first note opens by itself, on the bowl of the R. A note is made like this: a thin vermilion crosshair lands on the part, turning and going a hair past its size, a thin vermilion line runs out from there on a slant, bends and runs level for a short stretch, and at its end the name of the part (Bowl) rises out of its mask, with a grey line above or below saying what it is (A curved stroke that closes a round space). Notes above the word have the explanation above the name, those below the word below it. The letter of the part stays black, the others turn light grey. Going over another part, the old note folds back into its letter while the new one draws itself; otherwise the last note stays open. There are nine parts: Stem, Bowl, Leg and Serif of the R, Terminal and Bowl of the a, Ear, Link and Loop of the g. Away from the letters, going over one of the four lines, the line lights up vermilion with a small knock and its name turns black.

How it works

The parts in ems

Every part is written in PARTS with the letter it belongs to, where it falls across the letter (0 to 1 of its width) and where it falls down from the top of the line (in ems of the size). So the point follows the word at any size: it only takes the type size and the width of each letter. The places are measured on Fraunces with the opsz axis at its top, and hold for weights from 200 to 600; the four guide lines are in ems too (GUIDES).

A note is a small timeline

Every note has a paused GSAP timeline: the crosshair comes in with scale and rotation on back.out (svgOrigin on the part’s point), the leader line draws itself with stroke-dashoffset in DRAW seconds, and the name and the explanation rise out of their masks with yPercent, staggered. Opening the note is play, closing it is reverse with a timeScale nearly twice as fast, so the old one folds away while the new one opens.

Where the name goes

The leader runs from the point, up (or down) on a slant to above the cap height (or below the descender), bends and runs level for 28 pixels; the name sits at its end, aligned outwards. If on the chosen side the name would run off the page, the leader goes the other way. On a phone the leader goes straight up or down and the name is centred on its end.

The pointer picks the nearest part

At every move the nearest part is looked for: if it is within REACH ems it becomes the active one. An open note stays open until another part is reached, like a specimen page left open, so it does not flicker; outside the word, a guide line a few pixels from the pointer lights up with its name. The letters change colour with a tween; the arrow keys go from one part to the next.

The opening

A timeline grows the guide lines with scaleX from the left, raises the letters one at a time with yPercent while the wght axis comes down from 720 to WEIGHT, and at the end opens the first note, so the page says what it does before anyone touches it.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'Rag'`	The word on show: the parts are placed on these three letters of Fraunces.
`WEIGHT`	script.js	`380`	The weight of the word (200 to 600).
`REACH`	script.js	`0.17`	How close the pointer must come to a part, in ems of the word.
`DRAW`	script.js	`0.42`	How long a leader line takes to draw itself, in seconds.
`OVERSHOOT`	script.js	`2.2`	How far the crosshair overshoots as it lands.
`PARTS`	script.js	`[[0, 0.24, 0.5, 'Stem', …], …]`	The parts: letter, place across and from the top, name, explanation, up or down, left or right.
`--accent`	style.css	`#e0462a`	The colour of the leader lines and of the line pointed at.

Try them in the Playground

When to use it

For the page of a typeface at a type foundry, for a graphic studio telling about its work, for a typography course or article, for an illustrated glossary. With the parts placed again it works with any letter, and with a logo too.

On phones

The same notes with adapted sizes: the word takes the width of the screen, the leaders go straight up or down and the name is centred on their end. Touch a part to open its note (the finger’s reach is twice the mouse’s), drag to move to the others. The names of the guide lines stay hidden until their line is touched.

With reduced motion

Nothing draws and nothing rises: the note fades in already complete, crosshair, leader and name, and closes the same way. The letters change colour with a short fade and the page appears already set.

Pitfalls

The crosshair turned round a far-away point: GSAP on SVG elements ignores the CSS transform-origin, it needs svgOrigin set to the part’s point.
Measuring the places during the opening, the letters were still heavy and wider: the points fell beside the parts. The measures are taken again once the weight has arrived, before the first note opens.
On a phone the slanting leader turned to the other side ran back over the name: there the leader is vertical and the name centred.
A note that closed as soon as the pointer left its reach flickered between two parts, and the preview’s fake pointer, passing quickly, left it open for an instant: the note stays open until another part is reached; the guide lines, which the pointer crosses all the time, light up without closing it.

Libraries

GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Inter Tight (font variabile) 5.3.0.

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