L’accento che cade

Testo, FisicaGSAPMediaPeso compresso: Demo 5,4 KBGSAP 28 KBGratisScarica lo zip

Animazione di testo nello stile minimal: una parola sottile su una riga leggera, «cafe», e dall’alto cade un accento vermiglio. Tocca la «e», rimbalza due volte e si raddrizza; la lettera colpita si schiaccia e prende peso, le vicine sentono il colpo e la riga cede. L’accento, letteralmente, mette l’accento. Poi «rosé» e «résumé», con due accenti.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The falling accent</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" aria-live="polite">
    <!-- the words, one on top of the other: only one is on show at a time -->
    <div class="words" data-words></div>

    <!-- the hairline the words stand on and the accents that fall: drawn by the script -->
    <svg class="marks" data-marks aria-hidden="true">
      <path class="line" data-line d="" />
      <g data-accents></g>
    </svg>
  </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.

12 valori da cambiare

Apri il Playground

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 «L’accento che cade» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina bianco caldo una riga sottile grigia si disegna dal centro verso i lati, e sopra arriva una parola in un carattere con le grazie, sottile, una lettera dopo l’altra dal basso: «cafe». Dall’alto cade un accento acuto vermiglio, un cuneo sottile inclinato che accelera cadendo; tocca la «e» proprio sopra il suo occhio, si raddrizza con una molla e rimbalza due volte, sempre più basso. Nell’istante del colpo la «e» si schiaccia e torna, e prende peso di colpo, un niente più del dovuto e poi giusta: è diventata nera e piena mentre le altre restano sottili. Le lettere vicine si abbassano appena, una dopo l’altra, più piano quanto più sono lontane, e la riga sotto cede sotto la «e» e torna dritta tremando. Ora si legge «café». Dopo una pausa l’accento vola via verso l’alto, la parola scende e svanisce lettera per lettera e torna leggera, e arriva «rose», che diventa «rosé»; poi «resume», dove cadono due accenti uno dopo l’altro e le due «e» prendono peso. Poi si ricomincia.

Come funziona

Gli accenti dalle parole

Le parole si scrivono con i loro accenti (café, rosé, résumé). Lo script le scompone con normalize('NFD'): ogni lettera accentata diventa la lettera più un segno combinante, e i segni 769 (acuto) e 768 (grave) dicono su quale lettera cade un accento e se va inclinato a destra o a sinistra. Gli altri segni si tolgono.

L’accento disegnato

L’accento è un path SVG, un cuneo più largo in cima, calcolato in proporzione alla grandezza del carattere lungo una linea inclinata (la normale alla linea dà lo spessore). Per il grave lo stesso cuneo si specchia. Atterra all’altezza della x, misurata con measureText('x').actualBoundingBoxAscent, più un filo d’aria.

La caduta e il rimbalzo

La caduta è un power2.in (accelera come la gravità), con l’angolo che passa da 34 a 10 gradi; al contatto l’angolo va a zero con un elastic.out e l’altezza fa due rimbalzi, il secondo un quarto del primo. Il valore BOUNCE scala le altezze e la radice dei tempi, come un rimbalzo vero.

L’accento tonico

Nell’istante del colpo la lettera passa dal peso leggero al pieno con 50 punti di troppo in 90 millesimi, poi torna giusta; la sua scatola si schiaccia a 0,9 e torna con un elastic.out. Le vicine scendono del 3,2% della loro altezza diviso la distanza (yPercent, che resta giusto anche cambiando misura alla finestra), sfalsate di 35 millesimi per lettera.

Tutto si misura a ogni fotogramma

Quando la lettera ingrassa la parola si allarga: la funzione sul ticker la ricentra e rilegge offsetLeft della lettera per mettere l’accento, così l’accento la segue mentre le vicine si spostano. La piega della riga è una curva quadratica che scende sotto la lettera colpita.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORDS`	script.js	`['café', 'rosé', 'résumé']`	Le parole, scritte con i loro accenti acuti o gravi: una alla volta, l’accento cade dove l’hai messo (fino a sei parole).
`LIGHT`	script.js	`300`	Il peso delle lettere senza accento (200 a 800).
`STRESS`	script.js	`720`	Il peso della lettera quando l’accento la colpisce (200 a 800).
`BOUNCE`	script.js	`1`	Quanto rimbalza l’accento: 0 si posa secco, 2 rimbalza più in alto.
`GRAVITY`	script.js	`1`	Quanto è veloce la caduta: 2 un mondo più pesante, 0.5 più leggero.
`HOLD`	script.js	`1.6`	Secondi in cui la parola accentata resta ferma.

Provali nel Playground

Quando usarla

Per un titolo spiritoso e preciso: l’apertura di un caffè, di un’enoteca o di un bistrot, un blog di lingue o di parole, la pagina del curriculum in un portfolio, un sito di traduzioni o di correzione di bozze.

Sul telefono

La stessa animazione con le misure adattate: la parola più lunga riempie l’80% della larghezza, la riga non esce mai dai bordi e gli accenti cadono dalla stessa altezza in proporzione.

Con il movimento ridotto

Niente cade e niente si sposta: le parole compaiono già accentate, con le lettere accentate già piene, una dopo l’altra in dissolvenza.

Trappole

Una posizione calcolata una volta sola lascerebbe l’accento indietro quando la lettera ingrassa e spinge le vicine: la posizione si rilegge a ogni fotogramma, e la parola si ricentra.
Scritta da tastiera, la «é» è un carattere solo e l’accento non si trova: si scompone tutto con normalize('NFD') e si cercano i segni combinanti coi loro codici (769, 768), senza scriverli nel codice.
Nelle prime prove l’accento era troppo lontano dalla lettera e troppo sottile, sembrava un apostrofo: ora atterra all’altezza della x più il 3,5% della grandezza del carattere, e in cima è più largo.
Le vicine che si abbassano in pixel calcolati all’avvio scenderebbero troppo o troppo poco dopo un cambio di misura della finestra: si muovono in yPercent.

Librerie

GSAP 3.15.0, Newsreader (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 5,4 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 19 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.