La parola che cambia effetto

Hover, Testo, SVGSolo CSS, GSAPMediaPeso compresso: Demo 5,7 KBGSAP + CustomEase 31 KBGratisScarica lo zip

Una frase e un pannello di blocchi di testo: puntando un blocco, una parola della frase si prova quell’effetto (lettere gonfie, un alone, il resto sfocato, la parola che si allarga) e lo tiene finché non se ne sceglie un altro.

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 word that tries on effects</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the inflated look: the letters grow fatter, their outline becomes a height map, and a light shines on it -->
  <svg class="filters" width="0" height="0" aria-hidden="true" focusable="false">
    <filter id="puff" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
      <feMorphology in="SourceAlpha" operator="dilate" radius="1.6" result="body" />
      <feGaussianBlur in="body" stdDeviation="3.2" result="height" />
      <feSpecularLighting in="height" surfaceScale="5" specularConstant="1" specularExponent="22" lighting-color="#ffffff" result="light">
        <feDistantLight azimuth="225" elevation="50" />
      </feSpecularLighting>
      <feComposite in="light" in2="body" operator="in" result="lit" />
      <feMorphology in="SourceGraphic" operator="dilate" radius="1.6" result="fat" />
      <feComposite in="lit" in2="fat" operator="arithmetic" k1="0" k2="0.85" k3="1" k4="0" />
    </filter>
  </svg>

  <main class="page">
    <header class="top">
      <p class="brand">Spool</p>
      <p class="top__line">Type blocks</p>
    </header>

    <section class="story">
      <div class="story__text">
        <p class="label">Kinetic type</p>
        <h1 class="line">
          <span class="sr">Give every title a look of its own, then keep it as a block.</span>
          <span class="line__visual" aria-hidden="true" data-line>Give <span data-before>every</span> <span class="word" data-word><span class="word__glow" data-glow></span><span class="word__text" data-text>title</span><span class="word__puff" data-puff></span></span> <span data-after>a</span> look of its own, then keep it as a block.</span>
        </h1>
        <p class="note" data-note>Point at a block to try it on the word.</p>
      </div>

      <div class="panel">
        <div class="panel__head">
          <span class="panel__path">Library / Type blocks</span>
          <span class="panel__close" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M7 7l10 10M17 7 7 17" /></svg></span>
        </div>
        <div class="panel__tiles" role="group" aria-label="Type blocks">
          <button class="block" type="button" data-effect="inflate" aria-pressed="false">
            <span class="block__art block__art--inflate"><span>Aa</span></span><span class="block__name">Inflate</span>
          </button>
          <button class="block" type="button" data-effect="glow" aria-pressed="false">
            <span class="block__art block__art--glow">Aa</span><span class="block__name">Glow</span>
          </button>
          <button class="block" type="button" data-effect="focus" aria-pressed="false">
            <span class="block__art block__art--focus">Aa</span><span class="block__name">Focus</span>
          </button>
          <button class="block" type="button" data-effect="stretch" aria-pressed="false">
            <span class="block__art block__art--stretch">Aa</span><span class="block__name">Stretch</span>
          </button>
        </div>
      </div>
    </section>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/CustomEase.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.

44 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 «La parola che cambia effetto» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

A sinistra una frase grande, «Give every title a look of its own, then keep it as a block.»; a destra il pannello scuro di un editor, «Library / Type blocks», con quattro blocchi, Inflate, Glow, Focus e Stretch, ognuno con un «Aa» che mostra il suo effetto. Portando il puntatore su un blocco (o toccandolo) la parola «title» si prova quell’effetto. Con Inflate la parola sparisce e al suo posto crescono cinque lettere gonfie color pastello, una dopo l’altra, mentre le parole accanto si scostano. Con Glow dietro la parola si accende un alone azzurro e rosa. Con Focus il resto della frase va fuori fuoco, sempre di più allontanandosi dalla parola. Con Stretch la parola si allarga con un rimbalzo e il resto della frase si stringe. L’effetto resta finché non se ne sceglie un altro.

Come funziona

La frase a lettere

La frase è divisa in lettere, con ogni parola intera in uno span che non va a capo; per ogni lettera lo script ricorda quante lettere la separano dalla parola scelta. La parola ha tre strati: un alone dietro, il testo, e sopra una fila di lettere gonfie a scala 0.

Inflate

Le lettere gonfie sono lettere vere con un filtro SVG: l’alfa del glifo si allarga di 1,6 px (feMorphology), si sfuma di 3,2 px e diventa una mappa d’altezza su cui una luce lontana fa il riflesso (feSpecularLighting); il riflesso si somma al colore, allargato anche lui. Crescono da scala 0 con back.out(1) in 0,8 secondi, a 0,02 secondi l’una, da una rotazione casuale di ±20° fino a 0, mentre la parola sotto sparisce e le parole accanto si scostano di 0,05 e 0,12 em.

Glow e Focus

Glow porta l’alone da scala 1 a 1,35 e da trasparente a pieno in 0,8 secondi; l’alone è una sfumatura radiale azzurra e rosa sfocata di 14 px, tenuta dentro la parola con isolation: isolate. Focus sfoca ogni lettera in proporzione alla sua distanza dalla parola, fino a 8 px da 16 lettere in là: la lettera diventa trasparente e la sfocatura è un’ombra del testo del suo stesso colore, che parte dalla parola e si allarga, 0,02 secondi per lettera di distanza.

Stretch

La larghezza del carattere sta in due variabili CSS, una per la parola e una per il resto, lette da font-stretch. Stretch porta la parola al 120% e il resto all’88% con elastic.out(1, 0,45) in 1,3 secondi: il testo si ricompone a ogni fotogramma e la parola rimbalza sulla sua larghezza.

Il pannello

Col mouse basta puntare, col dito o con la tastiera si preme: i blocchi sono bottoni con aria-pressed. Ogni cambio spegne gli altri tre effetti e accende il nuovo in 0,8 secondi; all’apertura si prova da solo Inflate.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`DURATION`	script.js	`0.8`	Quanto dura ogni cambio, in secondi.
`LETTER_GAP, TILT`	script.js	`0.02, 20`	Il ritardo fra le lettere gonfie e quanto si inclinano prima di raddrizzarsi.
`SPREAD`	script.js	`0.05, 0.12`	Quanto si scostano la parola prima e quella dopo, in em.
`BLUR, FALLOFF`	script.js	`8, 16`	La sfocatura massima di Focus, in px, e a quante lettere dalla parola arriva.
`WIDTH`	script.js	`104, 120, 88`	La larghezza del carattere a riposo, della parola allargata e del resto stretto, in percento.
`COLOURS, FIRST`	script.js	`5, inflate`	I colori delle lettere gonfie e l’effetto provato all’apertura.

Provali nel Playground

Quando usarla

Per la pagina di uno strumento grafico, di un catalogo di effetti o di caratteri, o di un marchio che vuole far giocare con il suo nome. Il meccanismo, un pannello che cambia lo stile di una parola, serve anche per scegliere un colore, un tema o un tono.

Sul telefono

Il pannello va sotto la frase con i quattro blocchi in fila e si sceglie toccando; la frase scende a 38 px e l’invito dice di toccare.

Con il movimento ridotto

Gli effetti cambiano di colpo, senza crescite, rimbalzi né sfocature che scorrono: si vede subito il risultato.

Trappole

Un filtro SVG messo su un riquadro con lo sfondo illumina tutto il riquadro: va messo sul testo, dove l’alfa è quella delle lettere.
Con z-index −1 l’alone finisce dietro lo sfondo del body: la parola deve fare da contesto, con isolation: isolate.
Le lettere gonfie devono restare larghe quanto la parola: con un peso o una larghezza maggiori spingono via le parole accanto, e lo scostamento delle vicine non basta più.
GSAP non ricava la rotazione da una matrice a scala zero: la scala di partenza va data con gsap.set, non nel CSS.
In Safari filter: blur() su tante lettere si ferma al bordo del riquadro di ognuna e si vedono dei rettangoli: con la lettera trasparente e un’ombra del testo sfocata, la sfocatura esce libera.

Librerie

GSAP 3.15.0, CustomEase (GSAP) 3.15.0, Mona Sans (font variabile) 5.3.0, JetBrains Mono (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 5,7 KB; le librerie: GSAP + CustomEase 31 KB.

Collaudo

Provata il 28 settembre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

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.