La valutazione a stelle
Valutazioni, SVG, Hover
NuovaGratis
Tutti i componenti
Il lettore a onda di linee
Il lettore di un podcast nello stile minimal: la forma d'onda è una fila di linee verticali sottili, e le linee già ascoltate prendono l'accento. Passando col puntatore le linee vicine si allungano e si allargano come sotto una lente, ognuna sulla sua molla, mentre il tempo di quel punto, in cifre tabellari, segue il puntatore col nome del capitolo. Si trascina per cercare, play diventa pausa e le cifre del tempo girano una per una.
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 player with a wave of lines</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the player with a wave of lines: a podcast player whose waveform is a row of hairlines drawn on a canvas.
Under the pointer the lines spread and grow as under a lens, each one on its own spring, and the time of the
point rides above them in tabular figures. No sound: the time simply runs -->
<section class="player" aria-label="Podcast player" data-player data-autoclic>
<header class="head">
<p class="head__show">Slow Signal</p>
<p class="head__meta">Oct 14 · 48 min</p>
</header>
<h2 class="title" data-title>The quiet part of the work</h2>
<p class="guest">with Tamsin Okoro</p>
<div class="scope" data-scope>
<canvas class="scope__lines" aria-hidden="true" data-canvas></canvas>
<div class="readout" aria-hidden="true" data-readout>
<span class="readout__time" data-readout-time>0:00</span>
<span class="readout__chapter" data-readout-chapter></span>
</div>
<div class="wave" role="slider" tabindex="0" aria-label="Position in the episode" aria-valuemin="0" data-wave></div>
</div>
<div class="controls">
<button class="play" type="button" aria-label="Play" aria-pressed="false" data-play>
<svg viewBox="0 0 24 24" aria-hidden="true"><polygon data-a/><polygon data-b/></svg>
</button>
<div class="now">
<p class="now__clock" aria-hidden="true"><span class="digits" data-now>0:00</span><span class="now__of">/</span><span data-total>0:00</span></p>
<p class="now__chapter" data-chapter></p>
</div>
<button class="speed" type="button" aria-label="Playback speed: 1 times" data-speed><span class="speed__in" data-speed-text>1×</span></button>
</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="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.
39 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 lettore a onda di linee» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una scheda quasi nera, larga 380 pixel, con un filo sottile intorno. In alto Slow Signal e Oct 14 · 48 min in maiuscolo piccolo; sotto, grande, il titolo dell'episodio, The quiet part of the work, e with Tamsin Okoro. In mezzo la forma d'onda: un centinaio di linee verticali di un pixel, alte quanto è forte la voce in quel momento (la sigla all'inizio, le frasi, i respiri, un breve stacco a ogni capitolo), con tre tacche sotto dove cominciano i capitoli. In fondo il pulsante play, il tempo 14:05 / 48:30 col capitolo in corso, Learning to wait, e la velocità 1×. All'arrivo le parole del titolo salgono e prendono peso, le linee crescono da sinistra con un piccolo rimbalzo e l'accento arancio corre fino a 14:05, dove l'ascolto si era fermato. Col puntatore sopra le linee vicine si allargano e si allungano come sotto una lente, quelle intorno si stringono un poco come sul bordo di una lente vera, e quelle non ancora ascoltate si schiariscono; ogni linea arriva al suo posto su una molla, con un pixel di troppo e il ritorno. Sopra la lente il tempo di quel punto, in cifre tabellari, segue il puntatore su una molla più morbida, prende peso quando la lente si apre e si stringe quando corre; sotto c'è il nome del capitolo e un filo che lo lega alla linea. Un clic porta lì l'ascolto e l'accento ci corre; trascinando si cerca. Play si apre nelle due barre della pausa, il tempo scorre (senza suono) e le sue cifre girano una per una; cambiando capitolo il nome sotto il tempo scivola via e arriva il nuovo. La velocità passa da 1× a 1,5× e 2×: la cifra si stringe sull'asse della larghezza e si riapre con la nuova.
Come funziona
Le linee dalla voce
L'episodio è una fila di 2400 valori di volume, scritti una volta sola da un seme fisso: frasi di lunghezza diversa con una curva dentro, respiri quasi muti fra l'una e l'altra, un'onda lenta che rende certi tratti più vivi, la sigla all'inizio e un attimo di silenzio con uno stacco a ogni capitolo. Il numero delle linee viene dalla larghezza (una ogni PITCH pixel) e ogni linea mescola il picco e la media del suo tratto, con un po' di contrasto: cambiando misura l'onda resta lo stesso episodio.
La lente che non sposta il tempo
Ogni linea ha un peso e la striscia si divide in proporzione ai pesi. Il peso è 1, più una gaussiana stretta intorno al puntatore, meno una larga che le restituisce la stessa area: le linee sotto la lente prendono spazio e quelle in un anello intorno lo cedono, come sul bordo di una lente vera, mentre il resto della striscia e le due estremità non si muovono. Ogni lato del centro paga la sua metà, quindi la linea sotto il puntatore è quella che c'era prima che la lente si aprisse e il tempo letto è quello giusto; vicino a un'estremità, dove l'anello ha poche linee da dare, quel lato della lente cresce meno, così nessun peso scende sotto 0,2 e nessuna linea ne scavalca un'altra.
Una molla per linea
La lente dà a ogni linea un posto e un'altezza (1 + MAGNIFY volte la gaussiana); ogni linea li insegue con una molla smorzata (STIFFNESS, e BOUNCE che toglie smorzamento), integrata a passi di 1/120 di secondo con il passo del fotogramma limitato a 1/30. La forza della lente arriva e se ne va su una molla senza rimbalzo. Il canvas ridisegna le linee col colore scelto fra due rampe preparate prima (non ascoltate verso chiaro, ascoltate verso l'inchiostro) e lo spessore che cresce di mezzo pixel sotto la lente; il ticker di GSAP si stacca quando niente si muove.
Il tempo sopra la lente
Il tempo e il capitolo sopra la striscia seguono il puntatore su una molla più morbida e restano dentro la scheda; il peso del carattere va da 300 a 530 con la forza della lente e la larghezza (font-stretch, l'asse wdth di Roboto Flex) cala con la velocità della molla, così la cifra si stringe quando corre. Le cifre sono tabellari: il numero non balla mentre cambia. La larghezza della scritta si misura solo quando cambia il capitolo.
Cercare, suonare, girare le cifre
Il tempo mostrato è il tempo vero più un ritardo che un tween porta a zero in SEEK secondi: un clic sposta subito il tempo e l'accento ci corre dietro, e trascinando (con la cattura del puntatore) il tempo segue la mano mentre il ritardo si scioglie. Play e pausa sono due poligoni i cui punti scivolano dalle due metà del triangolo alle due barre, con back.out per un pixel di troppo. Il tempo sotto è fatto di finestrelle, una per cifra: cambia solo la cifra che cambia, quella vecchia sale e la nuova arriva da sotto. La velocità si stringe fino al 25% dell'asse wdth, cambia e si riapre.
Tasti, tocco e anteprima
La striscia è un role slider: frecce di 10 secondi, pagine di un minuto, Home e Fine, Spazio fa play e pausa; con i tasti la lente si posa sulla linea in corso. Col dito la lente si apre finché il dito tocca e resta un attimo dopo, perché il tempo si possa leggere. Un clic da script sulla scheda (l'anteprima della libreria) fa un giro su una timeline di GSAP: play, un puntatore suo che passa la lente sull'onda, preme e trascina, passa ancora, se ne va, la velocità a 1,5×, la pausa e il ritorno a 14:05.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LENGTH | script.js | '48:30' | Quanto dura l'episodio (minuti:secondi, o ore:minuti:secondi). |
RESUME | script.js | '14:05' | Dove l'ascolto si era fermato: il lettore si apre lì. |
CHAPTERS | script.js | [['0:00', 'Cold open'], ['6:20', 'Learning to wait'], ['19:45', 'Tools that disappear'], ['34:10', 'The last ten percent']] | I capitoli: dove comincia ognuno e il suo nome. Ognuno ha la sua tacca sotto l'onda e uno stacco nella voce. |
SPEEDS | script.js | [1, 1.5, 2] | Le velocità che il pulsante della velocità fa girare. |
PITCH | script.js | 3.4 | I pixel da una linea all'altra: meno pixel, più linee. |
MAGNIFY | script.js | 0.85 | Quanto si allungano le linee sotto la lente (0 = per niente). |
SPREAD | script.js | 1.6 | Quanto la lente allarga le linee sotto di lei (0 = per niente). |
REACH | script.js | 30 | Il raggio della lente, in pixel. |
STIFFNESS | script.js | 320 | Le molle delle linee: più alto, più svelte. |
BOUNCE | script.js | 0.28 | Quanto le linee vanno oltre il loro posto prima di fermarsi (0 = niente). |
SEEK | script.js | 0.6 | I secondi che l'accento impiega a correre a un punto nuovo. |
Quando usarla
Per il sito di un podcast, la pagina di un episodio, un'intervista in audio, la registrazione di un talk, un audiolibro o la nota vocale di un'app: un lettore sobrio in cui l'onda si legge come un indice e si cerca il punto giusto a colpo d'occhio.
Sul telefono
La scheda è larga al massimo 380 pixel (a 390 è larga 358 e le linee si contano di nuovo dalla larghezza). Il dito che tocca la striscia apre la lente e la trascina senza far scorrere la pagina (touch-action none solo sulla striscia); alzandolo la lente resta 0,9 secondi, così il tempo si legge. Il pulsante play è di 54 pixel.
Con il movimento ridotto
Le linee non si muovono e non si allungano: la lente le schiarisce soltanto, in dissolvenza. Il tempo sopra la striscia compare in dissolvenza e sta sotto il puntatore senza molla; l'accento salta subito al punto nuovo, le cifre e il capitolo cambiano senza girare, l'icona di play cambia subito e la scheda entra in dissolvenza, già a 14:05.
Trappole
- Con la striscia divisa in proporzione ai pesi, la lente tirava tutta l'onda: le linee lontane si stringevano tutte, la lente si apriva qualche pixel accanto al puntatore e il tempo sotto il dito cambiava di due minuti mentre si apriva. Ora il peso in più sotto la lente lo cede un anello intorno, e ogni lato paga per sé: il resto della striscia resta fermo e la linea sotto il puntatore non cambia.
- Vicino alle estremità l'anello ha poche linee da cui prendere spazio e i pesi andavano sotto zero (linee che si scavalcano): quel lato della lente cresce meno, quanto basta perché ogni peso resti almeno 0,2.
- Con le due cifre che giravano con due curve diverse (una lenta all'inizio, l'altra svelta) per un attimo si vedevano tutte e due nella finestrella: ora salgono e scendono con la stessa partenza.
- La linea in corso era bianca ma, in un punto di silenzio, alta un pixel e non si trovava: è sempre alta almeno il 70% di una linea forte.
- Il carattere di Fontsource index.css ha solo l'asse wght: per la larghezza serve wdth.css di Roboto Flex, che porta wght e wdth insieme.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 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.
