La card del cocktail

Card, Fisica, Hover, TransizioniCanvas, GSAP, Solo CSSImpegnativaPeso compresso: Demo 19 KBGSAP 28 KBGratisScarica lo zip

La card della ricetta di un cocktail, con un bancone illuminato da dietro: col puntatore sopra la foto lo shaker si alza, si agita finché l’acciaio si brina e versa il drink sul ghiaccio, che sale a galla; poi un jigger fa scendere la granatina, che attraversa il drink a filamenti e si posa sul fondo in uno strato rosso che sfuma come un tramonto, mentre la schiuma sale in cima. Ogni riga degli ingredienti si colora quando entra nel bicchiere. Al clic la card si gira e mostra il procedimento.

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 cocktail card</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/400-italic.css">
  <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 card of a cocktail recipe. With the pointer over the picture (or a tap) the shaker gets to work: it shakes
         until it frosts over, pours the drink over the ice, and a jigger sinks the grenadine, which falls through the
         drink and settles at the bottom in a red layer. A click turns the card over and shows the method. The bar,
         the glass, the drink, the ice and the tools are drawn by the script -->
    <article class="drink" aria-labelledby="drink-name" data-drink data-autoclic>
      <div class="drink__turn" data-turn>
        <section class="face face--front" data-front>
          <button class="shot" type="button" aria-label="Mix the drink" data-shot>
            <canvas class="shot__canvas" aria-hidden="true" data-canvas></canvas>
          </button>
          <div class="face__body">
            <p class="drink__kind">Tequila · Shaken · Highball</p>
            <div class="drink__head">
              <h2 class="drink__name" id="drink-name">Last Light</h2>
              <p class="drink__abv">12% ABV</p>
            </div>
            <ul class="pour" aria-label="Ingredients">
              <li class="pour__row" style="--tint: var(--tequila)" data-row="shaker"><span class="pour__name">Tequila blanco</span><span class="pour__ml">45 ml</span><span class="pour__line" aria-hidden="true"><span class="pour__fill" data-fill></span></span></li>
              <li class="pour__row" style="--tint: var(--blood)" data-row="shaker"><span class="pour__name">Blood orange</span><span class="pour__ml">60 ml</span><span class="pour__line" aria-hidden="true"><span class="pour__fill" data-fill></span></span></li>
              <li class="pour__row" style="--tint: var(--lime)" data-row="shaker"><span class="pour__name">Lime</span><span class="pour__ml">15 ml</span><span class="pour__line" aria-hidden="true"><span class="pour__fill" data-fill></span></span></li>
              <li class="pour__row" style="--tint: var(--grenadine)" data-row="jigger"><span class="pour__name">Grenadine</span><span class="pour__ml">10 ml</span><span class="pour__line" aria-hidden="true"><span class="pour__fill" data-fill></span></span></li>
            </ul>
            <div class="drink__foot">
              <p class="drink__time">Ice · 4 min</p>
              <button class="pill pill--line" type="button" data-flip>
                <span class="pill__icon" aria-hidden="true">
                  <svg viewBox="0 0 24 24"><path d="M4.5 9.5a8 8 0 0 1 14.2-2.6"/><path d="M19.3 3.6v3.7h-3.7"/><path d="M19.5 14.5a8 8 0 0 1-14.2 2.6"/><path d="M4.7 20.4v-3.7h3.7"/></svg>
                </span>
                <span class="pill__label">Method</span>
              </button>
            </div>
          </div>
        </section>

        <section class="face face--back" aria-label="Method" data-back>
          <p class="drink__kind">Method</p>
          <h3 class="back__name">Last Light</h3>
          <ol class="steps">
            <li class="step">
              <svg class="step__icon" viewBox="0 0 32 32" aria-hidden="true"><path d="M11 29h10l2-17H9z"/><path d="M9 12h14"/><path d="M10.5 12l2-4.5h7l2 4.5"/><path d="M13.5 7.5V4.5h5v3"/><path d="M5 15.5l-2-1.2M5 19l-2.4.2M27 15.5l2-1.2M27 19l2.4.2"/></svg>
              <div><p class="step__verb">Shake</p><p class="step__text">Tequila, blood orange and lime on ice, hard, for twelve seconds, until the tin frosts.</p></div>
            </li>
            <li class="step">
              <svg class="step__icon" viewBox="0 0 32 32" aria-hidden="true"><path d="M7 7h18l-2 22H9z"/><path d="M10 13l3 2 3-2 3 2 3-2"/><path d="M14 4.5c1-1.4 3-1.4 4 0"/></svg>
              <div><p class="step__verb">Strain</p><p class="step__text">Over fresh ice, into a chilled highball.</p></div>
            </li>
            <li class="step">
              <svg class="step__icon" viewBox="0 0 32 32" aria-hidden="true"><path d="M10 3h12l-4.5 9h-3z"/><path d="M14.5 12l-4.5 9h12l-4.5-9"/><path d="M16 23v6"/><path d="M13 28.5c1 .8 5 .8 6 0"/></svg>
              <div><p class="step__verb">Sink</p><p class="step__text">Pour the grenadine down the side. It finds the bottom by itself.</p></div>
            </li>
            <li class="step">
              <svg class="step__icon" viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="16" r="11"/><circle cx="16" cy="16" r="7.5"/><path d="M16 8.5v15M8.5 16h15M10.7 10.7l10.6 10.6M21.3 10.7L10.7 21.3"/></svg>
              <div><p class="step__verb">Garnish</p><p class="step__text">A blood orange wheel on the rim. Do not stir: the sun sets in the glass.</p></div>
            </li>
          </ol>
          <dl class="facts">
            <div><dt>Glass</dt><dd>Highball</dd></div>
            <div><dt>Ice</dt><dd>Cubed</dd></div>
            <div><dt>Time</dt><dd>4 min</dd></div>
          </dl>
          <button class="pill pill--full" type="button" data-unflip>
            <span class="pill__icon" aria-hidden="true">
              <svg viewBox="0 0 24 24"><path d="M9.5 6.5L4.5 11.5l5 5"/><path d="M4.8 11.5h9.7a5 5 0 0 1 0 10H12"/></svg>
            </span>
            <span class="pill__label">Back to the glass</span>
          </button>
        </section>
      </div>
      <p class="sr" aria-live="polite" data-live></p>
    </article>
  </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.

54 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 «La card del cocktail» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero una card quasi nera, calda, dagli angoli tondi. In alto la foto, disegnata dallo script: un muro scuro con una luce ambrata dietro, il bordo di una mensola, un bancone di pietra scura che specchia quello che ci sta sopra; a sinistra un highball di vetro con tre cubetti di ghiaccio sul fondo, a destra uno shaker d’acciaio in piedi. Sotto: Tequila · Shaken · Highball, il nome Last Light in corsivo con 12% ABV, quattro ingredienti con le dosi (Tequila blanco 45 ml, Blood orange 60 ml, Lime 15 ml, Grenadine 10 ml), ognuno con una linea sottile sotto, poi Ice · 4 min e la pillola Method. Col puntatore sopra la foto, o con un tocco, lo shaker si alza e si agita su e giù, inclinandosi, mentre l’acciaio si copre di brina; poi perde il tappo, che vola via, si piega sopra il bicchiere e versa: il drink color albicocca cade in un filo che si assottiglia mentre accelera, e dove arriva la superficie fa le onde. Il livello sale, i cubetti si staccano dal fondo e vengono a galla urtandosi e girando finché stanno dritti, e la schiuma della sbattitura sale in cima in uno strato chiaro. Mentre versa, le linee di tequila, arancia rossa e lime si riempiono del loro colore. Lo shaker torna al suo posto col tappo e atterra con un piccolo rimbalzo; entra un jigger pieno di granatina, si inclina e la versa lungo il bordo del bicchiere: la granatina scende a filamenti attraverso il drink e si posa sul fondo, si allarga e fa uno strato rosso piatto che sfuma verso l’alto nell’arancio, come un tramonto, e la sua linea si colora di rosso. Infine una rondella d’arancia rossa cade sul bordo del bicchiere con un rimbalzo. Sul bancone, davanti al bicchiere, la luce che attraversa il drink lascia una macchia del suo colore. Un clic sulla card (o sulla pillola Method) la gira su una molla e mostra il retro: Method, il nome, quattro passi con un’icona disegnata e un verbo (Shake, Strain, Sink, Garnish), tre dati (bicchiere, ghiaccio, tempo) e la pillola arancione Back to the glass. Girata di nuovo, il bicchiere è vuoto e pronto per un altro giro.

Come funziona

Gli strati si ordinano da soli

Il drink sta su una griglia di celle di 2 pixel, colonne lungo la larghezza del bicchiere e righe in su dal fondo; ogni cella tiene una parte di granatina e una di schiuma, il resto è il drink. A ogni fotogramma la granatina scende nella cella di sotto, ma solo nello spazio che quella ha ancora libero, e la schiuma sale allo stesso modo in quella di sopra; una cella che poggia su qualcosa di pieno va verso la media delle celle della sua riga che poggiano anche loro, così una pila si spiana subito come un liquido. Il risultato è uno strato rosso piatto in fondo e uno chiaro in cima, senza che nessuno dica dove vanno: lo decide solo il peso.

Il filo che versa

Lo shaker e il jigger sono mossi da una timeline di GSAP; il loro beccuccio è calcolato ruotando un punto del disegno con la loro posa. Da lì escono particelle con la velocità del beccuccio e quella del versare, sparse lungo il fotogramma come se fossero uscite una dopo l’altra, e cadono con la gravità. Quelle uscite a meno di un quarantesimo di secondo l’una dall’altra si uniscono in un filo, largo tanto meno quanto più vanno veloci (la stessa portata in un filo più stretto); più distanti diventano gocce. Toccando la superficie aggiungono il loro volume: il livello viene da una tabella che somma i cerchi del bicchiere, che si stringe verso il basso.

Ghiaccio e onde

I cubetti sono corpi rigidi a passi di 1/240 di secondo: peso, spinta di galleggiamento in proporzione a quanto sono immersi, freno più forte nel liquido, urti fra loro e con le pareti inclinate del bicchiere, e una coppia che li gira finché una faccia è in alto. La superficie è un’equazione delle onde su una colonna per cella: il filo e la granatina le danno una spinta dove arrivano e i cubetti che salgono e scendono la muovono; le onde piegano il bordo davanti della superficie, la sua ellisse vista da sopra e il punto in cui galleggiano i cubetti.

La luce attraverso il drink

Ogni pixel del liquido sa a che altezza sta sopra il fondo, misurata lungo l’arco della prospettiva, così gli strati piatti si vedono curvi come in un bicchiere vero. Il colore mescola il drink, la granatina e la schiuma nelle loro parti; la granatina tinge molto più della sua parte, e ogni pixel prende anche un po’ del rosso delle celle sotto di lui, che sfuma verso l’alto come un tramonto. Il colore del drink è la media dei colori degli ingredienti in :root pesati dalle dosi scritte nella card. Sopra, una luce che attraversa il centro, i bordi del vetro scuri, le strisce di luce, la macchia colorata sul bancone e il riflesso capovolto di tutto.

La card che si gira

Le due facce stanno nella stessa cella di una griglia, la seconda girata di 180 gradi con backface-visibility nascosta; GSAP gira la card con un back.out e la rimpicciolisce un poco a metà strada. Lo script nasconde anche la faccia che non si vede appena la card è di taglio (Safari non sempre lo fa da solo) e rende inert quella dietro, spostando il fuoco sul pulsante dell’altra se serviva. Girata di nuovo, il bicchiere viene svuotato mentre è di spalle: arriva vuoto e pronto per un altro giro.

Gli stati e il riposo

Il drink si fa col mouse sopra la foto, con un tocco o con Invio sulla foto (è un pulsante); un clic sulla card a drink pronto la gira, Method e Back to the glass la girano sempre. Uno stato aria-live dice Shaking, Pouring, Sinking the grenadine, il drink pronto, Method e Ingredients. Il passo di tempo è limitato a 1/30 di secondo; la griglia dorme quando non sposta più niente da mezzo secondo, le onde sotto una soglia di energia, i cubetti quando sono fermi: allora non si ridisegna più niente.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SHAKE`	script.js	`1`	I secondi in cui lo shaker si agita.
`RATTLE`	script.js	`7`	Quante volte al secondo va su e giù mentre si agita.
`POUR`	script.js	`1.4`	I secondi che impiega a versare il drink.
`SINK`	script.js	`110`	Quanto in fretta la granatina scende attraverso il drink, in pixel al secondo.
`FROTH`	script.js	`1`	Quanta schiuma lascia in cima la sbattitura, da 0 a 2.
`ICE`	script.js	`3`	Quanti cubetti di ghiaccio ci sono nel bicchiere, da 0 a 4.
`SLOSH`	script.js	`1`	Quanto si muove la superficie dove arriva il filo, da 0 a 2.
`TURN`	script.js	`1.1`	I secondi che la card impiega a girarsi.

Provali nel Playground

Quando usarla

Per la ricetta di un cocktail in un sito di ricette, nel menu di un cocktail bar o nella pagina di un liquore; ovunque una bevanda si capisca meglio vedendola preparare (un caffè freddo, un frullato, un tè freddo a strati) e per una card che deve avere due facce, il prodotto davanti e le istruzioni dietro.

Sul telefono

La card è larga 340 pixel, o lo schermo meno 32, e la scena si ridisegna alla misura vera. Al telefono il passaggio del mouse non c’è: un tocco sulla foto fa il drink, un altro tocco a drink pronto gira la card, e un tocco sul retro la rigira. La simulazione è la stessa del computer: la griglia è di 44 per 65 celle e il liquido si dipinge in un’immagine di 88 per 149 pixel, ingrandita.

Con il movimento ridotto

Lo shaker non si muove e non versa: il drink finito, con gli strati, il ghiaccio a galla e la rondella sul bordo, compare con una dissolvenza sopra il bicchiere vuoto, e le linee degli ingredienti si colorano subito. La card non gira: si dissolve e torna con l’altra faccia. Le pillole non si gonfiano.

Trappole

La granatina che scendeva da un lato faceva un mucchio in fondo che non si spianava mai: lo spianamento fra celle vicine, a coppie, impiegava decine di secondi ad attraversare il bicchiere. Ora ogni cella che poggia su qualcosa va verso la media di tutte quelle della sua riga che poggiano anche loro; ma da solo non bastava, perché una colonna di rosso che poggiava solo su sé stessa restava in piedi: in più un mucchio scivola di lato, sei volte a fotogramma, nelle celle accanto, dove scende di nuovo se sotto c’è posto, e lo strato diventa piatto in poco più di un secondo.
Il filo che versava si rompeva in puntini a metà caduta: le particelle uscite nello stesso fotogramma partivano tutte dallo stesso punto e, veloci, si allontanavano più della soglia fissa che le univa. Ora escono sparse lungo il fotogramma, già portate avanti del tempo che avrebbero avuto, e si uniscono secondo quando sono uscite, non secondo la distanza.
All’inizio del versare il filo faceva uno zig-zag: partiva mentre lo shaker stava ancora finendo di inclinarsi, nel momento più veloce, e prendeva metà della sua velocità. Ora il versare parte a inclinazione finita e prende solo un quinto della velocità del beccuccio.
Lo strato rosso finiva netto, una riga dritta fra rosso e arancio. Ogni pixel ora prende anche una parte del rosso delle nove celle sotto di lui, che cala con la distanza: lo strato sfuma in su come un tramonto.
La brina fatta di puntini chiari sembrava ghiaia sullo shaker: ora è una velatura con una grana finissima e qualche riga di condensa che cola.
Il riflesso sul bancone si disegnava con un capovolgimento sopra la scala della tavola e finiva fuori posto: ora è la tela degli oggetti disegnata capovolta in pixel veri attorno alla linea d’appoggio, ritagliata al bancone e sfumata.
Nel video dell’anteprima il secondo clic non girava la card: arrivava quando alla timeline mancavano pochi centesimi di secondo, prima del suo onComplete, e il drink risultava ancora in preparazione. Ora il drink è pronto con una chiamata dentro la timeline, all’arrivo della rondella, e la timeline va avanti ancora un poco mentre gli ultimi filamenti rossi arrivano in fondo; la rondella arriva più tardi, così l’immagine si muove finché lo strato non è piatto.

Librerie

GSAP 3.15.0, Instrument Serif 5.3.0, Mona Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 19 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 13 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.