La palla di neve

Fisica, SVGGSAPMediaPeso compresso: Demo 10 KBGSAP 28 KBGratisScarica lo zip

Una palla di vetro con la neve su una base di noce con la targhetta, e dentro una casetta con tre abeti. Al clic la palla viene scossa: la base si inclina avanti e indietro, la luce corre sul vetro, l’acqua gira e solleva i fiocchi a stella, che ricadono piano oscillando e si posano sui tetti e sugli alberi. Il puntatore la inclina un poco e la neve segue.

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>Snow globe</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <header class="copy">
      <p class="copy__shop" data-reveal>Alder &amp; Pine Gift Shop</p>
      <h1 class="copy__title" data-title>Shake up a little winter</h1>
      <p class="copy__line" data-reveal>A hand-blown glass globe on a walnut base, with a cottage and three firs from the Fernhollow woods inside.</p>
      <p class="copy__meta" data-reveal><span class="copy__price">$38</span><span>14 cm tall, water and glitter-free snow</span></p>
    </header>

    <div class="shelf">
      <!-- the whole globe is the button: a click (or a tap) shakes it -->
      <button class="globe" type="button" aria-label="Shake the snow globe" data-globe data-autoclic>
        <svg class="globe__svg" viewBox="-215 -200 430 440" aria-hidden="true" focusable="false">
          <defs>
            <radialGradient id="sg-water" cx="0.4" cy="0.3" r="0.85">
              <stop offset="0" style="stop-color: var(--water-light)"/>
              <stop offset="1" style="stop-color: var(--water-deep)"/>
            </radialGradient>
            <linearGradient id="sg-wood" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" style="stop-color: var(--wood-light)"/>
              <stop offset="1" style="stop-color: var(--wood-dark)"/>
            </linearGradient>
            <linearGradient id="sg-brass" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0" style="stop-color: var(--brass-light)"/>
              <stop offset="1" style="stop-color: var(--brass-dark)"/>
            </linearGradient>
            <linearGradient id="sg-sheen" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0" stop-color="#fff" stop-opacity="0"/>
              <stop offset="0.5" stop-color="#fff" stop-opacity="0.38"/>
              <stop offset="1" stop-color="#fff" stop-opacity="0"/>
            </linearGradient>
            <clipPath id="sg-clip"><circle r="160"/></clipPath>
            <clipPath id="sg-base"><path d="M-124 114H124L154 196H-154Z"/></clipPath>
            <!-- a six-armed snowflake: a soft blue outline under a white star, so it also shows on the snow -->
            <g id="sg-flake">
              <path class="flake__edge" d="M0 -4V4M-3.46 -2L3.46 2M-3.46 2L3.46 -2M-1.2 -3.1L0 -2.2L1.2 -3.1M-1.2 3.1L0 2.2L1.2 3.1M-3.3 -0.4L-2.4 -1.2M3.3 0.4L2.4 1.2M3.3 -0.4L2.4 -1.2M-3.3 0.4L-2.4 1.2"/>
              <path class="flake__body" d="M0 -4V4M-3.46 -2L3.46 2M-3.46 2L3.46 -2M-1.2 -3.1L0 -2.2L1.2 -3.1M-1.2 3.1L0 2.2L1.2 3.1M-3.3 -0.4L-2.4 -1.2M3.3 0.4L2.4 1.2M3.3 -0.4L2.4 -1.2M-3.3 0.4L-2.4 1.2"/>
            </g>
          </defs>

          <ellipse class="shadow" cx="0" cy="222" rx="176" ry="12" data-shadow/>

          <!-- tilt: the pointer and the hover; shake: the click. Both turn about the bottom of the base -->
          <g data-tilt>
            <g data-shake>
              <g data-water clip-path="url(#sg-clip)">
                <circle class="water" r="160" fill="url(#sg-water)"/>
                <path class="hill hill--far" d="M-170 40C-120 4 -80 10 -40 26C0 0 50 -14 100 12C130 22 150 14 170 20V120H-170Z"/>
                <path class="hill hill--near" d="M-170 58C-110 38 -60 50 0 46C60 40 120 34 170 50V120H-170Z"/>
                <g data-trees></g>
                <g class="house">
                  <rect class="house__chimney" x="-22" y="-26" width="12" height="32"/>
                  <rect class="house__chimney-cap" x="-24" y="-28" width="16" height="5" rx="1.5"/>
                  <rect class="house__wall" x="-78" y="6" width="72" height="64"/>
                  <path class="house__boards" d="M-78 22H-6M-78 38H-6M-78 54H-6"/>
                  <path class="house__roof" d="M-94 16L-42 -38L10 16L4 20L-42 -28L-88 20Z"/>
                  <path class="house__gable" d="M-78 10L-42 -26L-6 10Z"/>
                  <circle class="house__window" cx="-42" cy="-6" r="7"/>
                  <path class="house__frame" d="M-42 -13V1M-49 -6H-35"/>
                  <rect class="house__window" x="-70" y="28" width="16" height="15" rx="1"/>
                  <path class="house__frame" d="M-62 28V43M-70 35.5H-54"/>
                  <path class="house__door" d="M-32 70V40Q-24 32 -16 40V70Z"/>
                  <circle class="house__knob" cx="-20" cy="56" r="1.4"/>
                </g>
                <path class="ground" data-ground/>
                <g data-caps></g>
                <g data-flakes></g>
              </g>

              <!-- the glass: the rim, the reflection that stays with the light, the sheen that runs across on a shake -->
              <circle class="glass__rim" r="160"/>
              <g clip-path="url(#sg-clip)">
                <rect class="glass__sheen" x="-90" y="-200" width="90" height="400" fill="url(#sg-sheen)" data-sheen/>
              </g>
              <g data-shine>
                <path class="glass__shine" d="M-118 -78C-98 -122 -58 -146 -18 -150C-60 -136 -92 -112 -110 -70Z"/>
                <path class="glass__shine glass__shine--small" d="M112 46C118 30 120 18 120 6C126 20 124 34 118 50Z"/>
              </g>

              <!-- the walnut base with its brass plaque -->
              <g class="base">
                <ellipse class="base__collar" cx="0" cy="112" rx="122" ry="10"/>
                <path class="base__body" d="M-124 114H124L154 196H-154Z"/>
                <path class="base__grain" clip-path="url(#sg-base)" d="M-118 132C-60 128 20 136 120 130M-130 150C-40 146 60 154 134 148M-142 170C-50 166 40 174 146 168M-148 186C-60 182 50 190 150 184"/>
                <rect class="base__foot" x="-168" y="194" width="336" height="18" rx="5"/>
                <rect class="base__plate" x="-70" y="138" width="140" height="42" rx="6" fill="url(#sg-brass)"/>
                <rect class="base__plate-edge" x="-64" y="143" width="128" height="32" rx="4"/>
                <text class="base__small" x="0" y="155" text-anchor="middle">GREETINGS FROM</text>
                <text class="base__name" x="0" y="171" text-anchor="middle">Fernhollow</text>
              </g>
            </g>
          </g>
        </svg>
      </button>
      <p class="hint" data-hint>Click the globe to shake it</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.

34 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 palla di neve» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

La pagina di un prodotto di un negozio di souvenir inventato, Alder & Pine Gift Shop: a sinistra il titolo, la descrizione e il prezzo, a destra la palla di vetro su una base di noce con la targhetta d’ottone «Greetings from Fernhollow». Dentro c’è una notte d’inverno blu, con le colline, una casetta rossa con le finestre accese e tre abeti; la neve è già posata sui tetti, sugli alberi e per terra. All’arrivo le lettere del titolo salgono con un rimbalzo e la palla cade sullo scaffale: l’atterraggio schiaccia un poco la base, che torna su con un elastico, e il colpo solleva la neve, che ricade. Al clic la palla viene scossa: si inclina a destra e a sinistra sempre meno, con un elastico alla fine, una striscia di luce corre sul vetro, i riflessi restano dalla parte della luce e scivolano sul vetro mentre la palla si inclina, le lettere del titolo saltano una dopo l’altra. L’acqua gira e si agita, solleva ogni fiocco (quelli sui tetti e sugli alberi compresi) e poi lo lascia scendere piano: ogni fiocco è una stellina a sei punte disegnata che gira su se stessa e oscilla da un lato all’altro, e dove tocca un tetto, un ramo o la neve per terra si ferma; lo strato bianco sui tetti e sui rami si ingrossa man mano che la neve si posa. Muovendo il puntatore la palla si inclina leggermente e la neve ancora in acqua la segue; passandoci sopra si solleva un poco dallo scaffale.

Come funziona

La scena è fatta di superfici

Il tetto e ogni piano degli abeti sono triangoli, il comignolo è un tratto piano, il terreno è una curva. Una funzione dice, per ogni x, quale superficie sta più in alto e a che altezza: lì si posa il fiocco che cade. Vicino ai lati, dove il vetro curvo viene prima del terreno, il fiocco si appoggia al vetro.

Ogni fiocco segue l’acqua e affonda

Ogni fiocco ha posizione e velocità. A ogni passo la velocità si avvicina a quella dell’acqua intorno (un vortice più due onde che si incrociano, che si calmano da sole) e il peso lo tira giù: con l’acqua che frena, cade a una velocità costante e lenta. In più oscilla da un lato all’altro con un seno suo, e gira su se stesso più forte quando va veloce.

L’acqua resta indietro rispetto al vetro

La fisica si fa dentro la palla. Quando la palla si inclina, il peso visto da dentro si inclina al contrario; quando accelera, i fiocchi sentono una spinta opposta; quando gira, l’acqua gira in ritardo e i fiocchi vengono trascinati in senso contrario. È la stessa cosa sia per lo scuotimento sia per l’inclinazione del puntatore: per questo la neve segue.

Lo scuotimento è una timeline

Al clic una timeline GSAP porta la rotazione e lo spostamento della palla per una serie di oscillazioni che calano, con un elastico alla fine, schiaccia un poco la base, fa passare la striscia di luce sul vetro e fa saltare le lettere del titolo. Nello stesso momento l’acqua prende un vortice e un’agitazione, e ogni fiocco riceve una spinta verso l’alto e di lato.

Il vetro riflette e la neve si accumula

I riflessi stanno in un gruppo che gira al contrario della palla: restano dalla parte della luce e scivolano sul vetro. Ogni tetto e ogni piano degli abeti ha una riga bianca, disegnata solo dove è scoperta, che si ingrossa con i fiocchi posati sopra (un tween con un rimbalzo) e si assottiglia quando lo scuotimento li porta via.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`FLAKES`	script.js	`90`	Quanti fiocchi ci sono nell’acqua.
`SHAKE`	script.js	`14`	Di quanti gradi si inclina la palla quando viene scossa.
`SWIRL`	script.js	`1`	Quanto gira l’acqua e quanto in alto porta la neve allo scuotimento.
`FALL`	script.js	`1`	Quanto in fretta scende la neve: meno, più lenta.
`FLUTTER`	script.js	`1`	Quanto oscilla ogni fiocco da un lato all’altro mentre cade.
`TILT`	script.js	`6`	Di quanti gradi il puntatore inclina la palla.
`--water-deep`	style.css	`#183654`	Il colore dell’acqua ai bordi (al centro è --water-light; la casetta è --wall, gli abeti --fir).

Provali nel Playground

Quando usarla

Per la pagina di un prodotto in un negozio di regali, una campagna di Natale o d’inverno, un biglietto di auguri digitale, un calendario dell’avvento, la pagina di un luogo di montagna o una pagina 404 che si fa perdonare: ovunque serve un oggetto da toccare che premia il clic.

Sul telefono

Le stesse animazioni con le misure adattate: le scritte in alto e la palla sotto, larga quanto lo schermo. Un tocco scuote la palla; trascinando il dito la palla si inclina e, lasciando, torna dritta con un elastico.

Con il movimento ridotto

Niente si muove: la neve è già posata, la palla resta ferma e le scritte compaiono in dissolvenza. Al clic la neve sparisce in dissolvenza e ricompare posata in un altro modo.

Trappole

Con la spinta del clic data solo ai fiocchi, l’acqua li frenava in un attimo e la neve si alzava di poco: serve una spinta più forte e un freno più leggero, e soprattutto un’acqua che continua a girare da sola per un paio di secondi.
La riga bianca di un piano basso dell’abete, disegnata lungo tutto il triangolo, passava sopra il piano di sopra e sembrava un contorno: la riga si disegna solo dove quel piano è davvero la superficie più alta.
Il vetro come appoggio valeva anche a metà altezza: i fiocchi spinti contro i lati restavano attaccati al vetro a mezz’aria. Il vetro tiene la neve solo nella parte bassa.
Le trasformazioni della palla (inclinazione del puntatore, scuotimento, schiacciamento) le scrive lo script sui due gruppi SVG, con il perno in fondo alla base: così la fisica conosce lo stesso angolo e la stessa posizione che si vedono.
Una variabile CSS nell’attributo stop-color dei gradienti SVG non vale: va scritta in style.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 10 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.