Il menu a onda di peso
Menu, Testo, Hover, Fisica
NuovaGratis
Tutti i componenti
Il pulsante di gelatina
Un grande pulsante Get started fatto di gelatina di fragola traslucida, un corpo morbido vero con quarantotto punti sul bordo, molle di forma e una pressione che tiene il volume. Il puntatore che arriva da fuori incava la superficie finché ci scivola dentro, e la gelatina trema; premuta si schiaccia sotto il dito e torna su rimbalzando con oscillazioni che si smorzano; tirata e lasciata, vibra. La scritta è dentro la gelatina e si piega con lei, lettera per lettera.
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 jelly button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the jelly button: a soft body of strawberry jelly drawn on a canvas, under a real transparent button. The
pointer dents its surface, a press squashes it under the finger, a pull stretches it, and it wobbles back.
The words are inside the jelly and bend with it -->
<div class="jelly" data-jelly>
<div class="jelly__pot" data-pot>
<canvas class="jelly__canvas" data-canvas aria-hidden="true"></canvas>
<button class="jelly__btn" type="button" data-btn data-autoclic><span class="sr" data-name>Get started</span></button>
</div>
<p class="jelly__hint" data-rise><span data-hint>Free for 14 days · no card needed</span></p>
<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.
19 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 di gelatina» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco un blocco di gelatina rosa fragola a forma di pillola, lucido, con una fascia di luce lungo il bordo alto, un riflesso bianco in alto a sinistra, il bordo più chiaro dove la gelatina è sottile e, sul tavolo, un’ombra rosata con una macchia di luce davanti, quella che la gelatina lascia passare. Dentro c’è scritto Get started con una freccia, in bianco; sotto, in grigio, Free for 14 days · no card needed. All’arrivo la gelatina cade sul tavolo da poco più su, si schiaccia e ondeggia fino a fermarsi. Avvicinando il puntatore dall’alto o dai lati, la superficie si incava intorno alla punta come se la si spingesse con un dito, e i fianchi si gonfiano per tenere il volume; spingendo più a fondo il puntatore ci scivola dentro, l’incavo torna fuori e la gelatina trema. Dentro, muovere il puntatore trascina un poco la gelatina, che ondeggia quando si ferma; sotto la punta compare una conca d’ombra e luce, e la freccia si sporge. Premendo, la gelatina si schiaccia e si allarga, più a fondo sotto il dito, e la scritta si schiaccia con lei; lasciando, rimbalza in alto oltre la sua forma e oscilla. Tenendola premuta e tirando, si allunga dietro la mano e, lasciata, vibra. Il clic fa partire l’iscrizione: la scritta sale e sfuma, arriva Setting up e la gelatina respira piano; poi un piccolo salto di gioia, You’re in con una spunta, e sotto Check your inbox to finish. Dopo qualche secondo torna Get started. Da tastiera l’anello del fuoco segue il bordo della gelatina, anche mentre si muove.
Come funziona
Un corpo morbido a Verlet
Il bordo della gelatina è fatto di 48 punti, distribuiti a passo uguale sul contorno di un rettangolo dai lati tondi. Ogni punto ricorda dov’era e dov’è: la nuova posizione viene dalle ultime due, dalle forze e da uno smorzamento (integrazione di Verlet), in sei passi per fotogramma col passo limitato a 1/30 di secondo. Quando l’energia dei punti scende sotto una soglia e niente li tocca, il ciclo smette di disegnare.
Forma, bordo, volume
Ogni punto è tirato verso il posto che la forma a riposo gli darebbe intorno al centro attuale del corpo (shape matching), e il centro è tirato verso il tavolo, un poco più in basso perché la gelatina ci si appoggi col suo peso. Fra vicini ci sono molle di lunghezza e una molla di piega, che tiene ogni punto dove lo mettono i suoi due vicini a riposo: così il bordo si piega a onde morbide invece di accartocciarsi. Una pressione lungo le normali tiene l’area, e un incavo da una parte gonfia l’altra.
Il dito che incava
Il puntatore è una punta di POKE pixel. Da fuori spinge la superficie verso l’interno: ogni punto che copre scivola lungo la sua normale a riposo fino al lato lontano della punta, e perde la velocità che lo riporterebbe contro di lei, così l’incavo avvolge la punta e la segue. Quando la punta è più di POP pixel dentro la forma, ci scivola e l’incavo torna fuori di colpo. Dentro, la velocità del puntatore trascina i punti vicini.
Premere e tirare
La pressione schiaccia la forma che le molle cercano (più bassa di SQUASH, più larga di quasi la metà) e affonda il bordo alto sotto il dito con una gaussiana. Lasciando, la forma torna di colpo e le molle la lanciano oltre: il rimbalzo e le oscillazioni vengono dalla fisica, non da una curva. Tirando, i punti vicini alla presa seguono la mano fino a PULL pixel, con una tangente iperbolica che frena l’allungamento.
Le lettere dentro la gelatina
Ogni lettera ha il suo centro a riposo; le sue coordinate a valore medio rispetto ai 48 punti del bordo lo portano dentro la gelatina com’è adesso. Due punti vicini, quattro pixel a destra e sotto, danno l’allungamento, l’inclinazione e la rotazione locali: è la matrice con cui il canvas disegna quella lettera. Così le parole si schiacciano, si piegano e ondeggiano con la gelatina, restando testo nitido.
La luce
Il corpo è riempito con un gradiente dal rosa chiaro in alto al rosso fondo in basso, con una luce raccolta in basso al centro; il bordo ha un alone chiaro all’interno, dove la gelatina è sottile, e una linea scura sottile. La fascia lucida e il riflesso seguono i punti del bordo spostati verso l’interno lungo le normali, e l’ombra sul tavolo si allarga e si schiarisce quando la gelatina salta.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
STIFF | script.js | 380 | Quanto forte la gelatina torna alla sua forma: più alto, ondeggia più in fretta. |
DAMP | script.js | 3.4 | Quanto in fretta si spegne l’ondeggiare: la parte di velocità che perde ogni secondo. |
SQUASH | script.js | 0.2 | Quanto la pressione schiaccia la gelatina, come parte della sua altezza. |
POKE | script.js | 18 | La grandezza della punta del dito, in pixel: quanto è largo l’incavo che spinge il puntatore. |
POP | script.js | 22 | Quanto a fondo il puntatore spinge la superficie, in pixel, prima di scivolarci dentro. |
PULL | script.js | 60 | Quanto si allunga la gelatina tenuta dietro la mano, in pixel. |
WAIT | script.js | 1.8 | I secondi dell’iscrizione finta. |
DONE | script.js | 2.8 | I secondi in cui il pulsante dice You’re in prima di tornare pronto. |
Quando usarla
Per l’invito principale di un prodotto giocoso: un’app per bambini o per il cibo, un gioco, uno strumento creativo, la pagina di lancio di una startup che vuole sembrare simpatica. Sta bene da solo su un fondo chiaro, con molto spazio intorno perché la gelatina possa saltare; il colore si cambia nelle variabili del CSS (nei commenti c’è anche la menta).
Sul telefono
La gelatina si stringe sulla larghezza dello schermo (a 390 pixel resta larga 300) e il canvas non sfora. Il dito non ha passaggio: un tocco preme la gelatina dove tocca, la schiaccia sotto il polpastrello e la fa rimbalzare quando si alza; trascinando la si allunga, e il pulsante tiene touch-action: none perché il dito tiri la gelatina invece di scorrere la pagina.
Con il movimento ridotto
La gelatina non si muove: niente caduta, niente incavi, niente rimbalzi né salti. Premuta si scurisce appena, le scritte e la riga sotto cambiano in dissolvenza, senza salire. Il disegno si rifà solo quando cambia qualcosa.
Trappole
- Coi punti tenuti solo dalla forma e dalle molle di lunghezza, all’impatto il bordo si accartocciava in tante piccole onde: una molla di piega fra ogni punto e i suoi due vicini lo tiene morbido.
- Spingere i punti fuori dalla punta del puntatore lasciando la loro velocità la faceva crescere a ogni passo contro la punta, e la gelatina esplodeva: la parte di velocità contro la punta va tolta.
- Spinti in direzione opposta al centro della punta, i punti sopra un puntatore già dentro la gelatina venivano spinti in fuori, facendo una gobba invece dell’incavo: la spinta va lungo la normale a riposo, sempre verso l’interno.
- Senza un limite, la punta spingeva anche il bordo opposto della gelatina, che ha la stessa normale girata: conta solo la superficie a meno di POP più la punta davanti al dito.
- Le strisce di un’immagine della scritta, disegnate una per una con drawImage, mettevano in ginocchio il canvas senza scheda grafica: ogni lettera disegnata con la sua matrice costa una decina di chiamate.
- Due scritte in dissolvenza insieme si sovrapponevano mentre la gelatina era schiacciata: ora la vecchia se ne va del tutto prima che arrivi la nuova.
- Con la gelatina appoggiata esattamente sul tavolo, premendo al centro le estremità si alzavano come una banana: il centro è tirato un poco sotto il tavolo, così la gelatina ci pesa sopra.
Librerie
GSAP 3.15.0, Fredoka (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 5 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.
