The word written by a heartbeat

Text, SVGGSAPMediumCompressed weight: Demo 6.2 KBGSAP 28 KBFreeDownload the zip

A minimal-style text animation: a thin line runs across electrocardiogram paper and beats like a real heart, at 72 beats a minute; every spike falls where a letter belongs and the letter grows out of the spike, thin, then settles and gains weight. With the word written, the heart keeps beating under it; moving the pointer quickens the beat.

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 word written by a heartbeat</title>
  <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 aria-label="Steady, a heart clinic. A heartbeat trace writes the word heart.">
    <header class="top">
      <span class="brand">Steady</span>
      <span class="what">Heart clinic</span>
    </header>

    <!-- the trace and the letters: one SVG, built by the script -->
    <svg class="scene" data-scene aria-hidden="true">
      <defs data-defs></defs>
      <path class="trace" data-trace d="" />
      <path class="trace trace--beat" data-beat d="" />
      <g data-letters></g>
    </svg>

    <h1 class="sr-only" data-word>heart</h1>

    <footer class="bottom" aria-hidden="true">
      <span class="rate"><b data-rate>72</b> bpm</span>
      <span class="hint" data-hint>Move to quicken the beat</span>
    </footer>
  </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.

18 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 word written by a heartbeat” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A warm white page ruled with very faint squares, like the paper of an electrocardiogram; at the top the name of an invented heart clinic, Steady, and at the bottom the rate in beats per minute. From the left a thin line of ink sets off running flat, then it beats: the small P wave, the dip, the tall thin spike, the rise and the T wave, like a real heart at 72 beats a minute. The stretch of trace being drawn is vermilion, the only colour, and turns to ink once it has passed. Every spike falls exactly where a letter of the word ‘heart’ belongs: the letter grows out of the spike, rises from the line thin and light, then lifts a pixel and settles with a spring as it gains weight, and the spike shrinks back into a small blip under it. Letter after letter, beat after beat, the word is written. Then the heart goes on: at every beat a vermilion pulse runs along the line, the blips under the letters twitch and the letters lift one after the other, a touch heavier, and come back down; the beat count lights up at every beat. Moving the pointer (or a tap) quickens the heart up to 128 beats a minute, the line runs faster and the number climbs; left alone it slowly calms down. After six beats the word sinks back into the line, from the right, the trace fades and it all starts again.

How it works

A beat as a function

The shape of a beat is a function of the distance from its spike, measured in beats: the P and T waves are two cosine bells, Q, R and S three straight strokes as in real traces. The R spike is as tall as the letter it writes times SPIKE; the other waves are fractions of the cap height.

One spike per letter

The middle of each letter is measured on a canvas in the same face (variable Inter Tight), with measureText of pieces of the word, so it keeps the kerning. The width of one beat is the mean distance between two letters, and the line runs at the speed that puts one beat between two letters: at 72 beats a minute, a beat every 0.83 seconds.

The trace

The line is a path redrawn on every frame with one point per pixel, from the left up to the head of the trace; the height at each point is the sum of the beats already written, each times its envelope. A second path, in vermilion, redraws only the last stretch: the beat being drawn, then the running pulse.

The letter that grows out of the spike

Every letter is an SVG text cut by a rectangle (clipPath) that rises from the line when the spike reaches its middle. Then the weight goes from LIGHT to HEAVY, the letter lifts a pixel and comes back with elastic.out, and the envelope of its beat drops to 0.16: the spike becomes a small blip under the letter.

The heart that speeds up

All the direction is one repeating timeline: the run of the trace, the letters, six calm beats and the way back. The rhythm is the timeline's timeScale: the pointer pushes it towards FAST over BPM, and when it stops it slowly goes back to one. So a faster heart is just a faster timeline, and the line, the letters and the number always stay together.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'heart'`	The word the trace writes, one letter per beat (up to 8 letters).
`BPM`	script.js	`72`	The resting heart rate, in beats per minute.
`FAST`	script.js	`128`	The heart rate the pointer pushes it to.
`SPIKE`	script.js	`1.06`	How tall the spike is, compared with the letter it writes.
`LIGHT`	script.js	`160`	The weight of a letter as it grows out of the spike (100 to 900).
`HEAVY`	script.js	`640`	The weight it settles into (100 to 900).
`BEATS`	script.js	`6`	How many calm beats before the word is written again.

Try them in the Playground

When to use it

For the headline or the wordmark of a clinic, a health or fitness app, a prevention campaign, a cardiology site; also for an opening that has to say ‘alive’ without a picture, or for the name of a product that measures something.

On phones

The same animation with the sizes adapted: the font size is chosen so the word fits the width and the spike the height of the screen, and the line stays 16 pixels from the edges. A tap quickens the heart.

With reduced motion

Nothing moves: the word is already written on the trace, with the small blips under the letters, and the beat count stands still.

Pitfalls

With letters spaced differently (the ‘r’ is narrow, the ‘h’ wide) the beats are not all the same: that is right, a real heart varies a little from one beat to the next too; the width of a beat is the mean, so the rhythm stays at BPM.
The rhythm that changes with the pointer goes on the timeline's timeScale, not on the speed of the trace: otherwise the line and the letters drift apart and the spike no longer falls under its letter.
A text with text-anchor middle centres the advance width, which changes with the weight: the letter stays centred on its spike as it gets heavier, but the places have to be measured with the final weight.

Libraries

GSAP 3.15.0, Inter Tight (font variabile) 5.3.0.

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

Testing

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