Il titolo che si alza dalla linea
Transizioni, Testo, Immagini
NuovaGratis
Torna alla libreria
La squadra che si guasta
Un ritratto tagliato in cinque cornici che si disegnano da sole, partendo dal centro. Scegliendo un altro nome della squadra ogni cornice si rompe in strisce che scivolano di lato, con due copie luminose che tremano, e nel momento peggiore del disturbo sotto cambia la faccia.
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 crew that glitches</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/chakra-petch@5.3.0/500.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/chakra-petch@5.3.0/700.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the crew page of a night radio: one portrait cut into five frames that draw themselves out from their centre;
pick another name and every frame tears into sliding strips, and under the noise the face changes -->
<main class="pagina" data-pagina>
<header class="testa">
<p class="testa__marchio">Night Shift Radio</p>
<h1 class="testa__titolo">Six voices,<br>one night shift.</h1>
</header>
<div class="nomi" role="radiogroup" aria-label="Crew" data-nomi>
<button type="button" role="radio" aria-checked="false" data-nome="0" data-autoclic>ines<span>host</span></button>
<button type="button" role="radio" aria-checked="true" data-nome="1" data-autoclic>otto<span>producer</span></button>
<button type="button" role="radio" aria-checked="false" data-nome="2" data-autoclic>remi<span>sound</span></button>
<button type="button" role="radio" aria-checked="false" data-nome="3" data-autoclic>sol<span>music</span></button>
<button type="button" role="radio" aria-checked="false" data-nome="4" data-autoclic>juno<span>news</span></button>
<button type="button" role="radio" aria-checked="false" data-nome="5" data-autoclic>tavi<span>late nights</span></button>
</div>
<!-- the five frames: the whole portrait and four close-ups of it -->
<div class="palco" data-palco aria-live="polite">
<div class="cornice cornice--grande" data-cornice data-taglio="0.5,0.5,1"></div>
<div class="cornice cornice--alto" data-cornice data-taglio="0.6,0.33,2.6"></div>
<div class="cornice cornice--sinistra" data-cornice data-taglio="0.4,0.46,2.4"></div>
<div class="cornice cornice--basso" data-cornice data-taglio="0.2,0.86,2"></div>
<div class="cornice cornice--destra" data-cornice data-taglio="0.72,0.8,1.7"></div>
<p class="sr" data-chi></p>
</div>
</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.
31 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 squadra che si guasta» da Animorio e adattala al mio sitoCosa fa
La pagina della squadra di una radio notturna inventata, Night Shift Radio, in verde lime su un fondo quasi nero: a sinistra il titolo e i sei nomi, ognuno col suo ruolo, a destra cinque cornici sullo stesso ritratto, una grande con la persona intera e quattro più piccole intorno con dei dettagli ingranditi. All’apertura ogni contorno parte da un punto nel suo centro e si allarga fino alla sua misura, mentre i quattro quadratini degli angoli volano ai loro posti, e le immagini dentro spuntano crescendo. Scegliendo un nome, quello finisce su una pillola lime e tutte e cinque le cornici si guastano insieme per meno di un secondo: strisce dell’immagine scivolano a destra e a sinistra, sempre di più e poi sempre di meno, e due copie luminose si spostano di qualche pixel; a metà, quando il disturbo copre tutto, sotto c’è già la persona nuova. Muovendo il mouse le cornici lo seguono un poco, ognuna di una misura diversa, come se stessero a distanze diverse.
Come funziona
I ritratti
Lo script dipinge i sei ritratti in grigio su un canvas fuori dallo schermo: spalle, collo, testa con luce da un lato, occhi, bocca e una pettinatura diversa per ognuno. Poi li sfoca e li trasforma in due colori, il buio e la luce del foglio di stile, con una riga più scura ogni tre come su uno schermo vecchio.
Le cinque cornici
Ogni cornice dice in data-taglio quale parte del ritratto mostra: il centro del dettaglio e quante volte è ingrandito. Lo script ritaglia quella parte con la forma della cornice e la disegna sul canvas della cornice.
Il contorno che si disegna
Il contorno è un rettangolo SVG che GSAP porta da larghezza e altezza zero, nel centro, alla misura piena, in FRAME secondi con power2.out; i quattro quadratini partono dal centro e arrivano agli angoli. L’immagine dentro passa da scala 0 a 1 in 0,6 secondi con la curva 0,33, 1, 0,32, 1.
Il guasto
Sopra ogni cornice c’è un secondo canvas. Per GLITCH millisecondi la forza sale da 0 a 1 e torna a 0; a ogni fotogramma il canvas copia l’immagine, poi copia da sé stesso tante strisce quante SLICES per la forza, alte un pezzo a caso e spostate a caso fino a SHIFT per la forza. Infine si somma a sé stesso due volte, spostato a destra e a sinistra di GHOST[0] più GHOST[1] per la forza. Sopra COVER il canvas è del tutto opaco, e a metà, sotto, cambia la persona.
Il mouse
Le cornici si spostano seguendo il mouse, ognuna dei centesimi di larghezza scritti in DEPTH, a turno, con una transizione CSS di 0,3 secondi: muovendo il mouse sembrano stare a distanze diverse. Solo dove c’è un mouse vero.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
GLITCH | script.js | 780 | I millisecondi del guasto quando cambia il nome (come nel sito). |
SLICES | script.js | 70 | Quante strisce scivolano nel momento peggiore (nel sito 70). |
SHIFT | script.js | 200 | Quanto può scivolare una striscia nel momento peggiore, in pixel (nel sito 200). |
GHOST | script.js | [2, 10] | Le due copie luminose: quanto si spostano sempre e quanto di più nel momento peggiore (come nel sito). |
COVER | script.js | 0.88 | Sopra questa forza il disturbo copre del tutto l’immagine (nel sito 0,88). |
FRAME | script.js | 0.6 | I secondi in cui i contorni si disegnano dal centro (come nel sito). |
DEPTH | script.js | [0.5, 1.2, 0.8, 1.5] | Quanto seguono il mouse le cornici, a turno, in centesimi della larghezza (quelli del sito). |
Quando usarla
Per la pagina della squadra di uno studio, di una band, di una redazione: si sceglie una persona e il cambio ha il carattere di un canale che salta, invece di una dissolvenza qualsiasi.
Sul telefono
Uguale: le cornici prendono quasi tutto lo schermo e i nomi stanno in fila sotto, da toccare; le cornici non seguono il dito.
Con il movimento ridotto
Niente guasto e niente movimento: le cornici compaiono con una dissolvenza e la faccia vecchia svanisce sopra quella nuova.
Trappole
- I rettangoli SVG creati dallo script devono nascere con x, y, larghezza e altezza scritti: se mancano, la prima animazione di GSAP sui loro attributi parte da un valore vuoto e il browser dà errore.
- Il guasto copia strisce dal canvas su sé stesso: va disegnata prima l’immagine intera di quel fotogramma, altrimenti le strisce portano con sé il disturbo del fotogramma prima e l’immagine si sporca sempre di più.
- La faccia va cambiata nel momento in cui il disturbo è più forte e il canvas è opaco: prima o dopo si vede il salto.
Librerie
GSAP 3.15.0, Chakra Petch 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,5 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 10 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.
