Il banner dei cookie
Consenso, Transizioni, SVG, Fisica
NuovaGratis
Tutti i componenti
Il biglietto che diventa la sala
Il biglietto di un concerto in un anfiteatro all'aperto: mostrato alla porta, lo schermo va alla luce piena e la riga rossa del lettore legge il codice. Entrati, il codice non serve più: le sue barre si staccano dalla carta e si piegano, fila dopo fila, nella pianta della sala, col palco, il tuo posto in ambra e la strada per arrivarci.
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 ticket that becomes the hall</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/imbue@5.3.0/opsz.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/schibsted-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the ticket of a concert in an open-air amphitheatre, as the app that sold it shows it. Shown at the door,
the screen brightens for the scanner and a red line of light reads the barcode; once you are in, the bars
of the barcode lift off the paper and bend into the plan of the hall, with your seat and the way to it.
The bars, the hall and the icons are drawn by the script -->
<section class="pass" aria-label="Concert ticket" data-pass>
<div class="pass__glow" aria-hidden="true" data-glow></div>
<article class="ticket" data-ticket>
<header class="head">
<p class="head__venue">
<svg class="head__mark" viewBox="0 0 24 24" aria-hidden="true">
<path d="M2.5 6.5h19M8.6 6.5a3.4 3.4 0 0 0 6.8 0M5.4 6.5a6.6 6.6 0 0 0 13.2 0M2.5 6.5a9.5 9.5 0 0 0 19 0"/>
</svg>
<span>Cove Amphitheatre</span>
</p>
<p class="head__date"><time datetime="2026-10-10T20:45">Sat 10 Oct</time></p>
<h2 class="head__artist">Ilse Varga</h2>
<p class="head__tour">The Tide Sessions</p>
<!-- the moon rising on the sea, behind the empty side of the head -->
<svg class="head__sea" viewBox="0 0 120 64" aria-hidden="true">
<path class="head__moon" d="M60 50a24 24 0 0 1 48 0z"/>
<path class="head__line" d="M0 50.5h120"/>
<path class="head__wave" d="M52 55h64M64 59h40M76 63h16"/>
</svg>
</header>
<!-- the entrance, the row and the seat are written by the script, from ROW and SEAT in script.js -->
<dl class="facts">
<div class="fact"><dt>Doors</dt><dd>19:30</dd></div>
<div class="fact"><dt>Show</dt><dd>20:45</dd></div>
<div class="fact"><dt>Tier</dt><dd>Lower</dd></div>
<div class="fact fact--big"><dt>Entrance</dt><dd data-door></dd></div>
<div class="fact fact--big"><dt>Row</dt><dd data-row></dd></div>
<div class="fact fact--big"><dt>Seat</dt><dd data-seat></dd></div>
</dl>
<p class="holder"><span>Leni Arnau</span><span>Adult, €48.00</span></p>
<div class="perf" aria-hidden="true" data-perf></div>
<div class="code" data-code>
<p class="note" data-note>
<span class="note__icon" aria-hidden="true" data-note-icon></span>
<span class="note__text" data-note-text>Scan at Door 3 from 19:30</span>
</p>
<div class="code__box">
<svg class="code__svg" viewBox="0 0 300 156" role="img" aria-label="Barcode of ticket 4021 8860 1427 39" data-svg></svg>
<div class="laser" aria-hidden="true" data-laser><i class="laser__glow"></i><i class="laser__core"></i></div>
</div>
</div>
</article>
<button class="show" type="button" data-show data-autoclic>
<span class="show__icon" aria-hidden="true" data-show-icon></span>
<span class="show__label" data-show-label>Show at the door</span>
</button>
<p class="sr" aria-live="polite" data-live></p>
</section>
</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.
39 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 biglietto che diventa la sala» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero il biglietto di un concerto, come lo mostra l'app che l'ha venduto. In alto, sul blu scuro del mare di notte, Cove Amphitheatre col suo segno, Sat 10 Oct, il nome Ilse Varga in un bodoni stretto, The Tide Sessions e una mezza luna che sorge sul mare; sotto, sulla carta color pietra, Doors 19:30, Show 20:45, Tier Lower e in grande Door 3, F e 14, il nome di chi ha il biglietto e il prezzo; poi la perforazione con le due mezzelune e il codice a barre col suo numero, sotto la riga Scan at Door 3 from 19:30. Sotto il biglietto il pulsante Show at the door. All'arrivo le barre cadono sulla carta una dopo l'altra. Passando col puntatore sul codice, le barre vicine si sollevano appena dalla carta con la loro ombra, come tasti sfiorati. Premendo Show at the door lo schermo va alla luce piena: la carta diventa bianca e intorno al biglietto, nel buio, si accende un alone; la riga di luce rossa del lettore si posa sul codice tremando un poco come una mano, rossa sulla carta e invisibile sulle barre nere, legge con un lampo e si spegne. La riga dice Admitted at 19:42 con una spunta che si disegna, e il biglietto dà un piccolo colpo. Poi il codice non serve più: le sue barre si staccano dalla carta, le file in fondo per prime, volano piegandosi e diventano la pianta dell'anfiteatro: dieci file ad arco in tre spicchi divisi da due corridoi, il muro di fondo con Door 3 e Door 4, e il palco, che arriva per ultimo come un arco sottile e si riempie in un mezzo disco con la scritta Stage. Le file si dividono in posti, il tuo diventa ambra con un rimbalzo e un tratteggio ambra disegna la strada da Door 3, su per il corridoio e lungo la fila, fino a lui; la riga dice Row F, seat 14: left aisle from Door 3. Col puntatore sulla pianta si solleva la fila che c'è sotto. Back to the code rifà tutto all'indietro, e il codice torna con la riga To re-enter, show it at Door 3.
Come funziona
Un Code 128 vero
Il numero del biglietto, 14 cifre, è scritto in un Code 128 col set C: il simbolo d'inizio C, le cifre due alla volta, il controllo (ogni valore per il suo posto, modulo 103) e il simbolo di fine. Ogni simbolo è una fila di sei larghezze da 1 a 4 moduli (sette per la fine); un modulo è 2 pixel e le barre cadono su pixel interi, così il codice è nitido e un lettore lo leggerebbe davvero. Escono sempre 31 barre.
Ogni barra è un arco
Ogni barra si disegna come un pezzo di cerchio descritto da cinque numeri: il punto di mezzo, la direzione lì, la curvatura (1 diviso il raggio, 0 se è dritta), la lunghezza e la larghezza. Gli estremi vengono dal mezzo: x + (sin(a ± c·L/2) − sin a)/c e y + (cos a − cos(a ± c·L/2))/c, e il path è un comando A dell'SVG col tratto largo quanto la barra; con la curvatura quasi a zero diventa una linea. Così la stessa barra dritta del codice si piega, senza cambiare elemento, nell'arco di una fila. Il giro disegnato si ferma poco oltre mezzo cerchio, o una barra ancora lunga e già molto curva si avvolgerebbe su sé stessa.
Dal codice alla sala
La sala ha esattamente 31 pezzi: il palco, un mezzo disco, e dieci file per tre spicchi. Le dieci barre a sinistra del codice diventano lo spicchio di sinistra (la più esterna la fila in fondo), le dieci a destra quello di destra, quella di mezzo il palco e le altre lo spicchio di mezzo, le più vicine al centro davanti. Un arco si può percorrere nei due versi: ogni barra prende quello che la fa girare di meno, e in mezzo, dove i due versi si equivalgono, girano tutte nello stesso verso, così due barre che si incrociano in volo non fanno mai una X.
Le molle e il volo
Ognuna delle nove grandezze di una barra (mezzo, direzione, curvatura, lunghezza, larghezza, il sollevarsi in volo, quello sotto il puntatore e il colore) ha la sua molla, multipla di SPRING, calcolata sul ticker di GSAP a passi di 1/240 di secondo col fotogramma limitato a 1/30; quando tutto è fermo il ciclo si spegne. Una timeline di GSAP cambia solo i bersagli: le file in fondo partono per prime, una ogni STAGGER secondi, così nessuna barra attraversa file già al loro posto; il palco parte per ultimo, sottile, e si allarga nel mezzo disco dopo essersi posato. In volo la barra si alza di LIFT e cresce un poco, e la sua ombra, un gruppo sfocato con feGaussianBlur, resta sulla carta.
I posti e la strada
Posate, le file si dividono in posti con stroke-dasharray: lo stesso numero di posti, coi vuoti che crescono da 0 a 1,8 pixel e i posti che si accorciano, a onda dal palco in fuori. Il tuo posto viene dalla fila e dal numero (contati da sinistra attraverso gli spicchi), insieme al corridoio più vicino e alla sua porta; un arco ambra appena più grande lo copre con un rimbalzo, e la strada tratteggiata si disegna con una maschera: un tratto pieno con pathLength 1 il cui stroke-dashoffset va da 1 a 0.
La luce piena e il lettore
Show at the door porta a 1 la variabile --lum: la carta passa dal color pietra al bianco con color-mix, e un alone bianco sfocato dietro al biglietto si accende nel buio, in proporzione a GLOW. Il lettore è una riga rossa col suo bagliore, in mix-blend-mode multiply sopra il codice: rossa sulla carta bianca e nera sulle barre nere, come la luce vera. Trema con due seni come una mano per SCAN secondi, legge con un lampo e si spegne.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TICKET | script.js | '40218860142739' | Il numero del biglietto, 14 cifre: lo script lo scrive in un Code 128 vero (con meno cifre aggiunge degli zeri). |
ROW | script.js | 'F' | La tua fila, da A vicino al palco a J in fondo. |
SEAT | script.js | 14 | Il tuo posto nella fila, contato da sinistra: decide anche il corridoio e la porta. |
ADMITTED | script.js | '19:42' | L'ora in cui la porta ti fa entrare. |
SPRING | script.js | [150, 0.62] | Le molle delle barre: quanto sono rigide e quanto sono frenate (1 = senza rimbalzi). |
LIFT | script.js | 1 | Quanto si sollevano le barre dalla carta in volo (0 = scivolano piatte). |
STAGGER | script.js | 0.045 | I secondi fra una fila della sala e la successiva. |
SCAN | script.js | 0.7 | I secondi in cui la luce del lettore resta sul codice prima di leggerlo. |
GLOW | script.js | 0.6 | Quanto brilla il biglietto nel buio mentre lo mostri alla porta. |
Quando usarla
Per l'app di biglietti di concerti, teatri, stadi o cinema; per la pagina che si apre dopo l'ingresso; per il pass di una conferenza con la sala e il posto; ovunque un codice, una volta usato, possa diventare qualcosa di utile.
Sul telefono
Il biglietto è largo 340 pixel e sta in uno schermo di 390; col dito si tocca il pulsante e tutto va come col mouse. Il sollevarsi delle barre e delle file sotto il puntatore c'è solo col mouse: col dito basta il pulsante.
Con il movimento ridotto
Niente si sposta: la luce piena è solo il colore della carta e l'alone che si accende, il lettore compare e scompare fermo, e il codice si dissolve nella sala già formata, coi posti, il tuo posto e la strada già disegnata; all'indietro la sala si dissolve nel codice. All'arrivo le barre sono già sulla carta e sotto il puntatore non si sollevano.
Trappole
- Il laser non si vedeva: la maschera che ne sfuma le estremità stava su un elemento alto zero, e una maschera prende la misura dell'elemento. Il laser ha un'altezza vera e le sue due righe stanno dentro.
- mix-blend-mode multiply sulle due righe del laser si mescolava solo dentro il laser (la maschera e l'opacità lo isolano), e il rosso copriva anche le barre nere: il multiply sta sull'elemento intero, che così si mescola al codice sotto, rosso sulla carta e nero sulle barre.
- Il palco, una barra ancora lunga 80 pixel ma già curva quanto il suo raggio di 12, andava oltre un giro intero e il comando A dell'SVG disegnava un pezzo a caso: il giro disegnato si ferma poco oltre mezzo cerchio.
- In volo il palco era un tratto largo 24 pixel su un raggio di 12, e diventava una mezzaluna col morso: vola sottile e si allarga nel mezzo disco solo dopo essersi posato (e all'indietro si assottiglia prima di partire).
- Le barre di mezzo giravano metà in un verso e metà nell'altro e si incrociavano a X, e le file davanti, partite per prime, venivano attraversate dalle ultime: girano tutte nello stesso verso e partono prima le file in fondo.
- L'entrata del pulsante con un transform di GSAP litigava con la transizione CSS del transform che serve per la pressione, e arrivava a scatti: l'entrata muove quello che c'è dentro il pulsante.
- Il clic dell'anteprima ogni 2,8 secondi arrivava mentre la sala si stava ancora formando e la rimandava indietro: i clic da script (non fidati) aspettano che la sala sia finita, un tocco vero invece può fermarla a metà, perché le molle cambiano bersaglio da dove sono.
- color-mix() non c'è nei Safari prima del 16.2 e il biglietto sarebbe rimasto trasparente: ogni color-mix ha prima un colore normale di ripiego.
Librerie
GSAP 3.15.0, Imbue (font variabile) 5.3.0, Schibsted Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 6 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.
