Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il pulsante a rimbalzello
Il pulsante Skip intro di un lettore video, fatto come una piccola vaschetta di ceramica piena d'acqua limpida su un fondo di sabbia, con la rete di luce del sole sul fondo. Premuto, un sasso piatto arriva da sinistra e fa rimbalzello: cinque o sei salti, ognuno più corto del precedente, ognuno coi suoi cerchi che si allargano e fanno ballare la luce sulla sabbia; poi affonda, resta sul fondo e la scritta diventa Intro skipped.
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 skipping stone button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/figtree@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the skipping stone button: the Skip intro button of a video player, made as a little ceramic dish of clear,
sunlit water over pale sand. Pressed, a flat stone flies in from the left and skips across the water, every
hop shorter than the one before, then sinks to the bottom and stays there. The water is drawn on the first
canvas, the stone and the splashes on the second; the words stay on top -->
<div class="skip" data-skip>
<button class="skip__dish" type="button" data-dish data-autoclic>
<canvas class="skip__water" aria-hidden="true" data-water></canvas>
<canvas class="skip__air" aria-hidden="true" data-air></canvas>
<span class="skip__label" data-label>
<span class="skip__words" data-words>Skip intro</span>
<span class="skip__icons" aria-hidden="true" data-icons>
<svg class="skip__icon" viewBox="0 0 24 24" data-skip-icon>
<path class="skip__tri" d="M6.4 6.6v10.8c0 .9 1 1.4 1.7.9l7.7-5.4c.6-.4.6-1.4 0-1.8L8.1 5.7c-.7-.5-1.7 0-1.7.9z"/>
<path d="M18.8 5.8v12.4"/>
</svg>
<svg class="skip__icon skip__icon--done" viewBox="0 0 24 24" data-check>
<path d="M5 12.6l4.4 4.3L19.2 7.2" data-tick/>
</svg>
</span>
</span>
</button>
<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.
26 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 pulsante a rimbalzello» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una vaschetta di ceramica smaltata a forma di pillola, alta come un pulsante e vista dall'alto di sbieco: il bordo color avorio, più spesso sul davanti, la parete interna che si vede in fondo sopra l'acqua e poi, più scura, sotto l'acqua. Dentro c'è acqua limpida color acquamarina su un fondo di sabbia chiara con le increspature lasciate dalle onde, qualche ciottolo verso le estremità e due sassi piatti già posati sul fondo a destra; sulla sabbia una rete morbida di luce di sole. In mezzo, scuri, Skip intro e l'icona del salto avanti. Al caricamento una goccia cade nell'acqua e allarga due cerchi. Col mouse sopra il triangolo dell'icona si sporge verso la sbarra e il puntatore è un dito che sfiora l'acqua: dietro di lui si apre una scia di increspature che piegano la sabbia e la luce. Premendo, la vaschetta si stringe appena e dove si preme parte un cerchio. Al clic un sasso piatto grigio arriva volando da sinistra sopra la pagina, con la sua ombra, passa sopra il bordo e tocca l'acqua: uno spruzzo di goccioline, un anello di schiuma e un cerchio che si allarga ovale come lo si vede di sbieco, con la luce sulla sabbia che si piega in anelli. Il sasso rigira su sé stesso e risalta, cinque o sei volte, ogni salto più basso e più corto del precedente, scivolando un poco verso il fondo della vaschetta, e i cerchi dei salti si incrociano e rimbalzano sulle pareti; ogni tanto un'onda prende il sole e luccica. Bagnato, il sasso diventa più scuro e più lucido. Alla fine, troppo lento per rimbalzare, ara un piccolo solco, va sotto e scende ondeggiando come una foglia fino alla sabbia, colorato dall'acqua, e alza una nuvoletta di sabbia: resta lì sul fondo, dove la luce continua a passargli sopra. Intanto la scritta diventa Intro skipped con una spunta che si disegna, e dopo un secondo e mezzo torna Skip intro. Ogni lancio è un po' diverso, e sul fondo restano gli ultimi cinque sassi: i più vecchi si coprono di sabbia. Quando l'acqua torna ferma non si disegna più niente. Col tasto Tab un anello verde petrolio gira intorno alla vaschetta, e Invio o Spazio lanciano il sasso.
Come funziona
Il sasso, un corpo in volo
Il sasso ha una posizione nello spazio della vaschetta (di lato, in profondità e in altezza sopra l'acqua), una velocità, una rotazione su sé stesso e un'inclinazione tenuta da una molla. Parte sopra la pagina, a sinistra, con la spinta in alto calcolata perché tocchi l'acqua la prima volta poco dentro il bordo. A ogni tocco l'acqua porta via sempre la stessa quantità d'energia, LOSS volte quella del lancio (THROW), e lo ributta su in proporzione alla velocità che gli resta (LIFT): così ogni salto è più corto del precedente di circa la stessa misura, come nel modello semplice che i fisici usano per il rimbalzello. Quando gli resta troppo poca velocità ara l'acqua, si ferma e affonda.
L'acqua, l'equazione delle onde
L'acqua è una griglia di altezze, una cella per pixel, mossa dall'equazione delle onde: ogni cella è tirata verso le vicine, e quelle verso il fondo contano metà, perché a 45 gradi le distanze in profondità si vedono accorciate di sen 45; così i cerchi vengono ovali da soli. Contro la parete una cella usa sé stessa come vicina, e l'onda torna indietro. A ogni passo l'onda perde un po' della sua altezza (CALM) e un filo di viscosità spegne prima le increspature più fini; i passi al secondo crescono con la velocità delle onde (WAVE), perché il calcolo resti stabile. Un tocco è un'ammaccatura a campana, profonda quanto il colpo.
Un piccolo ray tracer
Ogni pixel dell'acqua si calcola come un raggio: dal pixel si trova il punto della superficie (sullo schermo 4 pixel più in basso del bordo, per questo in fondo si vede la parete asciutta), la pendenza in quel punto piega il raggio dell'occhio (BEND) e lo manda sulla sabbia un po' più in là, o sulla parete sott'acqua. Il colore della sabbia, illuminato, attraversa l'acqua: --water dice quanto ne passa per ogni colore, --glow quanta luce l'acqua aggiunge da sé. Sopra, un velo di cielo che cresce sui pendii girati dall'altra parte (Fresnel) e i luccichii dove la superficie rimanda il sole all'occhio. L'immagine si fa a due pixel per pixel css, con le pendenze interpolate.
Le caustiche
La rete di luce sulla sabbia è vera: ogni cella della superficie manda il suo raggio di sole verso il fondo, spostato dalla sua pendenza, e lo deposita sulla sabbia fra le quattro celle più vicine; dove molti raggi cadono insieme la sabbia è chiara, dove ne cadono pochi è più scura. A riposo c'è sempre un'onda lunga leggerissima, cinque sinusoidi fisse, che basta a stendere una rete morbida; i cerchi del sasso la fanno ballare in anelli. Le pareti fanno ombra dove il raggio di sole, piegato nell'acqua, le incontrerebbe prima di arrivare al bordo: si calcola una volta sola.
Il fondo e i sassi affondati
La sabbia è disegnata una volta su una tela: le increspature, i ciottoli con la loro ombra, la grana. Il sasso che affonda si disegna sulla tela di sopra, colorato dall'acqua, alla profondità a cui si vede la sabbia; quando tocca il fondo diventa parte del disegno della sabbia, così la luce e le onde gli passano sopra come al resto. Ne restano STONES: i più vecchi svaniscono come coperti di sabbia.
Quando tutto è fermo
Dopo ogni fotogramma si guarda l'onda più alta: quando per qualche fotogramma è sotto pochi millesimi di pixel e niente vola, le altezze tornano a zero, si disegna l'immagine a riposo e il ciclo non disegna più niente. Lungo il bordo dell'acqua ogni pixel mescola acqua e parete per quanto ne copre, e un filo chiaro fa il menisco. Su un dispositivo lento, se un fotogramma costa più di 9 millisecondi, l'acqua passa a un pixel per pixel css.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
THROW | script.js | 340 | Quanto forte si lancia il sasso, in pixel al secondo: più forte fa più salti. |
LIFT | script.js | 0.46 | Quanto l'acqua ributta su il sasso a ogni tocco: di più, salti più alti e più lunghi. |
LOSS | script.js | 0.13 | La parte dell'energia del lancio che ogni tocco porta via: meno, più salti. |
SPIN | script.js | 30 | Quanto in fretta il sasso gira su sé stesso, in radianti al secondo. |
RIPPLE | script.js | 1 | Quanto sono forti i cerchi dove il sasso tocca l'acqua. |
WAVE | script.js | 150 | Quanto in fretta si allargano i cerchi, in pixel al secondo. |
CALM | script.js | 1 | Quanto in fretta l'acqua torna ferma: di più, prima. |
CAUSTICS | script.js | 1 | Quanto è forte la rete di luce del sole sulla sabbia (0, niente rete). |
BEND | script.js | 1 | Quanto l'acqua piega la sabbia che si vede sotto. |
WAKE | script.js | 1 | Quanto il dito, cioè il puntatore, muove l'acqua passandoci sopra (0, niente). |
STONES | script.js | 5 | Quanti sassi restano sul fondo prima che il più vecchio si copra di sabbia. |
DONE | script.js | Intro skipped | La scritta quando il sasso è affondato. |
BACK | script.js | 1.6 | I secondi prima che la scritta torni quella di prima. |
Quando usarla
Per il pulsante che salta qualcosa in un lettore o in un percorso: Skip intro, Skip recap, Skip ad in un lettore video o di podcast, Skip for now nelle schermate di benvenuto di un'app. Sta bene dove c'entrano l'estate, l'acqua, il viaggio, la natura: piattaforme di documentari, app di viaggi e di vacanze, siti di stabilimenti, piscine e campeggi. È un pulsante da far vedere, uno per pagina, non da mettere in una barra di comandi.
Sul telefono
La vaschetta è alta 60 pixel come gli altri pulsanti e larga 320, o lo schermo meno 48; l'acqua si ricalcola alla misura vera. Il tocco lancia il sasso e fa un cerchio dove il dito tocca; il dito trascinato di traverso lascia la sua scia nell'acqua (touch-action: pan-y, così in su e in giù la pagina scorre ancora). Il sasso entra da sinistra sopra il margine della pagina, che non scorre di lato. Su un telefono lento l'acqua si disegna a un pixel per pixel css.
Con il movimento ridotto
Niente volo e niente onde: al clic il sasso nuovo è già posato sul fondo e la vecchia immagine dell'acqua svanisce sopra di lui in una dissolvenza; la scritta e l'icona cambiano in dissolvenza, senza scivolare né sfocarsi. Il puntatore non muove l'acqua, al caricamento non cade la goccia, e la vaschetta premuta si scurisce appena invece di stringersi.
Trappole
- Lo smorzamento moltiplicato sull'altezza a ogni passo toglieva all'onda solo la radice quadrata di quel fattore (il prodotto delle due radici dello schema): l'acqua non tornava mai ferma e la pagina disegnava sessanta fotogrammi al secondo anche a riposo. Ora lo smorzamento è tarato sulla radice e l'acqua si ferma in un paio di secondi.
- Smorzamento forte e viscosità insieme spegnevano le increspature fini, proprio quelle che fanno le linee delle caustiche, e i cerchi del sasso non si vedevano più: viscosità ridotta a un filo, smorzamento dimezzato e ammaccature più profonde.
- L'acqua disegnata a un pixel per pixel css lasciava una scaletta lungo il bordo curvo dell'acqua alle estremità: ora si disegna a due pixel per pixel css con le pendenze interpolate, e lungo il bordo ogni pixel mescola acqua e parete per quanto ne copre.
- Un colore dell'acqua che toglieva troppo faceva sparire la sabbia e la vaschetta sembrava una piscina: la tinta è divisa in due, quello che l'acqua lascia passare (--water, chiaro) e quello che aggiunge da sé (--glow, scuro), e la sabbia si vede.
- Il sasso affondava dritto dove toccava e, guardando a 45 gradi, il fondo si vede più in basso della superficie: i sassi finivano mezzi nascosti sotto il bordo davanti. Ora il lancio scivola un poco verso il fondo della vaschetta, come i lanci veri, e il sasso che scende si disegna alla profondità a cui si vede la sabbia, così non salta quando diventa parte del fondo.
- La parete sott'acqua dipinta d'un colore suo faceva una riga scura e netta in fondo alla vaschetta: ora prende la luce del cielo come la sabbia e la raggiunge senza stacco.
Librerie
GSAP 3.15.0, Figtree (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 18 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 12 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.
