Il pulsante d'acqua
Pulsanti, SVG, Fisica, Hover
NuovaGratis
Tutti i componenti
La nav col riflettore
Un faro da palcoscenico appeso sopra i link illumina quello corrente, con un fascio caldo e una pozza di luce dietro la parola. Puntando un altro link il faro oscilla fino a lui come una lampada appesa, va un po' oltre e torna, e ogni parola si accende quando la luce le passa sopra; un clic stringe il fascio sulla parola e lo fa brillare.
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 spotlight nav</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mozilla-headline@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the nav: a stage light hangs above the links and lights the current one; pointed at, another link draws the
light, which swings over to it, and a press makes it the current one with the beam closing in on it -->
<nav class="sl" aria-label="Main" data-nav>
<svg class="sl__light" aria-hidden="true" data-light>
<defs>
<linearGradient id="sl-beam" gradientUnits="userSpaceOnUse" data-beam-paint>
<stop offset="0" class="sl__beam-near"/>
<stop offset="0.72" class="sl__beam-mid"/>
<stop offset="1" class="sl__beam-far"/>
</linearGradient>
<radialGradient id="sl-pool">
<stop offset="0" class="sl__pool-mid"/>
<stop offset="0.6" class="sl__pool-half"/>
<stop offset="1" class="sl__pool-edge"/>
</radialGradient>
</defs>
<path fill="url(#sl-beam)" data-beam/>
<ellipse fill="url(#sl-pool)" data-pool/>
</svg>
<ul class="sl__list" data-list>
<li><a class="sl__link" href="#" aria-current="page" data-link>Shows</a></li>
<li><a class="sl__link" href="#" data-link data-autoclic>Tickets</a></li>
<li><a class="sl__link" href="#" data-link data-autoclic>Cast</a></li>
<li><a class="sl__link" href="#" data-link data-autoclic>Visit</a></li>
</ul>
<!-- an invisible frame round the light and the links, for the library's picture of the nav -->
<span class="sl__frame" aria-hidden="true" data-frame></span>
<!-- the light itself: the bar it hangs from, the yoke, the can and its lens -->
<svg class="sl__lamp" aria-hidden="true" data-lamp-art>
<g data-lamp>
<path class="lamp__yoke" d="M-17 14V0H17V14"/>
<rect class="lamp__can" x="-13" y="5" width="26" height="34" rx="5"/>
<rect class="lamp__band" x="-14.5" y="27" width="29" height="6" rx="2"/>
<path class="lamp__sheen" d="M-8 10V29"/>
<ellipse class="lamp__lens" cx="0" cy="39" rx="11" ry="3.4" data-lens/>
<path class="lamp__bolt" d="M3 0L1.5 2.6H-1.5L-3 0L-1.5 -2.6H1.5Z"/>
</g>
<rect class="lamp__bar" data-bar height="5" rx="2.5"/>
<path class="lamp__stem" data-stem/>
</svg>
</nav>
</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.
12 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 «La nav col riflettore» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero quattro link, Shows, Tickets, Cast e Visit, quasi spenti; sopra di loro, appeso a una barra, un faro grafite con la lente accesa. All'arrivo il faro si accende a singhiozzo, come fanno i fari di scena, mentre oscilla dentro da un lato e si ferma sul link corrente: un fascio caldo scende dalla lente, si apre verso il basso e sfuma, dietro la parola c'è una pozza di luce ovale e la parola illuminata è chiara, con un alone. Col mouse su un altro link il faro gira verso di lui con l'inerzia di una lampada appesa, lo supera di poco e torna, e le parole si accendono e si spengono mentre la luce le attraversa; il link corrente non si spegne mai del tutto. Uscendo dalla fila il faro torna sul link corrente. Il clic stringe il fascio sulla parola e lo fa brillare, poi lo riapre con un rimbalzo. A riposo il faro dondola appena.
Come funziona
Un pendolo
L'angolo del faro è una molla verso l'angolo del link, preso con atan2 dalla cerniera al centro della parola: a ogni fotogramma, in quattro piccoli passi, l'accelerazione è SWING per la distanza dalla meta meno DAMP per la velocità, e con questi valori il faro va un po' oltre e torna. Alla meta si sommano due onde lente, di 0,35 e 0,25 gradi: il dondolio a riposo.
Il fascio
Dalla lente, 39 pixel dalla cerniera lungo la direzione del faro, partono due bordi a più e meno SPREAD gradi dalla direzione, tagliati dove incontrano una riga 16 pixel sotto il centro delle parole: un quadrilatero riempito da una sfumatura lungo il fascio, dal 30% vicino alla lente allo zero sulla riga.
La pozza e le parole
La pozza è un'ellisse centrata dove il raggio di mezzo del fascio incontra le parole, larga quanto il fascio lì (con il raggio fra 44 e 110 pixel) e schiacciata. La luce di ogni parola è una campana della sua distanza da quel punto: il colore va dallo scuro al chiaro (gsap.utils.interpolate) con un alone di text-shadow, e la parola corrente non scende mai sotto 0,42.
Il fuoco del clic
Una timeline porta l'apertura al 55% e la forza della luce a 1,45 in 0,18 secondi, poi le riporta indietro con elastic.out(1, 0.45) in 0,9 secondi; la forza della luce regola l'opacità del fascio, della pozza e della lente.
Tasti, misure e anteprima
Il Tab su un link (focus-visible) ci porta la luce e Invio lo sceglie; uscendo dalla fila col puntatore (dopo 0,3 secondi) o col fuoco la luce torna sul link corrente. Il faro pende a HANG pixel, ma mai più del 36% della larghezza della fila (almeno 90), così su un telefono gli angoli restano leggibili; un ResizeObserver e il ridimensionamento della finestra rimisurano. L'anteprima della libreria clicca a turno gli altri link.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SWING | script.js | 90 | Quanto forte il faro è tirato verso il suo link: di più è più rapido. |
DAMP | script.js | 8.5 | Quanto in fretta l'oscillazione si spegne: di meno oscilla di più. |
SPREAD | script.js | 8 | Metà dell'apertura del fascio, in gradi. |
HANG | script.js | 150 | Quanto in alto sopra i link pende il faro, in pixel. |
Quando usarla
Per la nav di un teatro, di un locale di musica dal vivo, di un cinema, di un festival, di uno spettacolo, di una compagnia di danza o di un museo con le sale al buio.
Sul telefono
Il testo va da 19 a 30 pixel con la larghezza e il faro pende più in basso su una fila stretta (il 36% della sua larghezza, almeno 90 pixel); ogni link è alto 51 pixel e un tocco ci porta la luce e la stringe sulla parola.
Con il movimento ridotto
Il faro punta subito il link, senza oscillare e senza dondolare, è acceso dall'arrivo senza singhiozzi e il clic non stringe né fa brillare il fascio; le parole si accendono e si spengono di colpo, seguendo la luce.
Trappole
- Vicino all'orizzontale la tangente dei bordi del fascio esplode: gli angoli dei bordi si limitano a 78 gradi, o il fascio di un link lontano diventerebbe infinito.
- Il centro della pozza è dove il raggio di mezzo incontra le parole: la metà fra i due bordi, con un fascio inclinato, cade più in fuori, e la luce sembrerebbe mancare la parola.
- Il fascio deve sfumare fino a zero prima della riga in cui finisce, o si vedrebbe un taglio dritto sotto le parole: la sfumatura corre dalla lente al punto in cui il raggio di mezzo tocca quella riga.
- I colori delle parole cambiano a ogni fotogramma: si mescolano con gsap.utils.interpolate fra i colori letti dalle variabili --dark e --lit del CSS, così chi le cambia cambia anche la luce.
- Un pendolo si fa a piccoli passi (quattro per fotogramma) e con un passo massimo di 1/30 di secondo: con un passo lungo, dopo una scheda tornata visibile, la molla schizzerebbe via.
Librerie
GSAP 3.15.0, Mozilla Headline (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,0 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 4 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.
