Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
La parola scritta dal battito
Animazione di testo in stile minimal: una riga sottile corre su una carta da elettrocardiogramma e batte come un cuore vero, a 72 battiti al minuto; ogni picco cade dove va una lettera e la lettera nasce dal picco, sottile, poi si posa e prende peso. Scritta la parola, il cuore continua a battere sotto di lei; muovendo il puntatore il battito accelera.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.
<!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
Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.
18 valori da cambiare
Oppure chiedila a Claude Code
Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:
Prendi «La parola scritta dal battito» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo segnata da quadretti leggerissimi, come la carta di un elettrocardiogramma; in alto il nome di una clinica del cuore inventata, Steady, e in basso la frequenza in battiti al minuto. Da sinistra parte una riga sottile d’inchiostro che corre piatta, poi batte: la piccola onda P, la discesa, il picco alto e sottile, la risalita e l’onda T, come un cuore vero a 72 battiti al minuto. Il pezzo di tracciato che si sta disegnando è vermiglio, l’unico colore, e diventa inchiostro appena passato. Ogni picco cade esattamente dove va una lettera della parola «heart»: la lettera nasce dal picco, sale dalla riga sottile e leggera, poi si alza di un pixel e si posa con una molla mentre prende peso, e il picco si abbassa in un piccolo segno sotto di lei. Lettera dopo lettera, battito dopo battito, la parola è scritta. Poi il cuore continua: a ogni battito un impulso vermiglio corre lungo la riga, i segni sotto le lettere sussultano e le lettere si sollevano una dopo l’altra, appena più pesanti, e tornano giù; il numero dei battiti si accende a ogni colpo. Muovendo il puntatore (o con un tocco) il cuore accelera fino a 128 battiti al minuto, la riga corre più veloce e il numero sale; lasciato in pace si calma piano. Dopo sei battiti la parola torna nella riga, da destra, il tracciato svanisce e tutto ricomincia.
Come funziona
Un battito come una funzione
La forma di un battito è una funzione della distanza dal suo picco, misurata in battiti: l’onda P e l’onda T sono due campane fatte di un coseno, Q, R e S tre tratti dritti come nei tracciati veri. Il picco R è alto quanto la lettera che deve scrivere per SPIKE; le altre onde sono frazioni dell’altezza delle maiuscole.
Un picco per ogni lettera
Il centro di ogni lettera si misura su una canvas con lo stesso carattere (Inter Tight variabile), con measureText dei pezzi di parola, così tiene anche la crenatura. La larghezza di un battito è la distanza media fra due lettere, e la riga corre alla velocità che mette un battito fra due lettere: a 72 battiti al minuto, un battito ogni 0,83 secondi.
Il tracciato
La riga è un path ridisegnato a ogni fotogramma con un punto per pixel, da sinistra fino alla testa del tracciato; l’altezza in ogni punto è la somma dei battiti già scritti, ognuno moltiplicato per il suo inviluppo. Un secondo path, vermiglio, ridisegna solo l’ultimo tratto: il battito che si sta disegnando, poi l’impulso che corre.
La lettera che nasce dal picco
Ogni lettera è un text di un SVG tagliato da un rettangolo (clipPath) che sale dalla riga quando il picco arriva al suo centro. Poi il peso va da LIGHT a HEAVY, la lettera sale di un pixel e torna con elastic.out, e l’inviluppo del suo battito scende a 0,16: il picco diventa un piccolo segno sotto la lettera.
Il cuore che accelera
Tutta la regia è una timeline sola che si ripete: la corsa del tracciato, le lettere, sei battiti calmi e il ritorno. Il ritmo è il timeScale della timeline: il puntatore lo porta verso FAST diviso BPM, e quando si ferma torna piano a uno. Così un cuore più veloce è solo una timeline più veloce, e la riga, le lettere e il numero restano sempre insieme.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'heart' | La parola che il tracciato scrive, una lettera per battito (fino a 8 lettere). |
BPM | script.js | 72 | La frequenza del cuore a riposo, in battiti al minuto. |
FAST | script.js | 128 | La frequenza a cui il puntatore porta il cuore. |
SPIKE | script.js | 1.06 | Quanto è alto il picco rispetto alla lettera che scrive. |
LIGHT | script.js | 160 | Il peso di una lettera quando nasce dal picco (da 100 a 900). |
HEAVY | script.js | 640 | Il peso in cui si posa (da 100 a 900). |
BEATS | script.js | 6 | Quanti battiti calmi prima che la parola venga scritta di nuovo. |
Quando usarla
Per il titolo o il marchio di una clinica, di un’app per la salute o per l’allenamento, di una campagna per la prevenzione, di un sito di cardiologia; anche per un’apertura che deve dire «vivo» senza un’immagine, o per il nome di un prodotto che misura qualcosa.
Sul telefono
La stessa animazione con le misure adattate: il carattere si sceglie perché la parola stia nella larghezza e il picco nell’altezza dello schermo, e la riga resta a 16 pixel dai bordi. Un tocco accelera il cuore.
Con il movimento ridotto
Niente si muove: la parola è già scritta sul tracciato, coi piccoli segni sotto le lettere, e il numero dei battiti è fermo.
Trappole
- Con le lettere spaziate in modo diverso (la «r» è stretta, la «h» larga) i battiti non sono tutti uguali: è giusto così, anche un cuore vero varia un poco fra un battito e l’altro; la larghezza di un battito è la media, così il ritmo resta quello di BPM.
- Il ritmo che cambia col puntatore va messo sul timeScale della timeline e non sulla velocità del tracciato: altrimenti la riga e le lettere si separano e il picco non cade più sotto la sua lettera.
- Il text con text-anchor middle centra la larghezza di avanzamento, che cambia col peso: la lettera resta centrata sul suo picco mentre ingrassa, ma va misurata col peso finale per i posti.
Librerie
GSAP 3.15.0, Inter Tight (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 22 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Da fare
Licenza d’uso
Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.
