Attrezzi che cadono
Fisica, Hover
NuovaGratis
Torna alla libreria
Le piume al puntatore
Decine di piume disegnate posate sulla pagina di un marchio di cuscini: passandoci col puntatore lo spostamento d’aria le solleva, volteggiano, si girano e ricadono oscillando come foglie, poi si posano piano. Un clic è un soffio forte che le fa volare tutte.
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>Feathers on the page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<header class="bar" data-in>
<a class="brand" href="#" aria-label="Ellery Down, home">
<svg class="brand__mark" viewBox="0 0 40 40" aria-hidden="true">
<path d="M8 33 C14 24 22 15 33 7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
<path d="M15 24 C11 20 11 14 14 9 C18 11 21 15 21 19 M21 19 C24 14 29 11 33 7 C33 14 30 21 22 24 C19 25 17 25 15 24" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>
</svg>
<span class="brand__name">Ellery Down</span>
</a>
<nav class="nav" aria-label="Main">
<a href="#" class="nav__link"><span>Pillows</span></a>
<a href="#" class="nav__link"><span>Duvets</span></a>
<a href="#" class="nav__link"><span>Care</span></a>
</nav>
</header>
<!-- the shadows lie on the page, the feathers float above it -->
<div class="shadows" data-shadows aria-hidden="true"></div>
<section class="copy" data-copy>
<p class="copy__kicker" data-in>Hand-filled down pillows</p>
<h1 class="copy__title" data-title>Lighter than what is inside</h1>
<p class="copy__line" data-in>Every pillow is plumped by hand in our workshop and filled with loose down that never clumps. Sleep on it once and the old one goes to the dog.</p>
<p class="copy__cta" data-in>
<a class="pill" href="#" data-pill><span class="pill__text" data-text="Shop pillows">Shop pillows</span></a>
<span class="copy__note">Free returns for 100 nights</span>
</p>
</section>
<div class="feathers" data-feathers aria-hidden="true"></div>
<div class="puffs" data-puffs aria-hidden="true"></div>
<!-- a click anywhere is a strong breath; the button is there for the keyboard -->
<button class="blow" type="button" aria-label="Blow all the feathers into the air" data-blow></button>
<p class="hint" data-hint>Move over the feathers. Click to blow.</p>
</main>
<svg class="defs" width="0" height="0" aria-hidden="true"><defs data-defs></defs></svg>
<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.
32 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 «Le piume al puntatore» da Animorio e adattala al mio sitoCosa fa
La prima pagina di Ellery Down, un laboratorio di cuscini di piuma riempiti a mano: in alto il marchio e tre voci, in basso a sinistra il titolo, due righe e un pulsante. Sulla pagina sono posate trentaquattro piume disegnate, di cinque colori tenui: piume lunghe con il rachide, le due bandiere di barbe con qualche spacco e il ciuffo di piumino alla base, e piumini piccoli e soffici. All’arrivo scendono sulla pagina dondolando, come se si fosse appena sprimacciato un cuscino. Passando col puntatore l’aria che sposta le solleva: più veloce è il gesto, più salgono; volteggiano dalla parte in cui passa l’aria, si girano sul rachide e ricadono a pendolo, da un lato all’altro, veloci al centro dell’oscillazione e quasi ferme agli estremi. Vicino alla pagina un cuscino d’aria le rallenta e si posano piano, su un lato o sull’altro; la loro ombra si allontana e sbiadisce mentre salgono e torna sotto di loro quando atterrano. Un clic è un soffio forte: dal punto del clic si aprono riccioli d’aria, tutte le piume volano via e le parole del titolo si piegano e tornano su con un elastico.
Come funziona
Le piume disegnate
Ogni piuma è un simbolo SVG fatto dal codice: il rachide è una curva che si piega un poco, e lungo di lui partono le barbe dai due lati, inclinate verso la punta; le loro punte disegnano il contorno della bandiera, che si riempie di un colore tenue. In due o tre punti le barbe si inclinano di più e la bandiera si spacca, come nelle piume vere. Alla base un ciuffo di piumino. Ogni simbolo ha la sua copia piatta per l’ombra.
Altezza e ombra
Di ogni piuma si tiene il posto sulla pagina e l’altezza sopra di lei. Più è in alto, più sale sullo schermo e si ingrandisce un poco; la sua ombra resta sulla pagina, si allontana e sbiadisce. Sta in un livello sotto al testo, la piuma in uno sopra. Tutto si muove con le trasformazioni CSS.
La caduta a pendolo
In aria ogni piuma ha una fase che gira: lo spostamento di lato è il seno della fase, la velocità di caduta segue il quadrato del coseno, così scende veloce al centro dell’oscillazione e quasi si ferma agli estremi, come una foglia. Intanto si inclina dalla parte in cui va e si gira un poco sul rachide. Vicino alla pagina un cuscino d’aria la rallenta e calma l’oscillazione; quando tocca, lo spostamento diventa il suo posto. La fisica gira a 120 passi al secondo, a passo fisso.
L’aria del puntatore
A ogni movimento si guarda tutta la strada fatta dal puntatore dall’ultimo evento: le piume vicine a quel tratto, entro REACH, ricevono una spinta verso l’alto che cresce con la velocità del gesto (un gesto lento le fa solo scivolare e girare), una spinta nella direzione del gesto e una che le allontana. Il lato da cui passa l’aria decide da che parte volteggiano.
Il soffio del clic
Un clic, o un tocco breve sul telefono, dà a ogni piuma una spinta in alto e via dal punto del clic, più forte per le vicine, e un giro a caso. Dal punto del clic si aprono nove riccioli d’aria disegnati con un tratteggio che scorre, e le parole del titolo si abbassano e tornano su con un elastico, prima le più vicine.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
COUNT | script.js | 34 | Quante piume sono posate sulla pagina (una su quattro è un piumino). |
SIZE | script.js | 1 | Quanto sono grandi le piume. |
AIR | script.js | 1 | Quanta aria sposta il puntatore: 2 le solleva in alto anche con un gesto lento. |
REACH | script.js | 150 | Fino a quanti pixel dal puntatore l’aria solleva ancora una piuma. |
SWAY | script.js | 1 | Quanto oscillano da un lato all’altro mentre cadono. |
FALL | script.js | 1 | Quanto in fretta cadono: 0,5 le fa scendere lentissime. |
SPIN | script.js | 1 | Quanto volteggiano e si girano in aria. |
BLOW | script.js | 1 | La forza del soffio del clic. |
--feather-2 | style.css | #efd4cc | Uno dei cinque colori delle piume (sono da --feather-1 a --feather-5; il rachide è --quill, le ombre --shadow). |
Quando usarla
Per la prima pagina di un marchio di cuscini, piumini e biancheria per il letto, di cosmetici leggeri, di un albergo o di un negozio di cose morbide: un gioco da toccare che dice subito «leggero» e invita a restare.
Sul telefono
Le piume sono un poco più piccole e coprono tutta la pagina, col testo in basso. Si sollevano trascinando il dito fra loro; un tocco breve è il soffio. La fisica, la caduta a pendolo e le ombre sono le stesse.
Con il movimento ridotto
Niente vola: le piume sono già posate e compaiono con una dissolvenza. La piuma sotto il puntatore schiarisce piano; il clic le fa svanire tutte e ricomparire, in dissolvenza, in altri posti della pagina.
Trappole
- Se l’oscillazione a pendolo fosse il vero spostamento della piuma, l’attrito dell’aria la smorzerebbe insieme alle spinte. È uno scarto a parte, sommato solo nel disegno; quando la piuma tocca la pagina lo scarto diventa il suo posto, altrimenti scatterebbe al centro dell’oscillazione.
- Un puntatore veloce in un fotogramma salta oltre una piuma: l’aria si calcola sul tratto fatto dall’ultimo evento, prendendo il punto del tratto più vicino a ogni piuma, non solo la posizione finale.
- Spinta in alto vicino al bordo di sopra, una piuma uscirebbe dallo schermo: la sua altezza ha un tetto che dipende da dove sta sulla pagina.
- Con una scala di larghezza zero (la piuma vista di taglio mentre si gira) l’elemento sparisce e il browser lo tratta in modo strano: la scala di lato non scende mai sotto 0,08.
- Decine di elementi che si muovono con un filtro di sfocatura sono pesanti se la sfocatura cambia a ogni fotogramma: l’ombra ha una sfocatura fissa e cambia solo la trasparenza. Le piume ferme non si ridisegnano.
- Il video dell’anteprima e il Playground si fermano quando non c’è niente di GSAP in programma: un tween lento che si ripete tiene acceso l’orologio mentre le piume cadono.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.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 11 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.
