Il pulsante che copia
Pulsanti, Testo, SVG, Fisica
NuovaGratis
Tutti i componenti
Il pulsante del microfono a nastro
Il pulsante Subscribe di un podcast fatto come la testa di un vecchio microfono a nastro, coricata: corpo cromato, una griglia di sbarrette sottili e dietro il nastro di alluminio pieghettato. Premuto, la parola viene detta dentro il microfono: il suono corre lungo il nastro, che disegna la forma d'onda vera della parola, e scuote le sbarrette una a una; le lettere si gonfiano mentre vengono dette, la lampada ON AIR si scalda e si accende e la d di Subscribed cresce proprio quando si sente.
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>The ribbon microphone button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the Subscribe button of a podcast, made as the head of an old ribbon microphone lying on its side: a chrome
body, a grille of fine chrome bars and, behind them, the corrugated ribbon. Pressed, the word is spoken into
it: the sound runs out along the ribbon and shakes the bars, the letters swell as they are said, the ON AIR
lamp lights and the missing letters of Subscribed grow in -->
<div class="mic-wrap" data-wrap>
<button class="mic" type="button" aria-pressed="false" aria-label="Subscribe to the podcast" data-mic data-autoclic>
<canvas class="mic__grille" aria-hidden="true" data-grille></canvas>
<span class="mic__shade" aria-hidden="true"></span>
<span class="mic__lamp" aria-hidden="true">
<span class="mic__glass mic__glass--warm" data-warm></span>
<span class="mic__glass mic__glass--lit" data-lit></span>
<span class="mic__onair mic__onair--dim" data-dim-text>ON AIR</span>
<span class="mic__onair mic__onair--lit" data-lit-text></span>
</span>
<span class="mic__plate" aria-hidden="true" data-plate>
<span class="mic__word" data-word>Subscribe</span>
</span>
</button>
<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.
26 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 «Il pulsante del microfono a nastro» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una pillola di cromo lucido alta 60 pixel: dentro, una griglia di sbarrette cromate verticali fitte, dietro di loro due fasce scure (le espansioni polari del magnete) e in mezzo un nastro sottile di alluminio pieghettato che corre da un capo all'altro. Nella punta di sinistra c'è una lampada rettangolare con la scritta ON AIR, spenta: vetro rosso scurissimo e lettere appena visibili. In mezzo a quello che resta c'è una targhetta di bachelite nera con il bordo cromato e la scritta Subscribe. Col mouse sopra, un riflesso morbido segue il puntatore sulle sbarrette, e passandoci sopra veloce le sbarrette si pizzicano come corde e vibrano. Premendo, la pillola si schiaccia appena e torna con un rimbalzo, e la parola viene detta dentro il microfono: il suono esce da sotto la targhetta e corre lungo il nastro verso i due capi, così il nastro disegna la forma d'onda della parola, il fruscio della s, l'onda tonda delle vocali, lo schiocco della b. Dove passa, le sbarrette si piegano e vibrano ancora un po', e quelle che si piegano verso la luce brillano. Sulla targhetta ogni lettera si gonfia, più spessa e più larga, nel momento in cui viene detta. Intanto la lampada ON AIR si scalda come un filamento, un primo bagliore, un attimo di incertezza, poi rossa piena con le lettere chiare, e il suo rosso si riflette sulle sbarrette vicine. Alla fine della parola la d di Subscribed cresce dal nulla con un piccolo rimbalzo, proprio mentre si sente. Premendo di nuovo, la lampada si spegne passando per un bagliore ambra, un piccolo colpo d'interruttore passa sul nastro e la d si ripiega.
Come funziona
La voce scritta con le lettere
La forma d'onda non è registrata: la funzione spell() la costruisce dalle lettere di DONE. Ogni vocale diventa un tratto di onda sonora con la sua altezza (la a più bassa, la i più alta) e tre armoniche; s, f, h, z, x e la c dolce un fruscio fatto di rumore liscio (un hash a passi interi, raccordato con smoothstep); b, d, g, k, p, t e la c dura un attimo di silenzio e poi uno schiocco che si spegne in fretta; l, m, n, v, w una vocale più debole e la r arrotolata, con l'ampiezza che trema a 26 colpi al secondo. Una e muta dopo una consonante è corta e debole. Ogni tratto ha il suo inviluppo, e sig(voce, t) dà il valore dell'onda in ogni istante.
Il nastro, un'onda che viaggia
Il nastro è disegnato su un canvas una colonna di pixel alla volta. La colonna a distanza d dalla targhetta mostra la voce di d / SPEED secondi prima: così la parola esce da sotto la targhetta e corre verso i due capi, e si legge sul nastro come su un oscilloscopio. Le pieghe sono colonne alternate chiare e scure, e la pendenza dell'onda le schiarisce o le scurisce come lamelle che si inclinano verso la luce; le colonne finiscono in nove tracciati Path2D, uno per tono, riempiti uno alla volta.
Le sbarrette, molle smorzate
Ogni sbarretta della griglia è una corda tenuta ai due capi, disegnata con una curva quadratica: il punto di mezzo è il suo spostamento. Lo spostamento è un oscillatore armonico smorzato (frequenza RING, smorzamento DAMP) spinto dalla stessa onda che arriva al nastro sotto di lui, integrato a passi di 1/240 di secondo con il fotogramma limitato a 1/30. Le sbarrette si dividono in tre tracciati secondo il verso in cui si piegano, ognuno col suo gradiente cromato: quelle piegate verso la luce brillano, le altre si spengono.
La luce sul cromo
Sopra le sbarrette, in modo «lighter», lo stesso tracciato viene ripassato con un gradiente radiale bianco centrato sul puntatore (il riflesso) e con uno rosso centrato sulla lampada, forte quanto la lampada è accesa. Il puntatore che passa sulle sbarrette le pizzica: quelle fra la posizione di prima e quella nuova ricevono una velocità proporzionale alla velocità del puntatore.
Le lettere e la lampada
La parola sulla targhetta è divisa in lettere, ognuna con gli assi wght e wdth del carattere variabile Anybody nelle sue variabili CSS: a ogni fotogramma ogni lettera prende peso e larghezza dall'inviluppo del suo tratto di voce. Le lettere che Subscribed ha in più crescono da larghezza zero con back.out nell'istante del loro suono, e la targhetta è larga da subito quanto la parola più lunga, così non salta. La lampada è una timeline GSAP su due livelli di vetro: un primo bagliore, una caduta, poi la salita a pieno in WARMUP secondi; spegnendosi il rosso cede a un vetro ambra che sbiadisce più piano.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DONE | script.js | Subscribed | La parola dopo l'iscrizione: le lettere in comune con la targhetta restano, le altre crescono mentre vengono dette. È anche la parola che il nastro disegna. |
TALK | script.js | 1 | Quanto lentamente viene detta la parola: 1 = circa un secondo, 2 = il doppio. |
SPEED | script.js | 230 | Quanto corre il suono lungo il nastro, in pixel al secondo. |
LOUD | script.js | 1 | Quanto forte la voce muove il nastro e scuote le sbarrette: 0 per niente. |
BARS | script.js | 3.2 | La distanza fra le sbarrette della griglia, in pixel. |
RING | script.js | 9 | Quante volte al secondo vibra una sbarretta da sola. |
DAMP | script.js | 0.09 | Quanto in fretta una sbarretta smette di vibrare: piccolo vibra a lungo. |
PLUCK | script.js | 1 | Quanto il puntatore che passa sulla griglia pizzica le sbarrette: 0 per niente. |
WARMUP | script.js | 0.22 | I secondi che la lampada ON AIR impiega a scaldarsi e accendersi del tutto. |
Quando usarla
Per iscriversi a un podcast, a una radio online, a una trasmissione dal vivo o a un canale di interviste: ovunque la voce sia il prodotto. Il momento forte dura un secondo e si spegne da solo; da acceso, la lampada ON AIR dice a colpo d'occhio che sei iscritto.
Sul telefono
La pillola è alta 60 pixel e larga 336, o lo schermo meno 16 pixel per lato: a 390 pixel ci sta intera. Al tocco si schiaccia e la parola viene detta come col mouse; il riflesso compare sotto il dito, e trascinando il dito sulla griglia le sbarrette si pizzicano come col mouse. Un secondo tocco toglie l'iscrizione.
Con il movimento ridotto
Niente si muove: il nastro e le sbarrette restano fermi, le lettere non si gonfiano, la pillola non si schiaccia. Premendo, la lampada ON AIR si accende con una dissolvenza e la d di Subscribed compare con una dissolvenza; togliendo l'iscrizione la lampada si spegne allo stesso modo.
Trappole
- Il riflesso bianco sulle sbarrette già chiare non si vedeva: ora è centrato a metà altezza, dove il cromo è più scuro, e un poco di luce cade anche sul fondo fra le sbarrette.
- Il primo pizzico era troppo debole, le sbarrette si spostavano di mezzo pixel e sembravano ferme: la spinta è quasi tripla, e lo spostamento disegnato è addolcito con una tangente iperbolica, così una sbarretta pizzicata forte non passa sopra le vicine.
- Il nastro era un filo chiaro e l'onda della parola si leggeva male: è più spesso, va più su e più giù (le espansioni polari sono più sottili per fargli spazio) e dove si muove getta un po' di luce sul fondo.
- Il rosso della lampada copriva un terzo della griglia e sembrava un difetto: il suo raggio è sceso da 120 a 95 pixel sulle sbarrette e a 90 sul fondo.
- Le lettere che crescono non si possono animare da width auto: la larghezza vera si misura prima lasciandola libera per un istante, poi si anima in pixel e alla fine si rimette auto, sennò una lettera gonfiata dalla voce verrebbe tagliata. La targhetta è larga da subito quanto la parola più lunga, misurata con una copia invisibile, così non salta quando arriva la d.
- Con LOUD alto il nastro usciva dalla sua fessura e passava sopra le espansioni polari: lo spostamento è limitato allo spazio fra le due fasce scure.
Librerie
GSAP 3.15.0, Anybody (font variabile, con gli assi del peso e della larghezza) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 13 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.
