La notifica a nastro

Notifiche, Transizioni, FisicaCanvas, GSAPImpegnativaPeso compresso: Demo 12 KBGSAP 28 KBGratisScarica lo zip

La notifica di un messaggio che parte, fatta come un nastro di raso: ogni cambio di stato è una torsione che parte dall’icona e corre lungo il nastro fino al capo libero, che va un po’ oltre e torna, e la faccia che si gira porta lo stato nuovo. Il nastro arriva girandosi verso di te da sinistra e se ne va mettendosi di taglio; sotto il puntatore si piega appena e la luce ci scivola sopra.

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, viewport-fit=cover">
  <title>The ribbon toast</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/onest@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the button only sends a message: the notification at the bottom of the window is the component. It is a
         satin ribbon painted on a canvas: every change of state (sending, sent, undone, gone) is a twist that runs
         along it from the icon and shows its other face. The real buttons sit on top of the painting, transparent,
         and the words are read out by the status line -->
    <button class="send" type="button" data-send data-autoclic>Send message</button>
    <span class="floor" aria-hidden="true"></span>
    <section class="toaster" aria-label="Notifications" data-toaster>
      <div class="toast" data-toast inert>
        <canvas class="toast__paint" aria-hidden="true" data-shade></canvas>
        <canvas class="toast__paint" aria-hidden="true" data-paint></canvas>
        <button class="toast__undo" type="button" data-undo hidden>Undo</button>
        <button class="toast__close" type="button" aria-label="Dismiss notification" data-close></button>
      </div>
      <p class="sr" role="status" aria-live="polite" aria-atomic="true" data-live></p>
    </section>
  </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 «La notifica a nastro» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco un pulsante grigio chiaro, Send message, e sotto, in fondo alla finestra, il posto della notifica: larga 380 pixel e alta 70. Premendo il pulsante la notifica arriva come un nastro di raso scuro che si gira verso di te partendo da sinistra: davanti corre la punta stretta della torsione, dietro il nastro si distende con l’anello che gira, Sending message… e To Marta Rossi. Dopo un attimo il messaggio è partito e il nastro si torce ancora: dall’icona parte una torsione che corre fino all’altro capo, e dietro di lei compare l’altra faccia, blu, con la spunta che si disegna nel suo anello, Message sent, Delivered to Marta Rossi e Undo. Dove il nastro si gira verso la luce passa un riflesso, dove si gira verso il basso si scurisce, e il capo libero va un po’ oltre e torna. Undo torce il nastro un’altra volta, sulla faccia scura con la freccia che torna indietro: Sending undone, Back in your drafts. Dopo cinque secondi (due e mezzo dopo Undo) il nastro se ne va mettendosi di taglio, sempre da sinistra a destra. Col puntatore sopra il nastro si piega un poco proprio lì, all’indietro sopra la riga di mezzo e in avanti sotto, la luce ci scivola sopra e la notifica aspetta; si chiude con la croce, con Esc o trascinandola di lato o in giù. Ogni clic manda un messaggio nuovo a un’altra persona, e se il nastro sta ancora girando parte un’altra torsione dietro la prima. All’apertura della pagina parte un primo messaggio da solo.

Come funziona

Il nastro è una catena

Lungo il nastro ci sono 48 punti, ognuno col suo angolo θ. Una molla di torsione lega ogni punto ai due vicini, e un potenziale G·sin²θ, che ha le sue buche a faccia in su e a faccia in giù, fa voler stare il nastro piatto: θ'' = K(θ dei vicini − 2θ) − G·sin 2θ − C·θ' + F·sin²θ. Il primo punto lo gira GSAP di mezzo giro in 0,22 secondi (power2.inOut), l’ultimo è libero. La catena avanza a passi di 1/480 di secondo o più corti se l’onda è più veloce, col passo del fotogramma limitato a 1/30.

La torsione è un’onda solitaria

In una catena così (l’equazione di sine-Gordon) un mezzo giro viaggia come un kink: un’onda che tiene la sua forma, larga √(K / 2G) punti. La spinta F·sin²θ vale zero sulle due facce, quindi non inclina il nastro fermo, ma regala energia a ogni punto che si mette di taglio e porta il kink a velocità costante fino in fondo. Le costanti vengono dai valori: K da TWIST, G da LENGTH, C da WHIP, e F dalla velocità di un kink smorzato (McLaughlin e Scott), qui a sei decimi della velocità delle onde. Arrivato al capo libero il kink lo fa andare oltre, e le buche del potenziale lo riportano indietro.

Le facce si contano

Ogni mezzo giro mostra la faccia dopo, quindi le facce si contano: un punto girato di k mezzi giri mostra la faccia k. Ogni cambio di stato (in invio, inviato, annullato, andato) prende il numero dopo e gira il primo punto fino a lì. Prima di arrivare e dopo essersene andato il nastro mostra una faccia vuota: così anche l’entrata e l’uscita sono torsioni. Con clic veloci partono più kink in fila: due kink dello stesso verso si respingono, quindi non si fondono mai.

Dipinto a colonne

Ogni faccia è una tela nascosta, dritta, con due righe vuote sopra e sotto. Il nastro si dipinge una colonna di pixel alla volta: l’angolo viene dai due punti vicini, e le colonne con lo stesso angolo vanno in un drawImage solo (a riposo uno per tutto il nastro, e le parole restano nitide). Ogni colonna è la sua faccia schiacciata dal coseno dell’angolo, in prospettiva: i bordi stanno a ±h·cos φ · D / (D ± h·sin φ), con D = DEPTH. Il retro è dipinto dritto, così dopo mezzo giro si legge.

La luce e l’ombra

La lampada sta in alto e davanti: una faccia girata in giù si scurisce, una girata in su prende un po’ di luce, e passando per l’angolo che manda la lampada nell’occhio fa un riflesso (un coseno alla sessantesima). Un velo nero di a e uno bianco di b sono un velo solo di alpha 1 − (1 − a)(1 − b) e grigio 255·b / alpha: una riga di pixel con un velo per colonna, stirata sul nastro in source-atop. L’ombra sta su una tela sua sotto il nastro, a metà misura, e si ridipinge solo quando cambia il profilo: la forma si disegna lontano e solo la sua ombra, spostata indietro, cade sulla tela.

I pulsanti veri

Sopra la pittura ci sono i pulsanti veri, trasparenti, messi dagli stessi numeri che dipingono quelli finti; le parole le legge una riga role="status". Il tempo per andarsene è un delayedCall di GSAP che si ferma col puntatore sopra, col focus dentro, col dito che tiene e con la pagina nascosta. Esc la manda via; trascinata, sceglie la direzione dopo sei pixel e oltre 100 di lato o 36 in giù, o lanciata, vola via. L’anello del focus si vede solo a nastro piatto.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SENDING`	script.js	`1.4`	I secondi che il messaggio impiega a partire.
`LIFE`	script.js	`5`	I secondi in cui la notifica resta a messaggio partito (aspetta col puntatore sopra).
`AFTER_UNDO`	script.js	`2.6`	I secondi in cui resta dopo Undo.
`TWIST`	script.js	`0.55`	I secondi che una torsione impiega a correre lungo il nastro.
`LENGTH`	script.js	`70`	Quanto è lungo il tratto di nastro che si torce, in pixel.
`WHIP`	script.js	`0.6`	Quanto il capo libero va oltre e torna: 0 per niente, 1 tanto.
`LEAN`	script.js	`9`	Quanto si piega il nastro sotto il puntatore, in gradi.
`SHEEN`	script.js	`0.6`	Il riflesso della luce sul nastro che gira: 0 niente, 1 forte.
`DEPTH`	script.js	`480`	Quanto è lontano l’occhio, in pixel: meno sembra più profondo.
`PEOPLE`	script.js	`['Marta Rossi', 'Jonas Weber', 'Priya Nair', 'Leo Brandt']`	A chi vanno i messaggi, a turno.
`WORDS`	script.js	`Sending message…, Message sent, Sending undone, Back in your drafts`	Le parole degli stati: in invio, inviato, annullato e la riga sotto dopo Undo.

Provali nel Playground

Quando usarla

Per un’azione che ha un esito e un modo per tornare indietro: un messaggio che parte, un pagamento, un file nel cestino, una pubblicazione. Una notifica alla volta, con una riga di titolo e una di dettaglio; per tante notifiche insieme c’è la pila. Sta bene dove si vuole che la conferma si noti senza fermare chi lavora.

Sul telefono

La notifica prende la larghezza dello schermo meno 32 pixel (358 a 390) e sta in fondo, sopra la zona sicura; il nastro si dipinge alla densità vera dello schermo, fino a tre volte. Col dito si manda via trascinandola di lato o in giù, e tenuta si piega dove il dito la tiene; Undo e la croce hanno un’area di tocco più grande di quella dipinta.

Con il movimento ridotto

Niente torsioni e niente pieghe: il nastro resta piatto e cambia stato in dissolvenza, prima le parole vecchie spariscono sotto il colore nuovo e poi arrivano le nuove, così non stanno mai una sull’altra. Arriva e se ne va in dissolvenza, l’anello gira piano senza allungarsi, la spunta e la freccia sono già disegnate. Trascinarla via funziona ancora, e svanisce invece di volare.

Trappole

Sotto il puntatore il bordo alto del nastro scendeva di un pixel intero, a gradino: drawImage su un’altezza con i decimali non sfuma i bordi del rettangolo. Due righe vuote sopra e sotto ogni faccia, stirate insieme a lei, rendono il bordo morbido.
Col movimento ridotto la dissolvenza da una faccia all’altra metteva a metà strada due righe di parole una sull’altra: ora passa per il nastro nudo, prima se ne vanno le parole vecchie e poi arrivano le nuove.
L’ombra con shadowBlur ridipinta a ogni fotogramma, e due fillRect di luce per ogni colonna, costavano più del nastro stesso: nel Chrome senza scheda grafica del cloud un fotogramma fermo costava 5 millisecondi e una torsione 13 sul telefono. Ora l’ombra sta su una tela sua a metà misura, ridipinta solo quando cambia il profilo, e la luce è una riga di pixel sola: 0,2 millisecondi da fermo e 6 durante la torsione.
Con TWIST corto le onde della catena diventano più veloci del passo da 1/480 di secondo e il conto esplode: il passo ora si accorcia con la velocità delle onde (al massimo metà dell’inverso di √K), e la catena resta ferma a tutti gli estremi delle manopole.

Librerie

GSAP 3.15.0, Onest (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 5 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.