Attrezzi che cadono
Fisica, Hover
NuovaGratis
Torna alla libreria
Tieni premuto e versa
Una bottiglia d’olio che si inclina mentre tieni premuto: l’olio dentro resta sempre in piano, esce dal collo quando lo raggiunge e cade in un getto che il puntatore indirizza. La ciotola si riempie con dei cerchi dove cade il getto; quello che la manca finisce sul tagliere.
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>Hold and pour</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/young-serif@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="bar">
<a class="brand" href="#">Casale Verde</a>
<nav class="bar__nav" aria-label="Sections">
<a href="#">The oil</a>
<a href="#">Groves</a>
<a href="#">Shop</a>
</nav>
</header>
<main class="page">
<section class="copy">
<p class="kicker">Cold-pressed, first harvest</p>
<h1 class="title">Pour it slowly. We pressed it slowly.</h1>
<p class="note">Hold the table to tip the bottle, and move to aim. Fill the bowl without spilling a drop.</p>
<button class="pour" type="button" data-pour data-autoclic>Pour a measure</button>
</section>
<!-- the table: a bottle that tips while you hold, a stream that falls, a bowl that fills; all drawn on the canvas -->
<section class="stage" data-stage aria-label="Pouring olive oil into a bowl">
<canvas class="stage__canvas" data-canvas aria-hidden="true"></canvas>
<p class="served" data-served aria-live="polite"></p>
<p class="hint" data-hint>Hold to pour</p>
</section>
</main>
<!-- the round cursor that says what to do, stretched by its speed -->
<div class="cursor" data-cursor aria-hidden="true">
<span class="cursor__disc" data-disc></span>
<span class="cursor__text" data-cursor-text>Hold &<br>pour</span>
</div>
<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.
28 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 «Tieni premuto e versa» da Animorio e adattala al mio sitoCosa fa
La pagina di un olio inventato, Casale Verde: a sinistra il titolo «Pour it slowly. We pressed it slowly.» e un bottone, a destra un tavolo con una bottiglia e una ciotola su un tagliere, disegnati come incisioni: bianchi, col tratteggio a inchiostro che cambia disegno otto volte al secondo. Tenendo premuto sul tavolo la bottiglia si inclina; l’olio dentro resta in piano e, quando arriva al collo, esce, prima piano e poi più forte quanto più il collo sta sotto il livello. Il getto è una catena di gocce che cadono e si disegnano come un nastro solo, più grosso dove esce e più sottile mentre accelera. Muovendo il puntatore la bottiglia lo segue, di più quanto più è inclinata, e il getto si sposta: nella ciotola l’olio sale e fa dei cerchi dove cade, fuori finisce in una pozza sul tagliere. La ciotola piena dice «That’s a proper dip.», o che anche il tagliere ha avuto la sua parte, e quando la bottiglia torna dritta scivola via e ne arriva una vuota, con la bottiglia di nuovo piena. Il bottone versa una misura: tiene la bottiglia inclinata un secondo e mezzo. Sul computer un cursore rotondo dice «Hold & pour»: si stringe mentre tieni premuto e si allunga nella direzione in cui corre.
Come funziona
L’olio in piano
La bottiglia è un poligono nel suo spazio. A ogni fotogramma lo script lo gira e lo sposta dove si trova e cerca, per bisezione, la linea orizzontale che lascia sotto di sé esattamente l’olio che c’è: l’area si misura tagliando il poligono con quella linea. Il pezzo di poligono sotto la linea è l’olio, e si disegna nello spazio della pagina, così resta in piano qualunque cosa faccia la bottiglia. Quando la bottiglia accelera o frena la superficie si inclina un poco e torna, come una molla.
Quando esce
Il collo versa quando il suo labbro più basso è sotto il livello, con una portata che cresce come la radice di quanto è sotto, come l’acqua da un buco (Torricelli), per FLOW. Così una bottiglia piena versa presto e una quasi vuota va inclinata di più. Tenendo premuto la bottiglia arriva ad ANGLE gradi in TILT secondi con una curva morbida, e si svuota di quello che esce.
Il getto
Novanta gocce al secondo nascono sul collo, nella sua direzione, con una velocità che cresce con la portata più un poco di quella della bottiglia; GRAVITY le tira giù e l’aria le frena di lato. Si disegnano come un nastro che passa per tutte nell’ordine in cui sono uscite, in tre passate: inchiostro, oro e un filo di luce. La larghezza viene dalla portata (THICK a portata piena) e cala con la velocità, perché lo stesso olio passa da una sezione più stretta. Un nastro nuovo comincia solo dopo una pausa vera, così il getto non si sdoppia.
La ciotola
La ciotola è vista un poco dall’alto: bordo e piede sono ellissi. L’olio è un’ellisse che sale dal fondo e si allarga; siccome la ciotola si allarga verso l’alto, il livello per una quota d’olio viene da una radice cubica, come per un tronco di cono. Dove cadono le gocce nasce un cerchio ogni RINGS secondi, che si allarga e sbiadisce; il lato vicino della ciotola si disegna dopo il getto e ne copre la fine. SHARE della bottiglia la riempie; piena, se continui a versare, trabocca sul tagliere.
Il cursore
Un disco segue il puntatore con un ritardo, un decimo della distanza a ogni fotogramma. La sua velocità, smorzata, lo allunga nella direzione di corsa e lo stringe di traverso di un decimo (STRETCH, quattro volte tanto mentre tieni premuto); premendo si riduce a metà e la scritta sparisce.
L’incisione
Bottiglia, ciotola e tagliere sono pieni di bianco e tratteggiati con trame di linee ondulate (createPattern del canvas), tre versioni per trama; anche ogni contorno ha un tremolio diverso per versione. Le versioni si danno il cambio BOIL volte al secondo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TILT | script.js | 1.1 | I secondi che la bottiglia impiega a inclinarsi del tutto mentre tieni premuto. |
ANGLE | script.js | 112 | Quanto si inclina, in gradi da dritta. |
FLOW | script.js | 1 | Quanto in fretta l’olio esce dal collo. |
GRAVITY | script.js | 2600 | Quanto tira giù il getto, in pixel al secondo al quadrato. |
THICK | script.js | 10 | La larghezza del getto a portata piena, in pixel. |
MEASURE | script.js | 1.5 | I secondi per cui il bottone tiene inclinata la bottiglia. |
RINGS | script.js | 0.12 | I secondi fra due cerchi dove il getto tocca l’olio. |
FOLLOW | script.js | 0.1 | Quanto in fretta la bottiglia segue il puntatore, a ogni sessantesimo di secondo (da 0 a 1). |
SHARE | script.js | 0.22 | Quanta parte della bottiglia serve a riempire la ciotola. |
BOIL | script.js | 8 | Quante volte al secondo l’incisione cambia disegno. |
STRETCH | script.js | 0.01 | Quanto si allunga il cursore rotondo con la sua velocità. |
Quando usarla
Per un prodotto che si versa: olio, vino, caffè, sciroppi, vernici. Tenere premuto trasforma l’attesa in un gioco: sta bene nell’apertura di una pagina di prodotto, o al posto di un caricamento.
Sul telefono
Si tiene premuto col dito sul tavolo e lo si sposta per mirare; in basso un’etichetta dice «Hold to pour». Il tavolo lascia scorrere la pagina in verticale (touch-action: pan-y): se il dito va su o giù la pagina scorre e la bottiglia torna dritta.
Con il movimento ridotto
La bottiglia si inclina e versa lo stesso, perché risponde a un gesto, ma non dondola, la superficie dell’olio non oscilla, sull’olio non nascono cerchi e il tratteggio non cambia disegno; il cursore non si allunga.
Trappole
- Il livello va trovato e disegnato nello spazio della pagina: disegnato dentro la trasformazione girata della bottiglia, ruoterebbe con lei.
- La bisezione cerca il livello fra il punto più alto e il più basso del poligono girato: 26 passi bastano per un errore sotto il pixel.
- Con la portata che va e viene sul filo del labbro, ogni ripartenza sarebbe un nastro nuovo accanto al vecchio e il getto si sdoppierebbe: un nastro nuovo comincia solo dopo 0,12 s senza olio.
- Un getto troppo veloce salta la ciotola: la velocità d’uscita è bassa e il punto di riposo della bottiglia si calcola da ANGLE, così il collo, inclinato del tutto, arriva sopra la ciotola.
- Il bottone ignora i clic mentre versa (il pilota delle anteprime clicca ogni 2,8 s), e su una ciotola piena fa arrivare quella vuota invece di versare.
- Il cursore rotondo c’è solo con un puntatore fine: al telefono lo sostituisce l’etichetta fissa.
Librerie
GSAP 3.15.0, Young Serif 5.3.0, Instrument 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 21 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
