Il pulsante d'acqua
Pulsanti, SVG, Fisica, Hover
NuovaGratis
Tutti i componenti
Il suggerimento proiettato
La barra dei comandi di una presentazione, con un piccolo proiettore in ogni pulsante: il suggerimento è uno schermo smerigliato che sale dalla barra dentro il fascio e raccoglie il nome proiettato, che va a fuoco mentre sale. Passando a un altro pulsante i nomi restano fermi dove le lenti li mandano: la lampada vecchia si spegne con una coda rossa, la nuova si accende e lo schermo scivola da un fascio all'altro.
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 projected tooltip</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/radio-canada-big@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the projected tooltip: the controls of a slideshow, and in every button a tiny projector with a filament
lamp. The tooltip is a frosted screen that rises out of the bar into the beam and catches the name the button
projects; going on to another button, the screen slides out of one beam into the next. The beams are drawn
on the svg, the pictures on the screen by the script, from the names and the keys of the buttons -->
<div class="booth" data-booth data-autoclic>
<svg class="beams" aria-hidden="true" data-beams></svg>
<div class="screen" role="tooltip" id="slideshow-tip" data-screen>
<div class="screen__light" aria-hidden="true" data-light></div>
<span class="screen__text" data-tip-text></span>
</div>
<div class="bar" role="toolbar" aria-label="Slideshow controls" data-bar>
<button class="tool" type="button" data-tool data-key="P">
<span class="tool__name">Previous slide</span>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 6 8.5 12l6 6"/></svg>
</button>
<button class="tool" type="button" data-tool data-key="N">
<span class="tool__name">Next slide</span>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9.5 6 6 6-6 6"/></svg>
</button>
<span class="bar__split" aria-hidden="true"></span>
<button class="tool" type="button" data-tool data-key="D" data-toggle="draw" aria-pressed="false">
<span class="tool__name">Pen</span>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 19.2 6.1 15 15.9 5.2a1.9 1.9 0 0 1 2.7 0l.2.2a1.9 1.9 0 0 1 0 2.7L9 17.9z"/><path d="m14.2 6.9 2.9 2.9"/></svg>
</button>
<button class="tool" type="button" data-tool data-key="L" data-toggle="draw" aria-pressed="false">
<span class="tool__name">Laser pointer</span>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8.6 8.2 18.8 12.6l-4.4 1.5-1.6 4.4z"/><path d="M5.6 5.6 3.9 3.9M8.5 4.6V2.8M4.6 8.5H2.8"/></svg>
</button>
<span class="bar__split" aria-hidden="true"></span>
<button class="tool" type="button" data-tool data-key="B" data-toggle="black" aria-pressed="false">
<span class="tool__name">Black screen</span>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5.8h16v10.4H4z"/><path d="M9 19.6h6M5.2 4.4l13.6 13.2"/></svg>
</button>
<button class="tool" type="button" data-tool data-key="V">
<span class="tool__name">Presenter view</span>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3.8 5.5h16.4v11H3.8z"/><path d="M13.6 5.5v11M6.6 9h4.2M6.6 12h3M9.5 19.8h5"/></svg>
</button>
<span class="bar__split" aria-hidden="true"></span>
<button class="tool" type="button" data-tool data-key="Esc">
<span class="tool__name">End show</span>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.5 6.5l11 11M17.5 6.5l-11 11"/></svg>
</button>
</div>
</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.
32 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 suggerimento proiettato» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero la barra dei comandi di una presentazione, color petrolio scuro: Previous slide e Next slide, Pen e Laser pointer, Black screen e Presenter view, End show, con le icone disegnate a linea e, nel bordo sopra ogni pulsante, una feritoia: la lente di un piccolo proiettore. Aprendo la pagina le lampade si provano una volta, una dopo l'altra: ogni filamento lampeggia caldo, manda un fascio nel buio e si spegne con una coda rossa. Fermando il puntatore su un pulsante, dopo mezzo secondo la sua lampada si accende e da dietro la barra sale uno schermo di acrilico smerigliato, dentro il fascio: il nome del pulsante e il suo tasto ci cadono sopra come luce, prima piccoli, sfocati e abbaglianti, poi più grandi, più tenui e nitidi quando lo schermo arriva all'altezza per cui la lente è messa a fuoco (Laser pointer, L, in nero su una luce color panna, con la grana dell'acrilico). Fra la barra e lo schermo si vede il fascio caldo nell'aria. Passando a un altro pulsante lo schermo non scende e risale: la prima lampada si spegne e il suo nome, fermo sopra il suo pulsante, passa dal bianco all'arancio al rosso mentre lo schermo lo lascia; un attimo dopo si accende la lampada nuova, il suo nome è già fermo sopra il nuovo pulsante, in un fascio che sale nel buio, e lo schermo ci scivola sotto, allargandosi o stringendosi per il nome nuovo; per strada si alza appena e il nome va un poco fuori fuoco, poi torna nitido. Per un attimo lo schermo attraversa il buio, con l'ultimo rosso del nome vecchio da una parte e la luce nuova che lo prende dall'altra. Uscendo la lampada si spegne e lo schermo scende dentro la barra, con l'ultimo bagliore rosso che si stringe e si sfoca con lui. Il puntatore può salire sullo schermo senza chiuderlo. Coi tasti, Tab porta sulla barra e il nome compare subito, le frecce passano da un pulsante all'altro, Esc lo mette via. Al telefono un tocco accende il pulsante toccato (e lo preme), il dito può scorrere lungo la barra portandosi dietro lo schermo, e il nome se ne va da solo poco dopo o con un tocco altrove. Pen e Laser pointer si alternano, Black screen resta acceso, e un pulsante acceso si colora del caldo della sua lampada.
Come funziona
Un filamento per pulsante
La temperatura di ogni filamento, come parte di KELVIN, segue FILAMENT·dθ/dt = potenza − θ⁴: l'energia che entra e quella che se ne va irraggiando, che va con la quarta potenza della temperatura. Per questo la lampada si accende in un lampo e si spegne con una lunga coda: in 50 millesimi è a 1900 K, arancio, e il rosso si vede ancora per un altro decimo di secondo. Il conto si fa sul ticker di GSAP a passi di 2 millesimi; quando i filamenti sono fermi e le molle anche, non si ridisegna niente.
Il colore della luce
Colore e luminosità di ogni temperatura vengono dalla legge di Planck sommata sulla luce visibile ogni 5 nanometri contro le funzioni dell'occhio CIE 1931 (nella forma a gaussiane di Wyman, Sloan e Shirley), poi portate in sRGB e bilanciate come le vede un occhio abituato a una lampada un po' più calda: una tabella ogni 10 kelvin, fatta all'apertura. La luminosità si vede come la vede un occhio al buio, in scala logaritmica, così la coda rossa, che fa meno di un centesimo della luce, resta visibile.
L'immagine sullo schermo
Ogni pulsante ha la sua diapositiva: il nome e il tasto in nero su una luce morbida, più larga dello schermo e coi bordi che sfumano (mask-image). A un'altezza h sopra la lente è grande h/THROW, luminosa come (THROW/h)² e sfocata dal cerchio di confusione APERTURE·|h − THROW|/THROW. L'immagine sta dove la lente la manda, sopra il suo pulsante, spostata dalla lente se uscirebbe dalla pagina: è lo schermo che si muove sotto le immagini, non le immagini che viaggiano.
La luce che si somma
Le diapositive stanno in un gruppo isolato, con mix-blend-mode: plus-lighter, così dove due cadono insieme la luce si somma e le lettere di una sono illuminate dall'altra; il gruppo è tagliato sulla forma dello schermo, e sopra c'è la grana dell'acrilico (feTurbulence) in multiply, che si vede soprattutto dove c'è luce. Il bordo dello schermo prende il colore della luce che lo colpisce, e un poco di luce si sparge intorno.
I fasci nell'aria
Ogni fascio è un trapezio svg dalla feritoia alla larghezza dell'immagine e oltre, col gradiente del colore della sua lampada e una foschia ferma (feTurbulence dentro il filtro), così un fascio che si sposta attraversa sempre la stessa aria. Lo schermo ferma i raggi che lo incontrano: la sua ombra è il ventaglio che parte dalla lente e passa per i suoi due angoli in basso, una maschera per ogni lampada, e sopra lo schermo il fascio continua solo dove lo schermo non c'è.
Quando compare
La prima volta dopo DELAY secondi di puntatore fermo; finché lo schermo è su, e per GRACE secondi dopo, il nome nuovo arriva subito. Lasciata la barra aspetta LINGER secondi, così il puntatore può salire sullo schermo. Fra una lampada che si spegne e la prossima passano 80 millesimi, come nella dissolvenza fra due proiettori: lo schermo attraversa il buio e prende la luce nuova arrivando. Lo schermo è un role tooltip e la descrizione del pulsante (aria-describedby): dice il tasto, che il pulsante ha anche in aria-keyshortcuts. Un clic da script (l'anteprima della libreria) è un puntatore finto che passa su tre pulsanti, se ne va e poi ne preme due.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DELAY | script.js | 0.5 | I secondi in cui il puntatore resta su un pulsante prima del primo suggerimento. |
GRACE | script.js | 0.6 | I secondi dopo che lo schermo è sceso in cui il prossimo nome arriva senza aspettare. |
LINGER | script.js | 0.15 | I secondi che il suggerimento aspetta dopo che il puntatore ha lasciato la barra, perché lo si possa raggiungere. |
KELVIN | script.js | 3100 | Quanto sono caldi i filamenti accesi, in kelvin: più bassi danno una luce più calda e più fioca. |
FILAMENT | script.js | 0.06 | Quanto in fretta un filamento si scalda e si raffredda, in secondi: la coda rossa dura circa tre volte tanto. |
THROW | script.js | 54 | A che altezza sopra la lente sta lo schermo, in pixel: lì l'immagine è a fuoco. |
APERTURE | script.js | 9 | Quanto è larga la lente: quanto si sfoca l'immagine lontano da quell'altezza. |
SPRING | script.js | [300, 0.82] | La molla dello schermo quando scivola in un altro fascio: quanto è rigida e quanto è frenata. |
HAZE | script.js | 0.24 | Quanto si vedono i fasci nell'aria. |
data-key | index.html | P, N, D, L, B, V, Esc | Il tasto di ogni pulsante, scritto accanto al suo nome proiettato. |
Quando usarla
Per le barre di strumenti di un'app su fondo scuro: i comandi di una presentazione o di un lettore video, le interfacce di un cinema, di un teatro, di una sala concerti o di un'app di fotografia, ovunque un pulsante fatto solo di un disegno ha bisogno del suo nome e il buio fa parte del tono.
Sul telefono
I pulsanti scendono a 39 pixel perché la barra stia nello schermo. Un tocco accende subito la lampada del pulsante, senza aspettare, e lo preme; tenendo giù il dito si può scorrere lungo la barra e lo schermo segue da un fascio all'altro. Il nome se ne va da solo due secondi dopo, o con un tocco altrove. I nomi dei pulsanti vicini ai bordi sono spostati dalla lente per restare dentro lo schermo, e il loro fascio si inclina.
Con il movimento ridotto
Niente salita, niente scivolata, niente coda rossa: lo schermo compare già al suo posto con una dissolvenza mentre la lampada si accende e il fascio si schiarisce; cambiando pulsante lo schermo è subito sopra il nuovo e la luce nuova arriva in dissolvenza; uscendo tutto si spegne in dissolvenza. All'apertura le lampade non si provano.
Trappole
- L'ombra dello schermo nel fascio era un rettangolo dritto, e sopra lo schermo il fascio, che si allarga, scappava dai due lati come due ali: l'ombra è il ventaglio di raggi che parte dalla lente e passa per gli angoli in basso dello schermo, una maschera per ogni lampada, perché ogni lente lo vede da un altro punto.
- Sommata direttamente al fondo dello schermo (petrolio scuro), la luce calda diventava bianca: le diapositive si sommano fra loro in un gruppo isolato, e il gruppo si posa sopra il fondo.
- Con i bordi netti, mentre lo schermo arrivava si vedeva il bordo dell'immagine nuova dentro lo schermo, come una scheda dentro una scheda: le immagini sono più larghe dello schermo e sfumano ai lati, così la luce cala oltre il nome.
- Spegnendo una lampada e accendendo la prossima nello stesso istante, i due nomi si leggevano uno sopra l'altro: la nuova si accende 80 millesimi dopo, quando la vecchia è già un rosso scuro, quasi spento.
- Lo schermo più stretto del nome nuovo tagliava il tasto mentre arrivava: la larghezza va su una molla più rigida e senza rimbalzo di quella che lo fa scivolare.
- Il rimbalzo della salita portava lo schermo sopra il fuoco e il nome restava sfocato per un decimo di secondo: la molla della salita è più frenata, e il fuoco respira appena.
- Uno schermo basso, vicino alla lente, riceve un'immagine piccola e molto luminosa (l'inverso del quadrato): senza un limite era una macchia bianca; la luce è tenuta sotto 1,9 volte e la sovraesposizione è un brightness leggero.
- La prova delle lampade a metà potenza non si vedeva affatto: per la quarta potenza un filamento a 1700 K fa un millesimo della luce. Le lampade si provano a piena potenza per 38 millesimi.
- Uno schermo fermo a un decimo di pixel dalla sua altezza aveva il testo un poco sfocato (scale 0,999): vicino all'arrivo le molle si posano sul bersaglio e lo schermo e le immagini stanno su pixel interi.
Librerie
GSAP 3.15.0, Radio Canada Big (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 6 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.
