Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Il titolo ritagliato dal giornale
Un titolo a collage, come una lettera anonima: ogni lettera è un ritaglio diverso di giornale o rivista, arriva volteggiando come un foglietto, si posa storta e un pezzo di nastro adesivo la fissa con uno strappo. Col puntatore la sollevi, con un clic si staccano tutte e si riattaccano con ritagli nuovi.
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 cut-out title</title>
<!-- the typefaces of the cuttings: every letter is cut from a different paper, set in a different face -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bodoni-moda@5.3.0/standard.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bodoni-moda@5.3.0/standard-italic.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/standard.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/big-shoulders-display@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/unbounded@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/league-gothic@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/courier-prime@5.3.0/400.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/courier-prime@5.3.0/700.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="js-attesa">
<!-- the cover of a fanzine: a photocopied sheet, two typed strips and the title pasted on letter by letter.
Click or tap anywhere (or press Enter) and the letters come unstuck and are pasted back from new cuttings -->
<main class="scena" data-scena data-autoclic>
<p class="striscia striscia--sopra" data-striscia>
<span class="striscia__carta" data-striscia-carta>Independent press weekend</span>
<span class="nastro nastro--striscia" data-striscia-nastro><span class="nastro__velo"></span></span>
</p>
<!-- the script cuts every letter out: a paper, a face, a crooked scissor cut, a shadow and a strip of tape -->
<h1 class="titolo" data-titolo></h1>
<p class="striscia striscia--sotto" data-striscia>
<span class="striscia__carta" data-striscia-carta>Zines, riso & small presses. Old Tram Depot, 14 to 16 May</span>
<span class="nastro nastro--striscia" data-striscia-nastro><span class="nastro__velo"></span></span>
<span class="nastro nastro--striscia" data-striscia-nastro><span class="nastro__velo"></span></span>
</p>
<p class="nota" data-nota>Click or tap to cut it up again</p>
<button class="sr" type="button" data-di-nuovo>Cut the title up again</button>
</main>
<!-- an invisible SVG to measure the letters in their faces before cutting them out -->
<svg class="misura" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><text data-misura>M</text></svg>
<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.
32 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 «Il titolo ritagliato dal giornale» da Animorio e adattala al mio sitoCosa fa
È la copertina di una fanzine inventata, Paper Riot, per un fine settimana di piccoli editori: un foglio fotocopiato con la grana del toner, una striscia battuta a macchina in alto e una in basso. Il titolo arriva lettera per lettera: ogni lettera è un ritaglio diverso (carta di giornale con un pezzo di articolo sul bordo, pagina lucida rossa o blu col riflesso, retino giallo o arancio, cartoncino a righe, carta nera, rosa, verde, viola), con un carattere e un colore diversi, maiuscola o minuscola, e un taglio di forbice storto, a volte con un angolo mozzato. Scende dall'alto ondeggiando e girando come un foglietto, con l'ombra che si avvicina mentre cala; si posa storta, si schiaccia un attimo e un pezzo di nastro adesivo semitrasparente le passa sopra di scatto, sul bordo o di traverso su un angolo, con un piccolo rimbalzo. Poi arrivano le due strisce, fissate anche loro col nastro. Col puntatore sopra una lettera il nastro si stacca da un lato e il ritaglio si alza dal foglio, con l'ombra che si allontana; tolto il puntatore, ricade con un elastico. Con un clic il nastro vola via, tutte le lettere saltano e girano, a metà giro si voltano e diventano ritagli nuovi, e si riattaccano una alla volta in un ordine diverso.
Come funziona
Un posto fisso per ogni lettera
Ogni lettera ha un posto largo quanto la sua maiuscola nei caratteri più larghi, misurato una volta sola: qualunque ritaglio arrivi dopo, il titolo non si sposta. Tutte le misure sono in altezze di lettera (la variabile CSS --l), così basta cambiare --l per adattare il titolo alla finestra.
Il taglio di forbice
Il ritaglio è un div con la carta disegnata in CSS (tinta, retino con radial-gradient, righe con repeating-linear-gradient, riflesso lucido) e un clip-path polygon: quattro angoli spostati un po' verso l'interno, qualche taglio dritto su ogni lato e a volte un angolo mozzato. L'ombra è la stessa forma, scura e sfocata, in un elemento a parte che GSAP sposta.
La lettera nel suo carattere
La lettera è un testo SVG: la larghezza la dà getComputedTextLength (che conosce larghezza e assi del carattere variabile), l'inchiostro sopra e sotto la riga di base measureText di una canvas. Con questi numeri la lettera riempie il ritaglio ed è centrata davvero, anche una minuscola o una lettera scritta solo col contorno.
Il volo del foglietto
La discesa è una timeline: y scende in tutto il tempo, mentre x, rotation, rotationX e rotationY fanno tre oscillazioni sempre più piccole, con transformPerspective per il giro in 3D. L'ombra parte larga e chiara e si stringe quando la lettera tocca; poi uno schiacciamento e un elastico.
Il nastro e il clic
Il nastro arriva con scaleX da 0 da un'estremità, supera la misura e torna con un elastico, e intanto spinge di lato il ritaglio. Al clic il nastro vola via, le lettere saltano e girano su rotationY: a 90 gradi, quando la carta è di taglio, si cambia ritaglio e si riparte da meno 90. Poi tornano al loro posto in un ordine mescolato.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TITLE | script.js | 'Paper Riot' | Il titolo: ogni lettera diventa un ritaglio, uno spazio comincia una parola nuova. |
TILT | script.js | 8 | Quanto stanno storti i ritagli, in gradi da una parte e dall'altra. |
FLUTTER | script.js | 1 | Quanto ondeggiano e girano i ritagli mentre scendono (0 = cadono dritti). |
GAP | script.js | 0.13 | I secondi fra un ritaglio e il successivo. |
LIFT | script.js | 14 | Quanto si alza un ritaglio col puntatore sopra, in pixel. |
TAPE | script.js | 0.55 | Quanto è coprente il nastro: 0 trasparente, 1 pieno. |
SPEED | script.js | 1 | 2 = due volte più veloce, 0,5 = la metà. |
Quando usarla
Per il titolo di qualcosa di fatto a mano o di ribelle: la copertina di una fanzine, la pagina di un festival indipendente, un concerto punk, una mostra di grafica, una rivista di collage, il lancio di un disco, un post per i social. Funziona meglio con titoli corti, di una o due parole.
Sul telefono
La stessa animazione con le misure adattate: le lettere si fanno più piccole perché la parola più lunga stia nella larghezza, le parole vanno a capo e le strisce battute a macchina si dividono in due righe. Senza puntatore niente sollevamento: un tocco rimescola i ritagli.
Con il movimento ridotto
Niente vola e niente gira: i ritagli compaiono in dissolvenza già al loro posto, storti, col loro nastro, e poi le strisce. Al clic svaniscono e ricompaiono in dissolvenza con ritagli nuovi. Col puntatore sopra non si alzano.
Trappole
- Con la carta ritagliata da clip-path, una box-shadow o un drop-shadow sulla carta stessa viene tagliati anche loro: l'ombra è un elemento a parte con la stessa forma e il blur sul genitore, perché filter viene prima del ritaglio.
- Se la larghezza di una lettera dipendesse dal ritaglio, ogni rimescolata farebbe saltare il titolo: il posto si misura una volta sola, coi caratteri più larghi, e ogni ritaglio nuovo ci entra dentro.
- Una canvas non conosce gli assi dei caratteri variabili (la larghezza di Archivo a 62 o 125): la larghezza si prende dal testo SVG, che li applica, e dalla canvas solo l'inchiostro sopra e sotto la riga di base.
- Sul telefono il nastro delle strisce, che esce un po' dal bordo, allargava la pagina e la finestra diventava più larga dello schermo: overflow hidden sulla radice e la larghezza presa da clientWidth.
- Cambiare ritaglio con la carta di fronte si vedrebbe: il cambio avviene a rotationY 90, quando la carta è di taglio, e il giro riparte da meno 90 perché la lettera non si veda allo specchio.
Librerie
GSAP 3.15.0, Bodoni Moda, Fraunces, Archivo, Big Shoulders Display, Unbounded, League Gothic (font variabili) 5.3.0, Courier Prime 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 11 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.
