Il pulsante che congela

Pulsanti, Fisica, TransizioniCanvas, GSAPImpegnativaPeso compresso: Demo 11 KBGSAP 28 KBGratisScarica lo zip

Il pulsante Freeze card dell'app di una banca: premuto, la brina cresce davvero sulla carta e sul pulsante partendo dagli angoli, in cristalli ramificati (aggregazione limitata dalla diffusione), finché tutto è azzurro e opaco e dice Card frozen. Premuto di nuovo, il ghiaccio si scioglie dal punto toccato e lascia gocce che scivolano giù.

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>The freeze card button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/manrope@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the freeze button of a banking app, under the card it freezes. Pressed, frost grows over the card and the
         button from their corners in branching crystals (drawn in the canvas over both); pressed again, it melts from
         where it was touched and runs down in drops -->
    <div class="freeze" data-freeze>
      <div class="card" data-card>
        <div class="card__face" aria-hidden="true">
          <svg class="card__chip" viewBox="0 0 40 30"><rect x="0.75" y="0.75" width="38.5" height="28.5" rx="6"/><path d="M0.75 10.5h11.5M0.75 19.5h11.5M27.75 10.5h11.5M27.75 19.5h11.5M12.25 0.75v28.5M27.75 0.75v28.5M12.25 15h15.5"/></svg>
          <svg class="card__wave" viewBox="0 0 24 24"><path d="M8.5 8.2a5.5 5.5 0 0 1 0 7.6M12 5.6a9.2 9.2 0 0 1 0 12.8M15.5 3a13 13 0 0 1 0 18"/></svg>
        </div>
      </div>
      <canvas class="freeze__frost" aria-hidden="true" data-frost></canvas>

      <!-- the words of the card, over the frost so that they never go under it -->
      <div class="card__words" data-words>
        <span class="card__kind">Everyday debit</span>
        <span class="card__name">Alex Morgan</span>
        <span class="card__end"><span class="card__end-label">ending</span> 4821</span>
      </div>

      <button class="freeze__btn" type="button" aria-pressed="false" aria-describedby="freeze-live" data-btn data-autoclic></button>
      <!-- the words of the button, over the frost too -->
      <span class="freeze__label" aria-hidden="true" data-label>
        <svg class="freeze__flake" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.5v19M3.8 7.25l16.4 9.5M3.8 16.75l16.4-9.5M9.4 3.9L12 6.4l2.6-2.5M9.4 20.1L12 17.6l2.6 2.5M4.1 10.6l3.5-.9-.9-3.5M19.9 13.4l-3.5.9.9 3.5M6.7 17.8l.9-3.5-3.5-.9M17.3 6.2l-.9 3.5 3.5.9"/></svg>
        <span class="freeze__words">
          <span class="freeze__main" data-main>Freeze card</span>
          <span class="freeze__sub" data-sub>Tap to unfreeze</span>
        </span>
      </span>
      <p class="sr" id="freeze-live" 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

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 «Il pulsante che congela» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero una carta di debito senza marchi, sfumata dall'arancio al fucsia al viola, con il chip, il simbolo del contactless, Everyday debit, Alex Morgan ed ending 4821; sotto, un pulsante scuro largo quanto la carta con un fiocco di neve e Freeze card. Col mouse sopra il pulsante il fiocco gira e negli angoli della carta e del pulsante spunta la prima brina. Cliccando, la scritta dice Freezing… e dai quattro angoli della carta e dalle due estremità del pulsante crescono cristalli ramificati bianchi, con le punte che crescono azzurre e luminose; dietro di loro una velatura di brina azzurrina riempie gli spazi a chiazze, i colori della carta si spengono e le scritte diventano blu scuro. Quando tutto è coperto una fascia di luce attraversa la brina e il pulsante dice Card frozen con sotto Tap to unfreeze. Cliccando di nuovo la brina si scioglie a partire dal punto toccato, con un bordo irregolare: dietro resta per un attimo un velo bagnato, e tante gocce scivolano giù a scatti lasciando una scia sottile, fino al bordo di sotto, dove svaniscono. La carta torna calda e il pulsante dice di nuovo Freeze card.

Come funziona

Una griglia e la sua maschera

Carta e pulsante stanno su una griglia di celle da 2 pixel (160 per 139). Ogni cella sa se è sulla carta, sul pulsante o fuori (rettangoli arrotondati), e ha un valore di rumore liscio per le chiazze della brina e il bordo irregolare del disgelo.

I cristalli: DLA

All'apertura della pagina si fa un'aggregazione limitata dalla diffusione: dei camminatori partono a caso sulla superficie e vagano finché toccano la brina, e lì si attaccano con probabilità STICKY. Per non metterci troppo una mappa delle distanze dal cristallo più vicino (aggiornata attorno a ogni cella attaccata) permette salti lunghi lontano dal ghiaccio; i camminatori restano sulla loro superficie. Si ferma quando il ghiaccio copre BRANCHES della superficie.

Un tempo di arrivo per cella

Una visita in ampiezza attraverso il cristallo, partendo dai sei semi, dà a ogni cella del cristallo la distanza lungo i rami: così ogni ramo cresce dalla radice alle punte. Una seconda visita da tutte le celle del cristallo dà alle altre il tempo del ramo più vicino più un ritardo che cresce con la distanza: la velatura arriva dietro i rami. L'animazione è solo una soglia T che sale con GSAP: veloce e reversibile.

Il disegno e la luce

A ogni fotogramma la griglia si scrive in un ImageData: velatura e cristalli composti con il loro alfa, le punte appena nate azzurre, poi drawImage la ingrandisce liscia sul canvas. Il bagliore è la stessa immagine rimpicciolita e riingrandita, aggiunta in modo lighter. Le scritte della carta e del pulsante stanno sopra il canvas e cambiano colore prima che la brina le raggiunga, così restano sempre leggibili.

Il disgelo e le gocce

Premendo di nuovo ogni cella riceve un tempo di disgelo: distanza dal punto toccato più rumore. Una seconda soglia M avanza e cancella la brina, lasciando per un attimo un velo bagnato. Le celle appena sciolte che erano coperte fanno nascere gocce: piccoli corpi che si attaccano e scivolano a scatti, con la loro scia, fino al bordo di sotto della loro superficie, mossi in requestAnimationFrame col passo limitato a 1/30.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`FREEZE`	script.js	`2.2`	I secondi che la brina impiega a coprire la carta.
`MELT`	script.js	`1.6`	I secondi che il disgelo impiega ad attraversarla.
`BRANCHES`	script.js	`0.3`	Quanta superficie prendono i cristalli prima che arrivi la velatura, da 0,1 a 0,45.
`STICKY`	script.js	`0.55`	Quanto facilmente un camminatore si attacca al ghiaccio: meno, cristalli più spessi e folti.
`HAZE`	script.js	`0.78`	Quanto diventa opaca la brina.
`DROPS`	script.js	`26`	Quante gocce d'acqua al massimo scivolano insieme.
`GLOW`	script.js	`0.4`	Il bagliore bianco e azzurro dei cristalli.

Provali nel Playground

Quando usarla

Per l'interruttore che blocca una carta, un conto, un abbonamento o un accesso: un'azione reversibile e importante, dove lo stato congelato deve vedersi a colpo d'occhio e lo sblocco deve sembrare un gesto caldo.

Sul telefono

Carta e pulsante sono larghi 320 pixel e stanno in uno schermo da 390; sotto i 360 tutto si rimpicciolisce un poco. Il canvas segue la densità dello schermo (fino a 2) e il disgelo parte dal punto in cui il dito ha toccato. Il dito che preme fa spuntare la brina negli angoli come il mouse sopra.

Con il movimento ridotto

Niente crescita e niente gocce: la brina completa compare in dissolvenza sulla carta e sul pulsante, che dicono Card frozen; sbloccando, la brina svanisce in dissolvenza e la carta torna calda.

Trappole

Il canvas della brina sta sopra il pulsante, ma le scritte devono stare sopra la brina: dentro il pulsante non bastava uno z-index, perché lo scale di GSAP alla pressione crea un nuovo contesto di sovrapposizione e la brina copriva la scritta. Le parole del pulsante sono un elemento a parte sopra il canvas, il pulsante vero resta sotto.
Le scritte bianche sparivano sulla brina e quelle blu non si leggevano sul pulsante scuro: cambiano colore quando la brina sta per raggiungerle, non quando è finita, e tornano bianche solo quando il disgelo ha liberato la loro zona.
La crescita aggiunta dopo due chiamate add nella timeline partiva in fondo, quasi due secondi dopo il clic: il tween della soglia ha la posizione 0 esplicita.
Il tempo dei cristalli preso dall'ordine di attacco della DLA faceva comparire puntini sparsi qua e là: il tempo giusto è la distanza lungo i rami dai semi, così ogni ramo cresce dalla radice.
Il tween dell'anteprima al passaggio del dito restava vivo e combatteva con la crescita vera sulla stessa soglia: congelando si fermano tutti i tween della brina prima di partire.

Librerie

GSAP 3.15.0, Manrope (font variabile) 5.3.0.

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