Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
L’onda fatta di cerchi
Scorri dentro l’anteprima
La pagina di un oscillatore per sintetizzatori, nello stile minimal: scendendo gira una catena di cerchi, ognuno sulla punta di quello prima, e la punta dell’ultimo scrive un’onda. Con un cerchio è una sinusoide pura; ogni cerchio nuovo spunta con una piccola molla e l’onda si fa più quadrata, fino a riempire quasi un quadrato tratteggiato blu. La parola sotto si allarga e prende peso con lei.
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 wave made of circles</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the product page of a made-up synthesizer maker, Odalo. Scrolling turns a chain of circles, each spinning on the
tip of the one before, and the tip of the last one writes a wave. One circle writes a pure sine; every new circle
pops in on the tip of the chain and the wave gets squarer, until it almost fills a thin dashed square. The word
under it widens and gains weight with the wave -->
<main>
<section class="apertura">
<p class="piccolo">Odalo, synthesizers</p>
<h1 class="titolo">Every sound<br>is made of circles.</h1>
<p class="piccolo piccolo--tenue">Scroll to add them.</p>
</section>
<section class="racconto" data-racconto>
<div class="palco" data-palco>
<header class="testa">
<p class="marchio">Odalo</p>
<p class="piccolo piccolo--tenue">Square One oscillator</p>
</header>
<svg class="tavola" data-tavola aria-hidden="true">
<g data-quadro>
<line class="asse" data-asse></line>
<path class="bersaglio" data-bersaglio></path>
<g data-cerchi></g>
<line class="filo" data-filo></line>
<path class="onda" data-onda></path>
</g>
</svg>
<div class="scritta">
<p class="conto" data-conto aria-live="polite">1 circle</p>
<p class="parola" data-parola>square</p>
</div>
</div>
</section>
<section class="apertura apertura--fine">
<h2 class="titolo titolo--medio">Square One.<br>Out in the spring.</h2>
</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/ScrollTrigger.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.
21 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 «L’onda fatta di cerchi» da Animorio e adattala al mio sitoCosa fa
La pagina di prodotto di un costruttore di sintetizzatori inventato, Odalo, su un bianco caldo con linee nere sottili e un solo blu elettrico. Dopo l’apertura lo schermo si ferma: a sinistra un cerchio grande con il suo braccio, a destra un grafico con l’asse grigio e un quadrato tratteggiato blu che si accende piano, l’onda da raggiungere. Scendendo il cerchio gira e un filo blu punteggiato porta l’altezza della punta del braccio all’inizio dell’onda, che scorre via verso destra: con un cerchio solo è una sinusoide morbida. Poi, uno alla volta, sulla punta della catena spuntano cerchi sempre più piccoli (le armoniche dispari: un terzo, un quinto, un settimo…), ognuno con una piccola molla che lo fa crescere un po’ troppo e tornare; ognuno gira più veloce di quello prima, e l’onda cambia forma sotto gli occhi: si appiattisce in cima e in fondo, i fianchi si raddrizzano, finché con otto cerchi sta quasi dentro il quadrato, con le piccole corna agli angoli che ogni onda quadra vera conserva. In basso a sinistra il conto dei cerchi e la parola square, che parte stretta e sottile e si allarga e prende peso con l’onda, fino a un piccolo colpo finale quando arriva l’ultimo cerchio. Sul telefono il disegno è girato di lato e l’onda scende lungo lo schermo. Tutto segue lo scorrimento, avanti e indietro.
Come funziona
Una serie di Fourier in un SVG
L’onda quadra è la somma di sinusoidi dispari: sin(x) + sin(3x)/3 + sin(5x)/5 e così via, per 4/π. Ogni termine è un cerchio di raggio 1/n che gira n volte più veloce del primo, appoggiato sulla punta del braccio di quello prima. Lo script disegna i cerchi e i bracci in un gruppo SVG e, a ogni fotogramma, rifà l’onda con 260 punti: l’altezza a ogni punto è la stessa somma calcolata a una fase un po’ più vecchia.
Un sistema di riferimento suo
Tutto è disegnato in un riferimento proprio: u lungo l’onda, v la sua altezza. Sul computer il gruppo è solo spostato e l’onda va a destra; sul telefono, dove non c’è larghezza, lo stesso gruppo è girato di 90 gradi e l’onda scende lungo lo schermo, senza riscrivere niente. Raggio del cerchio grande, inizio e lunghezza del grafico si ricalcolano a ogni refresh di ScrollTrigger e a ogni resize.
Lo scorrimento fa girare
La timeline, legata allo scorrimento con scrub SCRUB, porta un numero da 0 a 1 che diventa la fase: il cerchio grande fa TURNS giri in tutto il racconto. Ogni cerchio ha anche un peso w da 0 a 1 che moltiplica il suo raggio: i cerchi nuovi arrivano con un tween di w con la curva POP, un back.out che lo porta un poco oltre 1 e lo riporta. Siccome anche l’onda usa w, l’onda fa la stessa molla.
Il quadrato da raggiungere e il filo
Il quadrato tratteggiato è il segno della stessa sinusoide di base (+1 o −1), disegnato con tratti orizzontali e verticali dove il segno cambia, quindi scorre insieme all’onda. Il filo punteggiato blu va dalla punta dell’ultimo braccio all’inizio dell’onda: è lì che si vede che l’onda è scritta dai cerchi.
La parola che diventa quadrata
La parola square usa Anybody, che ha l’asse wdth da 50 a 150. La somma dei pesi dei cerchi dice quanto l’onda è quadrata: con un cerchio la parola è a 50 di larghezza e quasi senza peso, con tutti i cerchi a 150 e piena. Il conto sopra la parola cambia quando un cerchio è cresciuto per metà.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
CIRCLES | script.js | 8 | Quanti cerchi alla fine: più sono, più l’onda è quadrata. |
TURNS | script.js | 7 | Quanti giri fa il cerchio grande in tutto il racconto. |
PERIODS | script.js | 2 | Quante onde stanno nel grafico. |
POP | script.js | 'back.out(1.8)' | Come cresce ogni cerchio nuovo: il numero fra parentesi è quanto va oltre prima di tornare. |
TARGET | script.js | true | Il quadrato tratteggiato da raggiungere. |
SCRUB | script.js | 0.6 | Quanti secondi ci mette il disegno a raggiungere lo scorrimento. |
Quando usarla
Per la pagina di uno strumento musicale, un plugin audio, un corso di matematica o di fisica, o qualunque prodotto che si spiega mostrando come si compone da pezzi semplici: un cerchio alla volta, finché la forma non è quella giusta.
Sul telefono
Uguale, girato di lato: i cerchi stanno in alto al centro e l’onda scende lungo lo schermo, con il filo verticale; la parola sta in fondo e prende quasi tutta la larghezza quando è quadrata.
Con il movimento ridotto
Niente gira e niente cresce: la catena è ferma a una fase fissa e ogni cerchio nuovo, con la sua onda, compare di colpo dietro una breve dissolvenza; la parola cambia larghezza e peso a scatti con il conto.
Trappole
- Per il movimento ridotto la prima versione abbassava l’opacità del disegno con tween della timeline sovrapposti sullo stesso valore: troppo lunghi, il disegno restava sbiadito per metà del tempo. Ora la dissolvenza si calcola nel disegno dal tempo del racconto, solo un decimo prima e dopo ogni cerchio nuovo.
- Il quadrato da raggiungere disegnato come una sinusoide spinta (un segno arrotondato) avrebbe i fianchi storti: si disegna dal segno della sinusoide di base, con un tratto verticale a metà fra i due punti dove il segno cambia.
- Sul telefono la parola larga 150 a 9vw usciva dallo schermo: lì il corpo è 14,5vw, misurato perché square largo e pieno stia nella larghezza.
- Non serve ridisegnare l’onda con un elenco dei punti passati (una scia): calcolarla di nuovo a ogni fotogramma con i cerchi di adesso fa vedere l’onda che cambia forma tutta insieme quando arriva un cerchio, ed è quello che racconta l’idea.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Anybody (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,7 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 19 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.
