Il menu col bruco
Menu, Hover, Transizioni
NuovaGratis
Tutti i componenti
La nav dell'oscilloscopio
La barra in alto del sito di un piccolo costruttore di sintetizzatori, con le voci sul vetro di un oscilloscopio: sotto le parole corre una traccia di fosforo verde, piatta col suo lieve rumore, e sotto la pagina corrente disegna una forma d'onda tutta sua, diversa per ogni voce. Scegliendo un'altra voce l'onda scorre lungo la traccia e si trasforma nella nuova, perde la sincronia e si sdoppia per strada, e si aggancia arrivando; il fosforo lascia la scia.
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 oscilloscope nav</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/martian-mono@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the top bar of a small maker of synthesizers. The links sit on the glass of an oscilloscope: under them runs a
trace of green phosphor, flat with its faint fuzz, and under the page you are on it draws a wave of its own.
Choosing another link the wave slides along the trace and changes shape, losing its sync on the way before it
locks again; pointing at a link stirs the trace under it -->
<header class="bar" data-bar>
<a class="brand" href="#" aria-label="Ondine, home">
<svg class="brand__mark" viewBox="0 0 26 20" aria-hidden="true">
<rect x="1" y="1" width="24" height="18" rx="5"/>
<path d="M5 10.5c1.6 0 1.9-4.5 4-4.5s2.4 8 4.5 8 2.3-6 4.2-6c1.2 0 1.5 2.5 3.3 2.5"/>
</svg>
<span class="brand__name">Ondine</span>
</a>
<nav class="screen" aria-label="Main" data-screen>
<div class="screen__scroll" data-strip>
<div class="track" data-track>
<!-- the trace: its halo and the line itself, drawn by the script -->
<canvas class="trace trace--glow" aria-hidden="true" data-glow></canvas>
<canvas class="trace" aria-hidden="true" data-trace></canvas>
<ul class="list" data-list>
<li><a class="link" href="#" aria-current="page" data-link><span class="link__word">Instruments</span></a></li>
<li><a class="link" href="#" data-link data-autoclic><span class="link__word">Modules</span></a></li>
<li><a class="link" href="#" data-link data-autoclic><span class="link__word">Sounds</span></a></li>
<li><a class="link" href="#" data-link data-autoclic><span class="link__word">Manuals</span></a></li>
<li><a class="link" href="#" data-link data-autoclic><span class="link__word">Support</span></a></li>
</ul>
</div>
</div>
<span class="screen__fade screen__fade--l" aria-hidden="true"></span>
<span class="screen__fade screen__fade--r" aria-hidden="true"></span>
<!-- the curved glass over the tube, catching a little light -->
<span class="screen__glass" aria-hidden="true"></span>
</nav>
<a class="cta" href="#" data-cta><span class="cta__bg" aria-hidden="true" data-cta-bg></span><span class="cta__label">Pre-order</span></a>
</header>
</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 «La nav dell'oscilloscopio» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, da sola al centro, la barra di navigazione di Ondine, un piccolo costruttore di sintetizzatori: alta 62 pixel, color pannello di strumento quasi nero, col bordo appena segnato. A sinistra il segno, uno schermo con dentro un'onda, e il nome Ondine; a destra il pulsante verde Pre-order. In mezzo, incassato nel pannello, il vetro di un tubo catodico verde scurissimo, un po' più chiaro al centro e più scuro sui bordi, con un riflesso morbido in alto e il reticolo inciso: una divisione ogni 40 pixel e l'asse con le sue tacche fini. Sul vetro cinque voci in maiuscolo stretto, Instruments, Modules, Sounds, Manuals e Support, verde spento tranne la pagina corrente, chiara e un po' luminosa. Sotto le parole, sull'asse, corre la traccia: una linea di fosforo verde col suo alone, piatta e appena sfrangiata dal rumore, che sotto la pagina corrente diventa un'onda: un seno sotto Instruments, un'onda quadra sotto Modules, un'onda modulata in frequenza sotto Sounds, un dente di sega sotto Manuals, un triangolo sotto Support. La traccia è disegnata come la disegna il fascio: dove il punto va piano è più luminosa, quindi la linea piatta e le cime delle onde brillano e i fronti ripidi della quadra o la discesa del dente di sega sono solo un filo. All'arrivo il tubo si scalda: una linea chiara si allarga dal centro del vetro ai bordi e l'onda si alza sotto la pagina corrente con un rimbalzo. Scegliendo un'altra voce la finestra dell'onda scorre lungo la traccia fin sotto la parola nuova e la forma si trasforma per gradi nella nuova; per strada la traccia perde la sincronia, l'onda rotola e si sdoppia in più copie sfasate, e il fosforo lascia dietro una scia che si spegne piano. Arrivando l'onda si aggancia: la fase scatta al ciclo intero con un piccolo rimbalzo e l'ampiezza torna su ondeggiando. Puntando una voce, sotto di lei la traccia si eccita appena: un'increspatura fine corre lungo la linea finché il puntatore resta lì. Cliccando la pagina corrente la sua onda dà un sobbalzo. Puntando Pre-order le lettere si allargano sull'asse della larghezza e il fondo si gonfia con un rimbalzo. Da tastiera il fuoco su una voce fa lo stesso dell'hover, le frecce passano da una voce all'altra e Invio sceglie.
Come funziona
Il vetro e il reticolo
Il vetro è un nav incassato nella barra con overflow nascosto: tre fondi CSS sovrapposti fanno il tubo (un gradiente radiale verde scurissimo), le divisioni ogni 40 pixel (un repeating-linear-gradient) e l'asse a una riga sola, all'altezza --axis che lo script legge; un ::before aggiunge le tacche fini ogni 8 pixel. Sopra tutto uno span col riflesso e il bordo più scuro del vetro curvo. Le voci sono link alti quanto il vetro, con la parola in alto: la traccia passa sotto, nella fascia bassa, e non tocca mai le lettere.
Le onde come funzioni
Ogni onda è una funzione della fase in cicli, misurata dal bordo sinistro della sua finestra, che parte e finisce a zero: seno, quadra (tanh di 7 volte il seno, fronti ripidi ma finiti), dente di sega con una discesa del 6 per cento del ciclo, triangolo, e un'onda modulata in frequenza sin(3·2πp + 2,2·sin 2πp). La finestra di una voce è larga quanto la parola più 12 pixel (almeno 64) e i suoi bordi salgono in 9 pixel con uno smoothstep; l'onda è la somma delle funzioni pesate da mix, e la lunghezza d'onda viene dai cicli pesati: così fra due onde il passaggio è continuo.
Il fascio
A ogni fotogramma l'altezza della traccia si calcola ogni mezzo pixel, con un rumore liscio (nodi casuali ogni 6 pixel interpolati, più una grana minima). Il fascio attraversa il vetro a velocità costante, quindi un tratto più lungo del suo passo è stato disegnato più in fretta e prende meno luce: la luce di ogni tratto è il passo diviso la lunghezza, alla 0,85, con un minimo di 0,2, e i bordi del tubo sono un po' più fiochi. I tratti si dividono in sette livelli di luce e ogni livello si traccia come un solo path, con una seconda linea quasi bianca e più sottile sui tre livelli più forti.
La persistenza del fosforo
Il canvas è nero e si somma al vetro con mix-blend-mode: screen. A ogni fotogramma non si cancella: si scurisce tutto di exp(-dt/PERSISTENCE) e la nuova traccia ci si disegna sopra con l'operazione lighten, cioè ogni pixel prende il più chiaro fra quello vecchio che sbiadisce e quello nuovo: il fosforo si accende subito e si spegne piano, e quello che si muove lascia la scia, alla stessa luce a ogni frequenza di fotogrammi. L'alone è una copia dello stesso canvas a mezza risoluzione, sfocata col filtro CSS blur(GLOW).
Il cambio e la sincronia persa
Scegliendo una voce una timeline GSAP porta la finestra (centro e mezza larghezza) sotto la parola nuova in TRAVEL secondi con power3.inOut, i pesi delle onde verso la nuova, e abbassa un poco l'ampiezza. Intanto la sincronia si perde: la fase rotola fino a 2,2 cicli al secondo per SYNC_LOSS e la traccia viene spazzata altre due volte a fasi casuali, più fioche, e l'onda si sdoppia. Al 90 per cento del viaggio la fase scatta al ciclo intero più vicino con back.out (l'aggancio del trigger) e l'ampiezza torna a 1 con un elastic. Un nuovo clic a metà riparte dallo stato in cui si trova.
Quando disegna, il telefono e la tastiera
Il ciclo sul ticker di GSAP corre a pieno mentre qualcosa si muove e per cinque persistenze dopo; poi cancella gli avanzi della scia e ridisegna la traccia pulita. Col rumore acceso continua a 30 fotogrammi al secondo, ma si ferma quando la barra esce dallo schermo (IntersectionObserver) o la scheda è nascosta (visibilitychange); con NOISE a 0 disegna una volta e dorme. Sotto i 760 pixel le voci scorrono di lato dentro il vetro, con i bordi che si scuriscono dal lato delle voci nascoste, e la voce scelta viene al centro. Le voci sono link in un nav con aria-current, le frecce, Home e Fine si muovono fra loro.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WAVES | script.js | ['sine', 'square', 'fm', 'saw', 'triangle'] | L'onda disegnata sotto ogni voce, in ordine: sine (seno), square (quadra), saw (dente di sega), triangle (triangolo) o fm (modulata in frequenza). |
AMPLITUDE | script.js | 8 | Quanto l'onda sale e scende dalla traccia, in pixel. |
PERSISTENCE | script.js | 0.2 | Quanto a lungo il fosforo resta acceso dopo il passaggio del fascio, in secondi: più alto, scie più lunghe. |
TRAVEL | script.js | 1 | Quanto ci mette l'onda ad andare sotto la voce nuova, in secondi. |
SYNC_LOSS | script.js | 1 | Quanto la traccia perde la sincronia per strada: l'onda rotola e si sdoppia prima di agganciarsi (0: per niente). |
EXCITE | script.js | 1.3 | Quanto si increspa la traccia sotto una voce puntata, in pixel. |
NOISE | script.js | 0.3 | Il rumore della traccia a riposo, in pixel (0: un'immagine ferma, che si ridisegna solo quando qualcosa cambia). |
GLOW | script.js | 3 | Quanto si allarga l'alone intorno alla traccia, in pixel. |
Quando usarla
Per la barra in alto di un sito che parla di suono e di elettronica: un costruttore di sintetizzatori o di pedali, uno studio di registrazione, un'etichetta di musica elettronica, un negozio di strumenti di misura, un corso di elettronica, il sito di un sound designer. La traccia dice dove sei anche da ferma, e ogni pagina ha la sua onda.
Sul telefono
Sotto i 760 pixel la barra è alta 58 pixel e larga quanto lo schermo meno 32 (358 a 390); sotto i 480 resta solo il segno, senza il nome, e il pulsante si stringe. Le cinque voci non ci stanno tutte: scorrono di lato dentro il vetro col dito, e il bordo si scurisce dal lato dove ce ne sono altre. La traccia scorre con loro, il reticolo resta fermo sul vetro. Toccando una voce la traccia sotto di lei si eccita finché il dito è giù, e la voce scelta scorre al centro del vetro mentre l'onda la raggiunge.
Con il movimento ridotto
Niente scorrimento: scegliendo una voce la traccia si spegne in dissolvenza e si riaccende con l'onda già sotto la voce nuova. All'arrivo la traccia compare sfumando, già intera. Niente rumore che si muove (la traccia è un'immagine ferma), niente increspature sotto il puntatore, niente sobbalzi; il pulsante non si allarga né si gonfia e niente si rimpicciolisce premendo.
Trappole
- Sommando la luce a ogni fotogramma (lighter) per una frazione dt della persistenza, l'onda in viaggio prendeva solo l'8 per cento della luce e spariva a metà strada: il canvas ora è nero, si scurisce e la traccia nuova si disegna con lighten, così il fosforo si accende subito e si spegne piano come quello vero.
- Il canvas nero sommato col mix-blend-mode: screen copriva il reticolo: la maschera per sfumare i bordi sul telefono isolava il gruppo e lo screen non vedeva più il vetro sotto. I bordi ora si scuriscono con due span sopra il vetro, senza maschera.
- Il rumore era fatto di nodi in un array di 64 elementi: oltre i 384 pixel l'altezza diventava NaN e la traccia si fermava a metà del vetro. L'array si rifà alla misura del vetro.
- La discesa del dente di sega e i fronti della quadra, disegnati dal fascio veloce, erano così fiochi da sparire, e l'onda sembrava fatta di trattini staccati: la luce di un tratto ha un minimo di 0,2, un filo che si vede ancora.
- Sotto una parola corta come Sounds due cicli di onda modulata diventavano uno scarabocchio: la finestra è larga almeno 64 pixel e l'onda modulata ne fa uno solo, con dentro tre oscillazioni.
- Il pulsante che si allargava in hover sull'asse wdth stringeva il vetro: il ResizeObserver rimisurava tutto e fermava l'onda a metà viaggio. Il pulsante ora ha una larghezza fissa che contiene già le lettere larghe.
- Scurendo un canvas a 8 bit, le scie più fioche non scendono mai a zero (l'arrotondamento le tiene a pochi livelli): quando tutto si ferma il canvas si cancella e la traccia si ridisegna pulita.
Librerie
GSAP 3.15.0, Martian Mono (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 8 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.
