Il pulsante dell’intelligenza

Pulsanti, WebGL, SVG, Hover, TestoGSAP, WebGLImpegnativaPeso compresso: Demo 9,9 KBGSAP 28 KBGratisScarica lo zip

Il pulsante Generate di uno strumento di intelligenza artificiale: una pillola scura con la scintilla a quattro punte. Al passaggio dentro la pillola si accende un’aurora di viola, ciano e ambra, uno shader WebGL di rumore piegato su sé stesso che scorre piano e segue il puntatore. Premuto, l’aurora si gonfia e corre, la scintilla si trasforma punto per punto in un anello che gira, la scritta pensa e poi arriva a pezzi come i token di un modello, e finisce su Done con la scintilla che torna.

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 AI generate button</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 Generate button of an AI tool: a dark pill with a spark. Over it an aurora lights up inside the pill, a
         WebGL shader of warped noise that follows the pointer; pressed, the spark becomes a spinning ring, the words
         think and then stream in token by token, and the spark comes back when it is done -->
    <div class="spark" data-spark>
      <div class="spark__pill" data-pill>
        <span class="spark__base" aria-hidden="true"></span>
        <canvas class="spark__aurora" data-canvas aria-hidden="true"></canvas>
        <button class="spark__btn" type="button" data-btn data-autoclic>
          <svg class="spark__icon" viewBox="0 0 24 24" aria-hidden="true">
            <path class="spark__glyph" pathLength="100" data-glyph/>
            <path class="spark__mini" d="M19.5 1.6c.25 1.7.7 2.15 2.4 2.4-1.7.25-2.15.7-2.4 2.4-.25-1.7-.7-2.15-2.4-2.4 1.7-.25 2.15-.7 2.4-2.4z" data-mini/>
          </svg>
          <span class="spark__words" aria-hidden="true" data-words>Generate</span>
          <span class="sr" data-name>Generate</span>
        </button>
      </div>
      <p class="spark__hint" data-rise><span data-hint>Uses 1 credit · 48 left</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.

21 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 dell’intelligenza» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero una pillola scura con un filo di bordo, una scintilla bianca a quattro punte con una stellina accanto e la parola Generate; sotto, in grigio, Uses 1 credit · 48 left. Passando col mouse, dentro la pillola si accende un’aurora: nastri di viola, ciano e ambra che si piegano e si avvolgono su un cielo scuro, mai uguali, con un alone morbido che esce appena dal bordo; si sposta piano verso il puntatore e si illumina intorno a lui, e le parole diventano bianco pieno. Premendo, la pillola si abbassa un poco e torna su elastica; l’aurora si ingrandisce, si accende e scorre veloce. La scintilla si apre in un anello che gira, la stellina sparisce, e la parola diventa Thinking con una luce che la attraversa; sotto, Reading your brief. Poi Generating arriva a pezzi, Gen, er, ating, ognuno che si mette a fuoco, mentre la pillola si allarga per contenerlo, e sotto Writing three drafts. Alla fine l’anello rallenta e si richiude nella scintilla, che torna con un piccolo balzo insieme alla stellina, la parola è Done, l’aurora fa un lampo e si calma, e sotto c’è Three drafts ready · 47 credits left. Dopo un paio di secondi torna Generate e l’aurora si spegne.

Come funziona

Rumore piegato due volte

Lo shader somma tre ottave di rumore a valore, ognuna girata un poco (fbm). Poi lo legge in un punto spostato da altri due fbm, e quel punto da altri due ancora: è il domain warping, fbm dentro fbm, che fa i nastri che si avvolgono come fumo. WARP dice quanto è piegato; il tempo entra in ognuna delle letture con velocità diverse, così il disegno non si ripete.

Tre colori a nastri

Il colore gira su un anello viola, ciano, viola, ambra, letto lungo il rumore piegato: il viola fa da ponte, così ciano e ambra non si mescolano in un fango verde. La luce viene dal rumore finale: è più forte dove il rumore passa per la sua metà, a creste come le tende di un’aurora vera, su un cielo scuro che ne tiene un poco il colore. I tre colori e il cielo vengono dalle variabili del CSS.

La maschera della pillola

Lo shader calcola la distanza di ogni pixel dal bordo della pillola, che riceve larghezza e altezza vere a ogni fotogramma (anche mentre la pillola si allarga). Dentro c’è l’aurora, più scura verso il bordo come dietro un vetro spesso e più calma dietro le parole perché si leggano sempre; fuori un alone che sfuma in nove pixel, con un colore che gira lento intorno alla pillola, più forte dal lato del puntatore.

Il puntatore e i tempi

Il puntatore, misurato in mezze larghezze della pillola e smorzato, sposta il rumore di FOLLOW e accende un lobo di luce intorno a sé. Il tempo dello shader è una fase che avanza a DRIFT in riposo e a RUSH durante la generazione: cambiare la velocità non fa salti. Quando l’aurora è spenta non si disegna niente.

La scintilla che diventa anello

La scintilla e l’anello sono due contorni di 64 punti, dall’alto in senso orario: la scintilla è una superellisse con esponente 2,7, che tira dentro i fianchi fra le quattro punte. GSAP muove un numero da 0 a 1 e lo script mescola i punti uno per uno, senza il plugin a pagamento; il riempimento sfuma mentre cresce un tratto con un buco (stroke-dasharray) che gira. Al ritorno l’anello rallenta fino a un angolo di 90 gradi, così le punte tornano dritte.

Pensa, scrive, ha finito

Thinking ha una luce che lo attraversa (un gradiente ritagliato sul testo, che GSAP fa scorrere). Generating arriva in tre token a intervalli irregolari, ognuno da sfocato a nitido, e la pillola si allarga a ogni token senza mai stringersi a metà. Done riporta la scintilla con un balzo; la riga sotto racconta ogni passo e conta i crediti.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`DRIFT`	script.js	`0.22`	Quanto scorre veloce l’aurora a riposo, sotto il puntatore.
`RUSH`	script.js	`1.5`	Quanto corre veloce mentre il pulsante genera.
`WARP`	script.js	`3.2`	Quanto il rumore è piegato su sé stesso: più alto è più liquido e aggrovigliato.
`FOLLOW`	script.js	`0.45`	Quanto l’aurora si sposta verso il puntatore.
`GLOW`	script.js	`0.5`	Quanta aurora esce intorno alla pillola.
`THINK`	script.js	`1.4`	I secondi in cui dice Thinking.
`STREAM`	script.js	`1.9`	I secondi della generazione, da quando le parole sono arrivate.
`DONE`	script.js	`2.2`	I secondi in cui dice Done prima di tornare a riposo.

Provali nel Playground

Quando usarla

Per l’azione che genera in uno strumento di intelligenza artificiale: scrivere un testo, fare un’immagine, riassumere, tradurre, suggerire un codice. Sta bene su un fondo scuro, in una barra degli strumenti o sotto un campo di testo; lo stato in corso è fatto per attese di qualche secondo, e i testi delle tre fasi si cambiano nello script.

Sul telefono

La pillola resta della sua misura e niente sfora; il canvas dello shader è disegnato a una volta e mezzo la risoluzione al massimo, per non pesare. Il dito non ha passaggio: appena tocca, l’aurora si accende sotto il punto toccato, e la generazione parte quando si alza.

Con il movimento ridotto

L’aurora è ferma: si accende e si spegne in dissolvenza ma non scorre e non segue il puntatore. La scintilla diventa un anello fermo con il suo buco, senza girare; le parole e i token arrivano in dissolvenza, senza sfocature né spostamenti, e la pillola non rimbalza.

Trappole

Le somme di rumore stanno quasi sempre vicino alla metà: con soglie messe a occhio uno dei tre colori non compariva mai. I valori vanno stirati intorno alla metà prima di sceglierci i colori.
Passando direttamente dal ciano all’ambra il colore attraversava un verde fangoso: sull’anello dei colori il viola sta fra l’uno e l’altro.
Un alone fatto col colore dell’aurora al punto più vicino del bordo diventava una raggiera di strisce, troppo simile ai raggi di un altro pulsante: l’alone ha un colore suo, morbido, che gira intorno alla pillola.
Con quattro ottave l’aurora sembrava fumo e i dettagli fini facevano rumore dietro le parole: tre ottave, una scala più larga e una zona più calma dietro il testo.
Fra Thinking e Generating la pillola si stringeva al primo token e si riallargava agli altri: mentre i token arrivano la larghezza può solo crescere.
A metà del ritorno la forma fra anello e scintilla, grigia e mezza piena, sembrava un quadratino: il riempimento torna solo alla fine e il tratto resta finché la forma non è quasi una scintilla.

Librerie

GSAP 3.15.0, Onest (font variabile) 5.3.0.

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

Collaudo

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