Il pulsante che copia
Pulsanti, Testo, SVG, Fisica
NuovaGratis
Tutti i componenti
La scaletta sulle righe
Nello stile minimal: la scaletta di un concerto da riordinare trascinando, una canzone per riga come su un foglio a righe. Presa, la canzone si alza di un pixel con un’ombra lievissima e prende peso; le altre si aprono per farle posto, ognuna sulla sua molla, e lo spazio dove andrebbe è una riga vermiglia che si allunga mentre lo spazio si apre e si accorcia mentre si chiude. Lasciata, si posa sulla riga, che cede sotto di lei e si assesta, e gli orari d’inizio si rifanno.
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 setlist on ruled lines</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- tonight's setlist, a list to put in order by dragging. Every song sits on a thin line, as on ruled paper. Picked
up, a song rises a pixel with the faintest shadow and takes weight; the others open up to make room on
springs, one after the other, and the space where it would land is a vermilion line that grows as the space
opens and shrinks as it closes. Put down, the song lands on that line, the line gives under it and settles.
The start times follow the order. Keys: Space picks up, the arrows move, Space puts down, Escape cancels.
On a phone: press and hold a song, then drag it -->
<section class="set" aria-labelledby="set-title" data-set data-autoclic>
<header class="set__head" data-head>
<h2 class="set__title" id="set-title">Tonight’s set</h2>
<p class="set__meta" data-meta></p>
</header>
<div class="sheet">
<span class="sheet__rule" aria-hidden="true" data-head-rule></span>
<ol class="songs" aria-label="Running order" aria-describedby="set-keys" data-list></ol>
<!-- the open spaces: one thin line for every place the song in hand could land, as long as the space is open -->
<svg class="gaps" aria-hidden="true" data-gaps></svg>
</div>
<p class="set__hint" aria-hidden="true" data-hint><span class="set__hint-mouse">Drag a song to change the order</span><span class="set__hint-touch">Press and hold a song, then drag it</span></p>
<p class="sr" id="set-keys">Press Space to pick a song up, the up and down arrows to move it, Space again to put it down, Escape to cancel.</p>
<p class="sr" aria-live="assertive" 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.
37 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 scaletta sulle righe» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco il titolo Tonight’s set, nero, stretto e pieno, con accanto in grigio 8 songs · 36 min; sotto, un filetto nero e otto canzoni, una per riga, ognuna appoggiata a una riga grigia sottile come su un foglio a righe, con a destra in grigio l’ora in cui comincia: Glass Orchard alle 21:00, Copper Weather alle 21:04 e così via fino a Northern Quiet. All’arrivo il filetto si disegna da sinistra e poi, riga dopo riga, ogni riga si disegna e la sua canzone sale a posarsi, un pixel troppo in alto, e prende il suo peso. Col mouse sopra una canzone la sua riga si scurisce. Presa e trascinata, la canzone si alza di un pixel su una carta bianca con un’ombra appena visibile e diventa più piena; la riga che lascia diventa vermiglia. Le altre si scansano per farle posto, prima le vicine e un attimo dopo le lontane, e fra due canzoni lo spazio che si apre ha una riga vermiglia lunga quanto lo spazio è aperto: quella dove andrebbe la canzone cresce dal centro, quella che ha appena lasciato si accorcia fino a sparire. Le parole che corrono si stringono un poco sull’asse della larghezza, tanto più quanto vanno veloci. Fermando la mano la canzone scivola sullo spazio, così la riga vermiglia si vede sotto di lei. Gli orari seguono l’ordine mentre si trascina, e girano solo le cifre che cambiano. Lasciata, la canzone si posa sulla riga vermiglia, la riga cede sotto di lei come una corda tesa e si assesta, le righe vicine sentono il colpo, il peso torna giù con un assestamento e il vermiglio sfuma nel grigio.
Come funziona
Un campo di molle
Ogni canzone ha la sua y e la sua velocità, e a ogni fotogramma (in passi di 1/240 di secondo, col tempo limitato a 1/30) una molla la porta verso il suo posto: con una canzone in mano, le altre saltano lo spazio dove andrebbe. Più una canzone è lontana da quella in mano, più la sua molla è morbida e frenata in proporzione, così il rapporto di smorzamento resta uguale e la coreografia parte dalle vicine.
Le righe dagli spazi veri
Le righe vermiglie non sono animate: a ogni fotogramma lo script misura lo spazio fra il fondo di una canzone e la cima della seguente, dove le molle sono arrivate davvero, e disegna una riga lunga quanto quello spazio è aperto, centrata (con una curva, perché uno spazio di un pixel non disegni niente). Così mentre la mano passa le righe si allungano e si accorciano da sole, anche più di una alla volta.
La canzone in mano
La riga segue il puntatore su una molla rigida, con un poco di gioco oltre le due estremità; più la mano è ferma, più le righe la tirano verso lo spazio dove andrebbe, così la riga vermiglia si vede sotto di lei. Il peso (asse wght) sale su una tween di GSAP, la larghezza (asse wdth) scende con la velocità: font-variation-settings riscritte solo quando cambiano.
La posa
Lasciata, la canzone va al suo posto su una molla più morbida; arrivata, entra nell’ordine, la sua riga torna vermiglia e sfuma nel grigio, e la riga (un path SVG con una curva quadratica) riceve una spinta: è una corda smorzata che cede e torna, mentre le due vicine ne ricevono una più piccola. Il sollevamento e il peso tornano a zero con back.out, l’assestamento di un pixel.
Orari, tastiera, tocco
Gli orari si ricalcolano dall’ordine che ci sarebbe lasciando la canzone adesso, e girano solo le cifre cambiate, dal basso se l’ora viene dopo e dall’alto se viene prima. Da tastiera le frecce passano da una canzone all’altra; Spazio la prende, le frecce la spostano, Spazio la posa ed Esc annulla, tutto detto da una regione aria-live. Col dito si prende con una pressione lunga, così uno scorrimento veloce fa ancora scorrere la pagina.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SONGS | script.js | [['Glass Orchard', '4:21'], ['Copper Weather', '3:48'], …] | Le canzoni nell’ordine dell’apertura: titolo e durata. |
START | script.js | '21:00' | L’ora in cui comincia il concerto: ogni canzone mostra l’ora in cui inizia. |
LIFT | script.js | 1 | Di quanti pixel si alza una canzone presa. |
HELD_WEIGHT | script.js | 640 | Il peso della canzone in mano (da 200 a 800). |
REST_WEIGHT | script.js | 430 | Il peso delle canzoni sulle loro righe (da 200 a 800). |
SPRING | script.js | [320, 28] | La molla delle canzoni che fanno posto: quanto è rigida e quanto è frenata. |
RIPPLE | script.js | 0.45 | Quanto rispondono dopo le canzoni lontane da quella in mano (0, tutte insieme). |
SQUEEZE | script.js | 0.06 | Quanto si stringe sull’asse della larghezza una canzone che corre, per ogni pixel al secondo. |
PLUCK | script.js | 2 | Di quanti pixel cede la riga sotto una canzone posata. |
LONG_PRESS | script.js | 0.32 | Al telefono, quanti secondi il dito tiene una canzone prima che si alzi. |
Quando usarla
Per ogni elenco il cui ordine conta e si decide a mano: la scaletta di un concerto o di una serata, il programma di un festival, l’ordine di lettura di una newsletter, le priorità di una bacheca, le tappe di un viaggio, le portate di una cena. Sta bene in una colonna chiara e vuota, con sei-dieci voci corte; gli orari a destra si possono sostituire con durate, date o niente.
Sul telefono
Sotto i 520 pixel la colonna prende lo schermo meno 32 pixel, le righe sono alte 47 e i titoli un poco più piccoli. Col dito si tiene premuta una canzone: la sua riga si scurisce subito e dopo un terzo di secondo la canzone si alza, poi la si trascina e la pagina non scorre; uno scorrimento veloce, invece, fa scorrere la pagina come sempre. Il suggerimento in fondo dice Press and hold a song, then drag it.
Con il movimento ridotto
Niente molle, niente righe che crescono e niente corde: la canzone presa prende solo l’ombra e il peso, le altre saltano subito al loro posto e lo spazio dove andrebbe ha già la sua riga vermiglia intera. Le cifre degli orari cambiano senza girare e all’apertura tutto compare in dissolvenza. Nell’anteprima la canzone va da un posto all’altro un passo alla volta.
Trappole
- La canzone in mano, su una carta bianca, copriva proprio la riga vermiglia dello spazio dove sarebbe andata: le righe ora la tirano verso quello spazio quanto più la mano è ferma, così la riga si vede appena ci si ferma a guardare.
- Trascinando molto oltre il fondo, tutte le canzoni risultavano lontane da quella in mano e le loro molle diventavano così morbide da metterci due secondi: la distanza si misura dal punto dentro la lista più vicino, e la morbidezza ha un limite.
- Spazi di un pixel o due, mentre le molle si assestano, disegnavano trattini vermigli dappertutto: la lunghezza della riga segue una curva e sotto il 3 per cento non si disegna.
- Spostando nel DOM la canzone col fuoco il fuoco si perde: si rimette sulla canzone subito dopo, e lo spostamento avviene solo alla posa, quando non è più in mano alla tastiera.
- Col dito, prendere al primo tocco impediva di scorrere la pagina: si prende con una pressione lunga, e solo dopo un touchmove non passivo blocca lo scorrimento.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile, con gli assi del peso, della larghezza e della dimensione ottica) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 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.
