Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il pulsante sotto sforzo
Il pulsante Run stress test di uno strumento per i test di carico, fatto di una lastra di plastica trasparente vista fra due filtri polarizzatori incrociati, come gli ingegneri guardano gli sforzi dentro un modello: dove la plastica è sotto sforzo compaiono frange di colore. A riposo brilla solo il bordo, con lo sforzo rimasto dallo stampo. Il puntatore è un polpastrello che preme sul bordo in alto: sotto di lui si apre una goccia di anelli colorati che lo segue, e premendo gli anelli si moltiplicano. Cliccato, il test diventa una prova di flessione a quattro punti col carico che sale a gradini insieme agli utenti virtuali: le frange entrano dalle facce e si arricciano intorno ai perni, finché la scritta dice Passed at 5,000 users. I colori non sono scelti: sono calcolati pixel per pixel dagli sforzi e dalla luce.
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 button under stress</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/ibm-plex-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the button under stress: the Run stress test button of a load testing tool, a slab of clear plastic seen
between two crossed polarising filters, so the stress inside it shows as bands of colour. The fringes are
worked out on the canvas; the gloss, the edge and the words stay on top -->
<div class="stress" data-stress>
<button class="stress__btn" type="button" data-btn data-autoclic>
<canvas class="stress__fringes" aria-hidden="true" data-fringes></canvas>
<canvas class="stress__fringes stress__ghost" aria-hidden="true" data-ghost></canvas>
<span class="stress__label" data-label>
<span class="stress__icons" aria-hidden="true" data-icons>
<svg class="stress__icon" viewBox="0 0 24 24" data-load>
<path d="M3 13.5Q12 13.5 21 13.5" data-beam/>
<path d="M6 14.6 4.1 18h3.8z M18 14.6 16.1 18h3.8z" data-supports/>
<g data-arrow>
<path d="M12 3.6v6.6"/>
<path d="M9.5 7.9 12 10.4l2.5-2.5"/>
</g>
</svg>
<svg class="stress__icon stress__icon--done" viewBox="0 0 24 24" data-check>
<path d="M5 12.6l4.4 4.3L19.2 7.2" data-tick/>
</svg>
</span>
<span class="stress__words" data-words>Run stress test</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 sotto sforzo» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero c'è una pillola scura: una lastra di plastica trasparente vista fra due filtri polarizzatori incrociati. Dove la plastica è a riposo la luce non passa e la lastra è nera, con un filo di blu profondo; brilla solo il bordo, con lo sforzo rimasto dallo stampo: una riga bianca sottile e, fuori, un orlo di colori che cambia un poco lungo il giro. In mezzo, in bianco, l'icona di una trave su due appoggi con una freccia sopra e la scritta Run stress test. Portando il mouse sulla lastra, sul bordo in alto sopra il puntatore si apre una goccia di anelli di colore, azzurro, giallo e arancio, con un chiarore bianco che scende sotto di lei; muovendo il mouse la goccia lo segue su una molla. Premendo, gli anelli si moltiplicano e si stringono, rossi, blu e verdi, e la lastra si abbassa appena. Al clic il dito se ne va e comincia la prova: due perni premono dall'alto, due appoggi reggono la lastra dal basso vicino alle estremità, e il carico sale a gradini con gli utenti virtuali, 1,000, 2,500, 4,000 e 5,000, che la scritta conta. A ogni gradino le frange entrano dalle facce: la lastra passa dal grigio al bianco e al giallo, poi a bande di colore sempre più fitte che si piegano intorno ai perni e agli appoggi, mentre la piccola trave dell'icona si incurva. In cima il carico trema un poco, come il traffico vero. Poi il carico se ne va, la lastra vibra un istante e torna nera col suo bordo; la scritta diventa Passed at 5,000 users con una spunta verde che si disegna, e dopo qualche secondo torna Run stress test.
Come funziona
I colori di interferenza, in una tabella
Fra due filtri polarizzatori incrociati, una plastica sotto sforzo lascia passare la luce secondo sin²(π δ / λ), dove δ è il ritardo fra le due polarizzazioni e λ la lunghezza d'onda: con la luce bianca ogni ritardo ha il suo colore, la scala di Michel-Lévy (nero, grigio, bianco, giallo, rosso, blu, verde e di nuovo, sempre più pallido). All'avvio lo script la calcola una volta, in 2048 passi fino a 6000 nanometri: somma la formula su cento lunghezze d'onda con la luce di un corpo nero a 6500 kelvin e le funzioni colorimetriche CIE 1931 (nelle gaussiane di Wyman, Sloan e Shirley), passa da XYZ a sRGB e porta verso il grigio della stessa luminosità i colori che lo schermo non sa fare. Una curva da fotografo (potenza 1,5) affonda nel nero la luce debole, e un soffio di blu ricorda che i filtri veri non chiudono del tutto.
Lo sforzo rimasto nel bordo
Una lastra stampata si raffredda prima fuori: la pelle resta compressa lungo il bordo e il cuore tira un poco. Per ogni pixel lo script trova il punto più vicino del bordo della pillola, la tangente lì e la distanza, e scrive un tensore di sforzo lungo la tangente: RIM nanometri di ritardo sul bordo, che calano come una campana di Gauss, con una piccola variazione lungo il giro. Si calcola una volta sola a ogni misura, in tre Float32Array, e a riposo è l'unica cosa che si vede.
Flamant sotto il dito e sotto i perni
Un carico P su un bordo spinge la plastica dritto fuori da sé con uno sforzo 2P cos θ / π r (la soluzione di Flamant per il semipiano): gli anelli di colore sono cerchi tangenti al bordo nel punto del carico. Il dito è un carico così sul bordo in alto, largo CONTACT pixel perché nel punto lo sforzo non vada all'infinito; sotto, il tavolo spinge indietro su una zona larga. TOUCH e PRESS dicono quante frange ci sono sotto il dito: sotto un contatto largo c lo sforzo arriva al massimo a 0,2067 P / c, e da lì lo script ricava P.
La trave della prova a quattro punti
Durante il test due perni premono dall'alto e due appoggi reggono dal basso. Oltre a Flamant sotto ognuno di loro, la lastra si piega come una trave: σ = M y / I, che cresce verso le facce e si annulla sull'asse neutro, dove sta la scritta, più il taglio τ = V (h²/4 − y²) / 2I. Nella teoria delle travi il momento cambia di colpo sui perni e sugli appoggi; in una lastra vera il cambio si spalma su circa la sua altezza (Saint-Venant), così il momento è lisciato con una campana e il taglio è la sua pendenza. Il carico è scalato perché sulle facce, fra i perni, ci siano PEAK frange.
Molle, gradini e niente lavoro a vuoto
Il carico del dito, la sua posizione e il carico della prova sono tre molle (STIFF e DAMP), fatte avanzare in due mezzi passi per fotogramma con il passo limitato a 1/30 di secondo: un carico che cambia oscilla un attimo prima di fermarsi, e le frange vanno e vengono. I gradini del test sono gli USERS, uno ogni STAGE secondi, e in cima il carico trema col traffico. Per ogni pixel i tensori si sommano, la differenza fra gli sforzi principali √((σx − σy)² + 4τ²) dà il ritardo e la tabella il colore, scritto in un Uint32Array e posato con putImageData. Il canvas lavora a SHARP volte la densità dello schermo (circa un millisecondo e mezzo a fotogramma su un computer) e si ridisegna solo quando un carico cambia.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TOUCH | script.js | 1.3 | Le frange che il tocco del puntatore apre sotto di sé, in ordini (un ordine è un giro di colori). |
PRESS | script.js | 3 | Le frange sotto il dito mentre il pulsante è tenuto premuto, in ordini. |
PEAK | script.js | 3.6 | Le frange sulle facce della lastra quando il test è al massimo, in ordini: di più, bande più fitte e più pallide. |
USERS | script.js | [1000, 2500, 4000, 5000] | Gli utenti virtuali di ogni gradino del test: il carico li segue, e l'ultimo è quello che la scritta dice alla fine. |
STAGE | script.js | 0.5 | I secondi di ogni gradino. |
HOLD | script.js | 0.85 | I secondi in cui il test tiene il carico più alto. |
RIM | script.js | 950 | Lo sforzo rimasto nel bordo, in nanometri di ritardo: 280 è bianco, 450 arancio, 550 viola, 700 blu. |
CONTACT | script.js | 3 | Quanto sono larghi il polpastrello e i perni del test, in pixel: di meno, anelli più stretti. |
STIFF | script.js | 160 | Quanto è rigida la lastra: di più, prende prima il carico nuovo. |
DAMP | script.js | 10 | Quanto presto la lastra smette di vibrare dopo un cambio di carico. |
LIGHT | script.js | 1 | Quanto è forte la luce dietro la lastra. |
SHARP | script.js | 0.7 | Quanto sono fini le frange rispetto allo schermo: di più, più nitide e più costose. |
RUN | script.js | users | La parola dopo il numero mentre il test va. |
DONE | script.js | Passed at {users} users | La scritta a test passato: {users} diventa il numero più alto. |
BACK | script.js | 2.4 | I secondi prima che il pulsante torni a dire Run stress test. |
Quando usarla
Per l'azione che conta in uno strumento per sviluppatori o ingegneri su fondo scuro: lanciare un test di carico, un benchmark, una simulazione, una verifica che mette alla prova il sistema. Sta bene nei siti di materiali, di ingegneria, di fisica e di ottica, dove la luce polarizzata dice qualcosa da sola. È un pulsante da far vedere, uno per pagina, non da mettere in una barra di comandi.
Sul telefono
La lastra è alta 60 pixel come gli altri pulsanti e larga 300, o lo schermo meno 48; gli sforzi si ricalcolano per la misura vera. Senza mouse il dito appoggiato apre gli anelli sotto di sé e, trascinato di traverso, li porta con sé (touch-action: pan-y, così in su e in giù la pagina scorre ancora). Un tocco fa partire il test; un dito che si è trascinato si alza senza farlo partire, come su ogni pulsante. Il canvas lavora a 0,7 volte la densità dello schermo, al massimo a 1,4 pixel per pixel.
Con il movimento ridotto
Niente anelli che seguono il puntatore e niente molle. Al clic l'immagine della prova al carico più alto, calcolata una volta all'avvio, compare in dissolvenza sulla lastra e se ne va alla fine; le scritte cambiano in dissolvenza, senza scivolare e senza sfocatura, e premuta la lastra si scurisce appena invece di rimpicciolire.
Trappole
- Il dito fatto come una flessione a tre punti accendeva di bianco tutta la lastra anche con un tocco leggero: il bianco del primo ordine copre un ritardo largo, da 150 a 350 nanometri. Ora il dito è un contatto locale (Flamant, col tavolo che spinge indietro sotto di lui) e la flessione c'è solo nel test, quando tutta la lastra deve accendersi.
- Nella teoria delle travi il taglio salta sugli appoggi e sui perni, e attraverso la lastra si vedevano righe verticali nette: il momento lisciato con una campana larga circa un terzo dell'altezza, col taglio preso come la sua pendenza, le ha tolte.
- Il 5 per cento di luce lontano dal dito diventava un grigio al 25 per cento dopo la codifica sRGB, e premendo tutta la lastra si annebbiava: una curva da fotografo prima della codifica riporta il nero, e la luce che i filtri lasciano passare, un soffio di blu, tiene la lastra visibile sulla pagina nera.
- Lo sforzo nel bordo che calava come un esponenziale faceva una banda bianca larga, come un tubo al neon: con la campana di Gauss i colori restano sull'orlo e il bianco è una riga sottile.
- La variazione lungo il bordo dipendeva dalla metà, sopra o sotto, in cui stava il pixel: sulle estremità tonde faceva un taglio a metà altezza. Ora è una funzione continua della posizione.
- Con PEAK alto la tabella finiva a 3600 nanometri e il centro della lastra diventava una macchia piatta: ora arriva a 6000, dove i colori sono già i rosa e i verdi pallidi degli ordini alti.
- Con il puntatore già sopra il pulsante all'apertura della pagina non arriva nessun pointerenter: il primo pointermove fa da entrata.
Librerie
GSAP 3.15.0, IBM Plex 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 12 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.
