Heartbeat NameMotion · ZainSpire ← Library

Canvas · ECG trace · Web Audio beep

Every heartbeat
writes your name.

A heart monitor ticks along: beep, beep, beep. Then the line stops beating and writes a name, letter by letter, in one glowing stroke, before the heartbeat comes back. Type any name and press Start. Turn the sound on for the beeps.

II72 BPM
HTML · CSS · JavaScript · no librariesDownload the code ↓

The heartbeat shape

P, QRS, T

Each beat is a small bump, a sharp spike up and down, and a wider bump after it, the same parts a real ECG shows. The beats are spaced by the BPM, with a little natural wobble.

How it writes

A pen follows the letters

The name is drawn once on a hidden canvas. For every column the pen finds where the ink is, so the trace climbs over each letter, and the glowing letters are revealed right behind the pen.

The glow and the beep

Phosphor and Web Audio

Old monitors glowed because the screen kept a fading trail. Here every frame fades the last one a little. Each spike plays a short beep made with Web Audio, only after you turn the sound on.