Il pulsante del carrello del popcorn

Pulsanti, Fisica, HoverCanvas, GSAPImpegnativaPeso compresso: Demo 12 KBGSAP 28 KBGratisScarica lo zip

Il Get tickets di un piccolo cinema, nello stile ricco: nella punta tonda della pillola rossa sta un carrellino del popcorn con la vetrina, la tenda a strisce e il pentolino d'acciaio. Al clic i chicchi scoppiano uno dopo l'altro, sbattono sul vetro e si ammucchiano, il pentolino si inclina, lo sportello si apre e il popcorn trabocca sulla pillola; poi da dietro esce un biglietto strappato.

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 popcorn cart button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the popcorn cart button: the Get tickets of a small cinema, with a popcorn cart standing in the round left end
         of the pill. Glass case with a gold frame, a striped canopy, a warm lamp and a steel kettle hanging inside.
         A click heats the kettle: the kernels pop one after the other, fly against the glass and pile up; the kettle
         tips to empty itself, the little door swings open and the popcorn spills onto the pill, one piece bouncing
         away. Then a torn ticket rises from behind the pill: Enjoy the show. A second click sweeps it all away -->
    <div class="pop" data-pop>
      <span class="pop__ticket" aria-hidden="true" data-ticket>
        <svg viewBox="0 0 92 46" width="92" height="46">
          <defs>
            <linearGradient id="tk-paper" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" style="stop-color:var(--ticket)"/>
              <stop offset="1" style="stop-color:var(--ticket-deep)"/>
            </linearGradient>
          </defs>
          <path d="M4 3 H80 L84 6 L80 9 L84 12 L80 15 L84 18 L80 21 L84 24 L80 27 L84 30 L80 33 L84 36 L80 39 L84 42 L80 43 H4 a3 3 0 0 1 -3 -3 V6 a3 3 0 0 1 3 -3 Z" fill="url(#tk-paper)"/>
          <path d="M80 3 H4 a3 3 0 0 0 -3 3 V40 a3 3 0 0 0 3 3 H80" fill="none" style="stroke:var(--gold)" stroke-opacity="0.55" stroke-width="0.8"/>
          <rect x="5" y="7" width="67" height="9" rx="1.5" style="fill:var(--red)"/>
          <text x="38.5" y="14" text-anchor="middle" class="pop__ticket-band">ADMIT ONE</text>
          <text x="38.5" y="29" text-anchor="middle" class="pop__ticket-film" data-ticket-film>Velvet Hour</text>
          <text x="38.5" y="38" text-anchor="middle" class="pop__ticket-seat" data-ticket-seat>Screen 2 · Row F · Seat 7</text>
          <path d="M70 7 v32" style="stroke:var(--red)" stroke-opacity="0.35" stroke-dasharray="1.5 2" stroke-width="0.8"/>
        </svg>
      </span>
      <button class="pop__btn" type="button" data-btn data-autoclic>
        <span class="pop__fill" aria-hidden="true"></span>
        <span class="pop__faces">
          <span class="pop__face" data-face="rest">
            <span class="pop__word" data-label-text>Get tickets</span>
            <span class="pop__time" data-time-text>Fri 9:40</span>
          </span>
          <span class="pop__face pop__face--busy" data-face="busy" aria-hidden="true">
            <span class="pop__shine" data-busy-text>Popping…</span>
          </span>
          <span class="pop__face pop__face--done" data-face="done" aria-hidden="true">
            <span class="pop__done" data-done-text>Enjoy the show</span>
          </span>
        </span>
      </button>
      <canvas class="pop__art" aria-hidden="true" data-art></canvas>
      <p class="sr" aria-live="polite" data-live></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.

35 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 «Il pulsante del carrello del popcorn» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco una pillola rosso cinema con un filo d'oro sul bordo, la scritta Get tickets e l'orario Fri 9:40 in oro. Nella sua punta tonda sinistra sta un carrellino del popcorn: due ruote blu notte con i raggi e il mozzo d'oro, il mobiletto rosso con la fascia d'oro e la targa POPCORN, la vetrina col telaio d'oro e i riflessi sul vetro, dentro la luce calda di una lampada, sopra una tenda a strisce rosse e crema col bordo a festoni e una bandierina che sventola. Dentro la vetrina, appeso a un'asta, c'è un pentolino d'acciaio con due coperchi, una leva col pomello rosso e i chicchi che si vedono sul bordo. Sotto il mouse il pentolino trema sull'asta, i chicchi ballano e la lampada si accende di più. Al clic la scritta diventa Popping… con un riflesso che la attraversa, il fondo del pentolino si scalda d'arancio, i coperchi si alzano e i chicchi scoppiano uno alla volta, sempre più fitti: ognuno parte da un seme duro e si gonfia in una nuvola irregolare bianca con l'ombra, un po' di burro e un pezzetto di buccia, vola fuori dal pentolino, sbatte sul vetro e si ammucchia sul fondo della vetrina. Poi il pentolino si inclina sull'asta e versa gli ultimi verso destra, e lo sportello di vetro si apre sulla sua cerniera: il popcorn trabocca sulla pillola e il primo pezzo rimbalza via lungo il bordo. Da dietro la pillola sale un biglietto strappato, ADMIT ONE, Velvet Hour, con la fila e il posto, e la scritta diventa Enjoy the show. Un secondo clic fa scendere il biglietto, spazza via il popcorn e chiude lo sportello.

Come funziona

Il carrello su un canvas

Il carrello, il pentolino, lo sportello e il popcorn sono disegnati su un canvas che copre il componente e 40 pixel sopra, per la bandierina e i pezzi che volano: ruote coi raggi, il mobiletto con le sfumature e la targa, il fondo caldo della vetrina con il cono della lampada, la tenda a strisce tagliata a trapezio col bordo a festoni, i riflessi a sbieco sul vetro e il telaio d'oro disegnati dopo il popcorn, così il popcorn sta dietro il vetro. La pillola, le parole e il biglietto sono HTML e SVG sotto il canvas, che non prende il puntatore.

Un popcorn che non è un cerchio

Ogni pezzo ha da cinque a sette lobi attorno a un lobo centrale, con distanze e raggi a caso, disegnati tre volte: l'ombra spostata in basso, il bianco, il burro su qualche lobo e la luce solo su quelli in alto, più un pezzetto di buccia. Quando nasce parte a un quarto della sua misura, con il seme arancio che si vede, e si gonfia in 0,22 secondi con back.out(3.2): lo scoppio.

La fisica

Per le botte ogni pezzo è un cerchio di 5,2 pixel: gravità GRAVITY, rimbalzo BOUNCE sulle pareti del vetro e sul fondo, attrito sul fondo, e fra i pezzi tre passate di separazione e un urto fra masse uguali, così il mucchio sta in piedi. Il passo del fotogramma è limitato a 1/30 di secondo e diviso in due. Quando lo sportello è aperto la parete destra sotto la cerniera non c'è più: i pezzi escono, e fuori il suolo è il bordo della pillola, tondo nella sua punta sinistra. Tutto il caso viene da un generatore con un seme fisso, quindi ogni spettacolo è uguale.

La regia

Una timeline GSAP scalda il pentolino, apre i coperchi e chiama gli scoppi a intervalli che si accorciano; poi inclina il pentolino di TILT gradi attorno all'asta, che versa gli ultimi chicchi con una spinta verso destra, apre lo sportello con back.out e dà una spinta al pezzo più vicino all'uscita perché rimbalzi lontano. Alla fine il biglietto sale da dietro la pillola con back.out(2.2) e un giro di 7 gradi. SPEED cambia il timeScale di tutto.

Pulsante vero

È un button: Invio e Spazio fanno lo stesso del clic, il fuoco dei tasti ha l'anello e fa tremare il pentolino come il mouse, aria-busy e aria-disabled mentre scoppia, e una regione aria-live dice Popping your popcorn e poi Tickets ready. Le tre scritte sono una sopra l'altra e la pillola è larga quanto la più lunga, misurata dopo l'arrivo del carattere.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LABEL`	script.js	`Get tickets`	Le parole a riposo.
`TIME`	script.js	`Fri 9:40`	L'orario dello spettacolo accanto.
`BUSY`	script.js	`Popping…`	Le parole mentre il popcorn scoppia.
`DONE`	script.js	`Enjoy the show`	Le parole quando il biglietto è uscito.
`FILM`	script.js	`Velvet Hour`	Il film stampato sul biglietto.
`SEAT`	script.js	`Screen 2 · Row F · Seat 7`	La sala, la fila e il posto sul biglietto.
`KERNELS`	script.js	`34`	Quanti chicchi scoppiano, da 16 a 40.
`GRAVITY`	script.js	`1500`	Quanto forte cade il popcorn, in pixel al secondo al quadrato.
`BOUNCE`	script.js	`0.32`	Quanto rimbalza il popcorn.
`TILT`	script.js	`34`	Quanto si inclina il pentolino per svuotarsi, in gradi.
`SPEED`	script.js	`1`	La velocità di tutto lo spettacolo.

Provali nel Playground

Quando usarla

Per il pulsante dei biglietti di un cinema, di un drive-in, di una rassegna all'aperto o di una serata di film, o per l'ordine dello spuntino in un'app di cinema.

Sul telefono

Il componente è largo quanto le parole, fra 300 pixel e lo schermo meno 32, e alto 140 con la pillola di 60. Senza hover, il dito che si appoggia fa tremare il pentolino come il mouse, e il tocco non aspetta il doppio tocco.

Con il movimento ridotto

Niente scoppi che volano, niente tremore e niente sportello che si spalanca: al clic il mucchio di popcorn compare già fermo nella vetrina con una dissolvenza, e il biglietto compare al suo posto senza salire. Le parole cambiano svanendo.

Trappole

Il popcorn disegnato come cerchi sembra una manciata di palline: serve una forma a lobi, e i lobi vanno disegnati in un solo percorso per ombra, bianco e burro, se no ogni lobo copre l'ombra del vicino.
Il popcorn nella vetrina va disegnato prima dei riflessi e del telaio, e tagliato dentro il vetro: così sta dietro al vetro, mentre quello uscito si disegna dopo il carrello, davanti a tutto.
Il canvas copre anche la pillola: deve avere pointer-events none, o il clic non arriverebbe al pulsante.
Con il caso di Math.random ogni spettacolo era diverso e il video dell'anteprima non tornava mai uguale: il generatore ha un seme fisso che riparte a ogni clic.
Il biglietto aspetta dietro la pillola: è più basso di lei, così da fermo non si vede, e il suo z-index è sotto quello del pulsante.

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 22 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.