The signature in block capitals

SVG, TextGSAPAdvancedCompressed weight: Demo 9.9 KBGSAP 28 KBFreeDownload the zip

A blue cursive signature is written fast, with the rhythm of a real hand; then its curves straighten, letter after letter, into the same name in clean black block capitals that take on weight as they land. The final flourish stretches out underneath like the line on a contract. Minimal style; in the Playground you type your own name.

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 signature in block capitals</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-scena>
    <!-- the stage: the script writes the signature here, then straightens it into the same name in block capitals -->
    <svg class="palco" data-palco role="img" aria-label="Nora Hale" xmlns="http://www.w3.org/2000/svg">
      <g data-inchiostro></g>
    </svg>
    <!-- the caption under the line, as on a form -->
    <p class="didascalia" data-didascalia>Name in block capitals</p>
    <p class="nota">Click or tap to sign 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

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 signature in block capitals” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On an empty warm white ground a blue pen signs Nora Hale: it comes in from below on the left, races along the straight strokes and slows into the tight turns, where the ink stays thicker, lifts between first name and surname and at the end, after the last letter, drops and swings back in a flourish that runs under the whole signature and thins into a tail. Every letter of the signature is drawn on the skeleton of its capital, slanted, squeezed and a little shaky. A moment later the curves start to straighten, one letter after another from the left: every stroke stretches out in the direction the pen wrote it, the blue turns black, the letter rises onto the line and arrives in thin block capitals; as soon as it is in place it takes on weight with a small overshoot, gives by a pixel and settles, and its neighbours feel the blow. The strokes that joined one letter to the next thin out and vanish. Last, the flourish straightens into a thin blue line under the name and stretches beyond both ends, like the line on a form, and under it the caption Name in block capitals appears, coming in narrow and widening. After a few seconds the name is wiped from the left, the line with it, and the pen signs again, a little differently every time. A click signs a new signature at once.

How it works

Capitals as pen strokes

Every capital is a list of strokes in the order a pen would write them, in a box one high: points [x, y] and arcs ['a', cx, cy, rx, ry, from, to]. A stroke that starts with 'late' is written after the whole signature, like the bar of a T. For the block capitals the arcs are broken every 4 degrees; for the signature every 45, so the pen only passes through the corners.

The signature from the same skeleton

For the signature the same points are slanted (SLANT), squeezed (the letters after the first are half as tall) and shaken a little, with random numbers that depend on a seed: every round gives a different signature. A centripetal Catmull-Rom spline runs through all the points of a word, with a lead-in from below and, at the end of the name, the flourish. So every piece of the signature matches a stroke of the capital: signature and capitals are resampled to the same number of points, spread by length.

The rhythm of the hand

Along every word the script measures how much the line turns at each step: the pen goes fast where it is straight and slows where it turns, with a slower start. So every point has its own moment and its own thickness (where the pen slows the ink is thicker, and it thins at both ends); the times are scaled so the whole signature takes SIGN seconds. The thickness that changes along the line is made of many short paths, three points each, every one with its own stroke-width and round ends: in a row they look like a single line.

The curves straighten

Every letter has a number m from 0 to 1: every point travels from the signature to the capitals with power3.inOut, but with a delay that grows along the stroke, so the straightening runs in the pen’s direction. The colour goes from the blue of the pen to black. The joining strokes have one end on each letter and each end follows its own, then they thin until they vanish. As soon as it arrives the letter takes on weight (from thin to WEIGHT, with back.out) and gives: a damped wobble of a couple of pixels, which reaches its two neighbours too, smaller.

The line and the direction

The points of the flourish go onto a straight line under the name, from its right end to its left; then the line stretches beyond the name with back.out, and the caption comes in on Instrument Sans’s wdth axis, from 75 to 100. It is all one GSAP timeline, signing, straightening, line, pause and wipe, which redraws the stage on every frame and writes an attribute only if it has changed; at the end it starts again with a new seed.

Values to change

Name	File	Default	What it changes
`NAME`	script.js	`'Nora Hale'`	The name that is signed, then written in block capitals. Letters from A to Z (accents are dropped), plus hyphen, apostrophe and full stop.
`SIGN`	script.js	`2.2`	How many seconds the pen takes to sign the whole name.
`SLANT`	script.js	`0.32`	How much the signature leans to the right (0 = upright).
`WEIGHT`	script.js	`0.1`	How bold the capitals get, as a share of their height.
`SPRING`	script.js	`1`	How much each capital gives as it lands and how far the line overshoots before it stops (0 = none).
`REST`	script.js	`2.8`	How many seconds the name in block capitals stays on show before it is wiped.
`SPEED`	script.js	`1`	The speed of the whole animation: 2 is twice as fast, 0.5 half as fast.
`LOOP`	script.js	`true`	Whether the name is wiped and the pen signs again, a little differently every time. With false it stays in block capitals.

Try them in the Playground

When to use it

Wherever there is a signature or a name to present: the about page of a portfolio, the signature at the end of a letter or an article, the confirmation of a signed contract or order, a subscription, the opening of a law firm’s, notary’s or agency’s site, a confirmed booking. It suits pages where everything else is quiet.

On phones

The same animation with the sizes adapted: the name is almost as wide as the screen, signature and capitals shrink together and the thickness stays in proportion. A tap signs again.

With reduced motion

Nothing moves: the whole signature fades in, then fades out and the name in block capitals fades in in its place, with its line and caption. If it starts again, everything fades out.

Pitfalls

Stripping the accents from the name takes a regular expression with the combining characters: written with backslash-u sequences, on its way through the tools it turned into the real characters, invisible in the file. The expression is built with String.fromCharCode.
A joining stroke between two letters that straighten at different moments, moved with the timing of just one, came away from the other: each of its points uses a time between the left letter’s and the right letter’s, so both ends stay attached.
A zero-length path with round ends still draws a dot: pieces not yet written or already wiped get an empty d, and joining strokes that have almost vanished are removed altogether.

Libraries

GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 9.9 KB; the libraries: GSAP 28 KB.

Testing

Tested on 15 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.