Certificati che si impilano
Hover, Immagini
NuovaGratis
Torna alla libreria
Lo specchio deformante
Lo specchio di un luna park inventato, con la cornice dorata e le lampadine accese: dentro c’è il riflesso di un tendone da circo. Il puntatore gonfia, trascina e fa ondeggiare il disegno, che torna a posto con un elastico; un clic cambia la curva del vetro: concavo, convesso, a onde.
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 funhouse mirror</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<h1 class="sign" data-sign>Hall of Mirrors</h1>
<!-- the button is exactly the glass: the frame, the crest and the plaque hang outside it -->
<button class="mirror" type="button" data-mirror aria-label="Funhouse mirror: click to change the curve of the glass">
<span class="mirror__drop" data-drop>
<span class="mirror__tilt" data-tilt>
<span class="glass" data-glass>
<canvas class="glass__canvas" data-canvas></canvas>
<span class="glass__sheen" data-sheen></span>
<span class="glass__shade"></span>
</span>
<svg class="frame" data-frame aria-hidden="true"></svg>
</span>
</span>
</button>
<p class="hint" data-hint>Move over the glass, click to bend it</p>
<p class="sr" aria-live="polite" data-said></p>
</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.
21 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 «Lo specchio deformante» da Animorio e adattala al mio sitoCosa fa
Su un fondo di notte, sotto la scritta «Hall of Mirrors» che cade lettera per lettera con un rimbalzo, arriva uno specchio ad arco con una cornice dorata: scende, si schiaccia un poco e si assesta; le lampadine lungo la cornice spuntano dal centro verso i lati e si accendono, poi restano accese ferme. Un riflesso di luce corre sull’oro. Nel vetro c’è una sera al luna park di Marigold Pier: il tendone a strisce rosse e crema con la bandierina, il titolo ad arco, una ruota panoramica, i palloncini, le bandierine appese, la luna e le stelle, il pontile di legno. Il vetro, piatto all’inizio, si piega con un elastico nella prima curva, concava, e un anello d’onda corre dal centro verso i bordi. Quando il puntatore passa sul vetro il disegno si gonfia sotto di lui come una bolla, viene trascinato nella direzione in cui si muove e manda piccole onde; lo specchio si inclina appena verso il puntatore e il riflesso della luce lo segue. Quando il puntatore se ne va, la bolla torna indietro con un elastico: passa per uno schiacciamento e poi si ferma. Un clic cambia la curva: concava fa tutto alto e magro, convessa basso e largo, a onde fa ondeggiare il disegno di continuo. Il vetro supera la nuova forma e ci torna dentro, un anello parte dal punto del clic, la cornice prende il colpo e la targhetta in basso si gira sul nome nuovo. Finché nessuno clicca, la curva cambia da sola ogni tanto.
Come funziona
Un disegno nascosto
La scena del luna park si dipinge una volta sola su una canvas che non si vede, con l’API 2D: cielo a sfumatura, stelle, luna, il titolo lettera per lettera su un arco, la ruota, i palloncini, il pontile, il tendone con le strisce ritagliate dentro la sua sagoma. Tutte le misure sono in centesimi della larghezza, così il disegno è uguale a ogni grandezza. Poi getImageData ne prende i pixel: sono la sorgente che lo specchio legge.
Il vetro che piega
A ogni fotogramma, per ogni pixel della canvas visibile, si calcola da quale punto del disegno deve leggere. La curva del vetro è una funzione semplice delle coordinate fra meno uno e uno: u più k per u per (1 meno u al quadrato). Con k positivo in orizzontale e negativo in verticale il centro diventa stretto e alto (concavo), al contrario basso e largo (convesso); ai bordi la funzione vale sempre uno, quindi il disegno non si stacca mai dalla cornice. Le onde sono due seni, smorzati verso i bordi, con la fase che avanza nel tempo.
La bolla sotto il puntatore
Intorno al puntatore una campana di Gauss sposta la lettura verso il centro (il disegno si gonfia) o lontano (si schiaccia): basta un numero, swell, che GSAP porta su con elastic.out quando il puntatore entra e a zero quando esce, e l’elastico, passando sotto lo zero, fa lo schiacciamento. La velocità del puntatore muove una piccola molla che trascina il disegno, e accende onde circolari. Il conto si fa solo nel quadrato intorno al puntatore, e la lettura è bilineare, così le parti allungate restano morbide.
Il clic
Le tre curve sono tre pesi in un oggetto: un clic porta a uno il peso nuovo e a zero gli altri con elastic.out, così il vetro supera la forma e ci torna. Nello stesso momento un anello d’onda parte dal punto del clic e si allarga fino ai bordi, la cornice si schiaccia e rimbalza, un riflesso corre sull’oro (un rettangolo sfumato dentro un clipPath della cornice) e la targhetta si chiude in scaleY e si riapre col nome nuovo. Un delayedCall cambia la curva da solo finché nessuno clicca davvero (isTrusted).
La cornice e le lampadine
La cornice è un SVG costruito dallo script sulla misura dello specchio: l’arco esterno e quello interno in un tracciato solo con fill-rule evenodd, un gradiente dorato, le smussature, la conchiglia in cima e la targhetta. Le lampadine stanno sulla linea di mezzo della cornice, messe in fila con getPointAtLength, e saltano quelle che cadrebbero sotto la conchiglia o la targhetta. Si accendono una volta all’entrata e poi restano ferme. Il pulsante è grande quanto il vetro e tutto quello che c’è dentro ha pointer-events none, così il puntatore incontra sempre un elemento solo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TITLE | script.js | 'Marigold Pier' | Il titolo dipinto ad arco nel cielo del riflesso: se è lungo, le lettere si rimpiccioliscono per starci. |
CURVE | script.js | 1 | Quanto è curvo il vetro: 0 è uno specchio piatto, 1.5 deforma moltissimo. |
RADIUS | script.js | 0.3 | La grandezza della bolla sotto il puntatore, in larghezze dello specchio. |
SWELL | script.js | 0.42 | Quanto la bolla ingrandisce; tornando indietro l’elastico la porta a uno schiacciamento. |
WOBBLE | script.js | 1 | Quanto il disegno viene trascinato e fa onde quando il puntatore si muove (0 = solo la bolla). |
SETTLE | script.js | 1.6 | I secondi dell’elastico quando cambia la curva o il puntatore se ne va. |
AUTO | script.js | 2.4 | Ogni quanti secondi la curva cambia da sola, finché qualcuno non clicca (0 = solo col clic). |
Quando usarla
Per la pagina di un luna park, di un circo, di un festival o di un evento estivo, per un gioco o una pagina di benvenuto che deve far sorridere, o per mostrare un’illustrazione in un modo che invita a toccarla. Al posto della scena si può dipingere qualsiasi disegno: lo specchio legge i pixel di una canvas.
Sul telefono
La stessa animazione con lo specchio largo quasi quanto lo schermo. Il dito che tocca e scorre sul vetro fa la bolla, la trascina e la lascia tornare con l’elastico quando si stacca; un tocco senza strisciare cambia la curva.
Con il movimento ridotto
Niente si muove: scritta, specchio e frase compaiono in dissolvenza con il vetro già concavo. Il puntatore non deforma il disegno; al cambio di curva il vetro si spegne un attimo e si riaccende con la curva nuova già al suo posto.
Trappole
- Con la curva che porta il disegno oltre i bordi, il vetro mostrava strisce vuote: la funzione u più k per u per (1 meno u al quadrato) vale uno ai bordi, quindi la lettura non esce mai, e il coefficiente resta sotto 0,4 perché l’elastico, superando il peso, non la faccia ripiegare su se stessa.
- Dentro il pulsante la canvas, la luce e l’ombra prendevano il puntatore a turno e ogni passaggio da uno all’altro valeva come un’uscita: tutto il contenuto ha pointer-events none e il pulsante è grande quanto il vetro.
- Ricalcolare tutti i pixel a ogni fotogramma costa: la canvas ha al massimo 260 mila pixel (il CSS la allarga), le parti della curva che dipendono da una sola coordinata si calcolano una volta per riga e per colonna, la bolla solo nel quadrato intorno al puntatore, e quando niente si muove non si disegna.
- Sul telefono il dito che striscia sul vetro finiva anche con un clic e cambiava la curva: il clic conta solo se il dito si è mosso meno di dieci pixel.
- Il titolo nel riflesso usa il carattere della pagina: la scena si dipinge dopo document.fonts.load (con un tempo massimo), altrimenti resta col carattere di riserva.
- Il cambio automatico della curva si ferma al primo clic vero: senza il controllo su isTrusted, si sarebbe fermato anche col clic finto del pilota automatico.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 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.
