La chat sottovuoto
Chat, Fisica, SVG, Transizioni, Testo
NuovaGratis
Tutti i componenti
Il codice a onde
Il blocco di codice della documentazione di un SDK per le mappe dei sentieri, con le schede JavaScript, Python, Go e cURL e i colori degli inchiostri di una carta escursionistica. Scegliendo un linguaggio, sotto la sua scheda cade un'onda che si allarga nel codice ad anelli: ogni lettera va sotto, cambia nel nuovo linguaggio e riemerge più grande e più nera sulla cresta, e un'eco torna dal bordo di sotto. Copy mette il codice negli appunti e la selezione si allaga da sotto il pulsante come un lago su una carta, con la riva che segue la forma delle righe; poi si ritira.
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 rippling code</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/martian-mono@5.3.0/wdth.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- a code block from the docs of a trail-map SDK: choosing a language drops a ripple into the code from under its
tab, and each letter goes under in the trough and comes up in the new language; Copy floods the code with a
selection shaped like a lake on a map, which drains back into the button -->
<section class="snippet" aria-label="Get a trail with the Fellmap SDK" data-snippet data-autoclic>
<header class="snippet__bar">
<div class="tabs" data-tabs-wrap>
<div class="tabs__row" role="tablist" aria-label="Language" data-tabs></div>
<div class="tabs__row tabs__ink" aria-hidden="true" data-ink></div>
</div>
<button class="copy" type="button" data-copy>
<svg class="copy__icon" viewBox="0 0 20 20" aria-hidden="true">
<path class="copy__back" d="M13 6.5V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1.5" data-back/>
<path class="copy__front" d="M9 7h6a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2Z" data-front/>
</svg>
<span class="copy__label" data-label>Copy</span>
</button>
</header>
<div class="code" role="tabpanel" id="code-panel" tabindex="0" data-panel>
<div class="code__inner" data-inner>
<svg class="code__lake" aria-hidden="true" data-lake-svg>
<defs>
<!-- the selection: the lines' rectangles blurred and cut at half their alpha (they melt into one shape
with rounded shores, inside and outside corners alike), then an eroded copy lighter inside -->
<filter id="lake" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB" data-lake-filter>
<feGaussianBlur in="SourceAlpha" stdDeviation="4.5" result="blur"/>
<feColorMatrix in="blur" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 24 -11" result="goo"/>
<feFlood class="lake__shore" result="shoreInk"/>
<feComposite in="shoreInk" in2="goo" operator="in" result="shore"/>
<feMorphology in="goo" operator="erode" radius="1.3" result="inside"/>
<feFlood class="lake__water" result="waterInk"/>
<feComposite in="waterInk" in2="inside" operator="in" result="water"/>
<feMerge>
<feMergeNode in="shore"/>
<feMergeNode in="water"/>
</feMerge>
</filter>
</defs>
<g filter="url(#lake)" data-lake></g>
</svg>
<div class="code__grid" aria-hidden="true" data-grid></div>
</div>
<pre class="sr" data-text></pre>
</div>
<p class="sr" aria-live="polite" data-live></p>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/MorphSVGPlugin.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.
29 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 codice a onde» da Animorio e adattala al mio sitoCosa fa
Su una pagina bianca un blocco di codice color carta da mappa: in alto la fascia con le schede JavaScript, Python, Go e cURL e il pulsante Copy, sotto il codice di Fellmap (un SDK inventato per le mappe dei sentieri) con i colori degli inchiostri di una carta escursionistica: marrone delle curve di livello per le parole del linguaggio, verde dei boschi per i testi, blu dell'acqua per le funzioni, rosso dei segnavia per le classi. La scheda scelta sta in una pillola scura che scivola sulla scheda nuova, e il colore delle parole cambia proprio sul suo bordo. Insieme, da sotto la scheda cade un'onda che si allarga nel codice ad anelli: davanti c'è la valle, dove ogni lettera rimpicciolisce, si assottiglia e quasi sparisce; sul fondo diventa la lettera del nuovo linguaggio col suo colore, poi risale sulla cresta più grande e più nera e si posa. Dietro passano anelli più piccoli, e un'eco più debole torna dal bordo di sotto come se l'onda ci avesse sbattuto. Il blocco si allunga o si accorcia insieme all'onda. Copy mette il codice negli appunti: il pulsante si riempie d'acqua, il foglio dell'icona si piega in una spunta e Copy diventa Copied tenendo ferme le lettere che le due parole hanno in comune. Intanto la selezione esce da sotto il pulsante come un lago: corre lungo le righe più in fretta che fra una riga e l'altra, prende la forma del codice con una riva più scura e gli angoli arrotondati, dentro e fuori. Dopo un poco il lago si ritira verso il pulsante, che torna a dire Copy.
Come funziona
Il codice in celle
Una regex per linguaggio (il linguaggio si capisce dal nome della scheda) taglia il codice in parole, e una parola è del linguaggio se è in un elenco, una funzione se dopo c'è una parentesi, un nome dopo un punto, una classe se comincia con la maiuscola, una costante se è tutta maiuscola. Ogni carattere diventa una cella inline-block larga quanto un carattere di Martian Mono, misurato una volta: il font è monospaziato e la larghezza non cambia col peso, così ogni cella sa dove sta (colonna per larghezza, riga per altezza) senza misurare niente. Le tabulazioni vanno alla colonna di quattro; sul telefono le righe lunghe vanno a capo con due spazi di rientro, dopo uno spazio, una virgola o una parentesi.
L'onda
Un anello che parte da sotto la scheda: a una distanza s dietro il suo fronte l'acqua è alta −sin(2πs/WAVE)·e^(−s/0,6WAVE), meno lontano da dove è caduta (diviso per √(1+d/220)), quindi prima viene la valle e poi la cresta. Sulla valle la lettera rimpicciolisce, scende di peso fino a 140 e sbiadisce; sul fondo cambia testo e colore; sulla cresta cresce del 16%, sale di peso fino a 800 (l'asse wght del font variabile) e si alza di qualche pixel. Le onde ancora in viaggio si sommano, e quella nuova è la sola che cambia le lettere.
L'eco dal bordo
Il bordo di sotto fa da specchio: per ogni onda c'è una seconda sorgente, la stessa specchiata sotto il bordo, che manda un anello più debole (ECHO) verso l'alto. Si calcola come la prima, e non cambia le lettere.
Righe in più e righe in meno
Al cambio la griglia ha tante righe quante ne ha il più lungo dei due codici, e ogni cella sa cosa mostra e cosa diventerà; una cella che deve sparire diventa uno spazio, così le lettere dopo non si spostano. Il blocco tiene la sua altezza e la porta a quella nuova seguendo l'onda: subito se cresce, quando l'onda è passata se cala. Finita l'onda le righe si riscrivono pulite.
Il lago
Un rettangolo per riga, dalla prima colonna all'ultima lettera, dentro un gruppo SVG col filtro: feGaussianBlur sfoca, feColorMatrix taglia l'alfa a metà (0 0 0 24 −11) e i rettangoli si fondono in una forma sola con gli angoli arrotondati anche dentro; feMorphology erode una copia di 1,3 pixel per l'acqua chiara, e quello che resta fuori è la riva. Ogni rettangolo si apre dove arriva un'ellisse che cresce da sotto il pulsante, schiacciata di ACROSS fra le righe, con un piccolo ritardo a caso per riga.
Copy, le schede e l'anteprima
Copy scrive negli appunti con navigator.clipboard, se no con un campo nascosto e execCommand, se no seleziona il codice; la conferma passa da aria-live. La parola tiene ferme le lettere in comune (Cop) e cambia la coda in una fessura che si allarga; l'icona si piega con MorphSVG. Le schede sono un tablist con frecce, Home e Fine; la pillola è una copia scura della riga ritagliata con clip-path inset sulla scheda scelta. Un clic da script (l'anteprima) preme Copy la prima volta e ogni tre, e le altre volte passa alla scheda dopo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SAMPLES | script.js | [['JavaScript', "import { Fellmap } …"], ['Python', …], ['Go', …], ['cURL', …]] | Le schede: il nome del linguaggio e il suo codice. Il nome dice anche come colorarlo (py, go, curl o shell, se no JavaScript); le tabulazioni del Go restano nel codice copiato. |
SPEED | script.js | 600 | Quanto in fretta si allarga l'onda, in pixel al secondo. |
WAVE | script.js | 140 | La lunghezza d'onda, in pixel: più è lunga, più lettere stanno insieme nella valle e sulla cresta. |
SWELL | script.js | 1 | Quanto le lettere crescono, ingrassano e sbiadiscono sull'onda (0 = il codice cambia e basta). |
ECHO | script.js | 0.4 | Quanto è forte l'anello che torna dal bordo di sotto (0 = niente eco). |
FLOOD | script.js | 0.8 | I secondi che il lago impiega ad allagare il codice. |
COPIED | script.js | 1.6 | I secondi che il codice resta selezionato e il pulsante dice Copied. |
COPIED_LABEL | script.js | 'Copied' | Cosa dice il pulsante quando il codice è negli appunti. |
Quando usarla
Per la documentazione di un SDK o di un'API con gli esempi in più linguaggi, la pagina d'installazione di uno strumento (npm, pnpm, yarn), il blog di uno sviluppatore, una guida con lo stesso esempio scritto in modi diversi.
Sul telefono
Sotto i 480 pixel il codice scende a 12 pixel e si stringe sull'asse della larghezza di Martian Mono (75%), così stanno circa 45 caratteri per riga; le righe più lunghe vanno a capo con due spazi di rientro, e niente sfora di lato. Anche le schede si stringono un poco (font-stretch 92%) per stare con Copy in una riga a 390 pixel. I tocchi non aspettano il doppio tocco (touch-action manipulation).
Con il movimento ridotto
Il codice nuovo arriva con una dissolvenza, senza onda; la pillola salta sulla scheda scelta; il lago compare tutto insieme con una dissolvenza e se ne va allo stesso modo; l'icona e la parola cambiano senza muoversi, il pulsante non si stringe alla pressione e non c'è entrata.
Trappole
- Cambiando la lettera sulla cresta, quando è più grande e più nera, si vedeva lo scatto: l'onda arriva con la valle davanti, e la lettera cambia sul fondo, dove è piccola e quasi trasparente.
- Una cella da svuotare (la riga nuova è più corta) toglierebbe il suo posto alle lettere dopo, che salterebbero a sinistra: diventa uno spazio, e le righe si ripuliscono solo a onda finita.
- Le celle misurate prima che arrivi il font hanno la larghezza del carattere di ripiego: document.fonts.ready non basta, perché un font che nessun testo usa ancora non viene chiesto; si aspetta document.fonts.load per i due font.
- Andare a capo all'ultimo punto possibile spezzava process.env. da FELLMAP_KEY e api.fellmap. da dev: prima si cerca uno spazio, una virgola o una parentesi nella seconda metà della riga, poi un punto o una barra (mai fra le due di https://).
- Il pulsante centra il testo: la coda di Copy, in una fessura che si allarga verso Copied, scivolava a destra finché non si è messo text-align left.
- Con un fondo scuro per ogni scheda, la pillola che scivola mostrava una riga chiara nello spazio fra due schede: il fondo scuro sta su tutta la copia della riga, e il ritaglio fa la pillola.
- Se a fine onda si libera l'altezza del blocco mentre il tween che la porta alla nuova è ancora in corso, il blocco salta: si libera solo quando il tween è finito.
Librerie
GSAP 3.15.0, MorphSVG (GSAP) 3.15.0, Martian Mono (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP + MorphSVG 37 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.
