Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
La parola nel codice a barre
Una fila fitta di righe sottili, come un codice a barre: il puntatore le apre come canne, ognuna sulla sua molla e con il suo ritardo, e nei varchi che si allargano si legge una parola stampata dietro. Fermandosi il varco si allarga e la parola prende peso; andando via le righe tornano dritte con un'ultima oscillazione. Dello stile minimal.
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 word in the barcode</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the code: a row of thin bars drawn on a canvas, with a word printed behind them -->
<canvas class="code" data-code role="img" aria-label="A barcode that parts under the pointer to show a word"></canvas>
<!-- the mark: three small bars that lean with the pointer, and the name -->
<header class="mark" data-label>
<svg class="mark__bars" viewBox="0 0 14 16" aria-hidden="true">
<g class="mark__lean" data-lean>
<rect x="1" y="0" width="1.4" height="16"/>
<rect x="5" y="0" width="2.6" height="16"/>
<rect x="10.4" y="0" width="1.4" height="16"/>
</g>
</svg>
<span class="mark__name" data-rise>Slat</span>
</header>
<!-- the hint: what to do, and what to do once the bars are parted -->
<p class="hint" data-label>
<span class="hint__roll">
<span class="hint__line">Run the pointer across the bars.</span>
<span class="hint__line">Hold still, and they part wider.</span>
</span>
</p>
<!-- the word behind the bars, for screen readers -->
<p class="sr" data-said></p>
</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.
17 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 parola nel codice a barre» da Animorio e adattala al mio sitoCosa fa
Una pagina color carta con al centro un codice a barre: un centinaio di righe nere sottili, quasi tutte di un pixel e qualcuna più spessa, con gli spazi in tre misure come nei codici veri. In un angolo c'è il marchio inventato Slat (tre piccole righe accanto al nome), nell'altro una riga che dice cosa fare. All'apertura il codice si stampa da sinistra a destra: ogni riga cresce dal centro verso l'alto e verso il basso, una dopo l'altra; poi un soffio di vento lo attraversa una volta e per un attimo, fra le righe che si piegano, si vede un pezzetto di rosso. Passando col puntatore le righe vicine si aprono come canne: si piegano lontano da lui, di più all'altezza del puntatore e niente alle due estremità, che restano ferme. Gli spazi vicino al puntatore diventano tre volte più larghi, le righe al bordo del varco si stringono in due fasci scuri, e dentro i varchi si legge una parola rossa, grande e larga, stampata dietro il codice: si vede solo nella parte di ogni spazio che è più larga di prima, quindi a riposo resta nascosta del tutto. Ogni riga è una molla con il suo passo e risponde con un ritardo che cresce con la distanza, così ogni movimento attraversa il codice come il vento in un canneto, e muovendosi le righe si piegano anche dalla parte dove va il puntatore. Fermando il puntatore il varco si allarga piano fino a mostrare tutta la parola, che intanto prende peso; la riga in basso cambia frase con un piccolo rotolo. Quando il puntatore se ne va le righe tornano dritte, partendo da quelle più vicine, vanno un filo oltre il loro posto (e nei varchi di quell'ultima oscillazione si vede ancora un lampo di rosso) e si fermano. Alla volta dopo dietro il codice c'è un'altra parola (Hush, Listen, Hello). Anche le tre righe del marchio si piegano col vento.
Come funziona
Il codice su un canvas
Lo script mette le righe da sinistra a destra con un generatore casuale a seme fisso, così il codice è sempre lo stesso: lo spazio fra due righe è PITCH per due terzi, uno o quattro terzi, lo spessore è di 1, 1,5 o 2,2 pixel. Ogni riga è disegnata come una spezzata di 28 pezzi, e tutte quelle dello stesso spessore stanno in un solo tracciato: tre tratti in tutto a ogni fotogramma.
Ogni riga è una molla
Di ogni riga lo script tiene due numeri: quanto si piega e a che altezza si piega di più. Il primo segue il suo bersaglio come una molla smorzata, calcolata in passi di un centoventesimo di secondo, con un passo leggermente diverso per ogni riga; BOUNCE abbassa lo smorzamento. Il secondo segue l'altezza del puntatore senza oscillare. La forma della riga è una campana addolcita: zero alle due estremità, il massimo all'altezza scelta.
Il varco
Il bersaglio di ogni riga è la distanza dal puntatore moltiplicata per una gaussiana: d per e alla meno d al quadrato mezzi, con d misurata in REACH. Vicino al puntatore le righe si spostano tanto più quanto più sono lontane, quindi gli spazi si allargano (PART dice di quanto); più in là si spostano di meno e si stringono in fasci. A questo si somma una piega dalla parte dove va il puntatore, presa dalla sua velocità (WIND), e un limite morbido che non lascia uscire le righe dalla pagina.
La parola solo nei varchi
La parola è disegnata una volta su un canvas nascosto, nel taglio più largo del carattere che la fa stare quasi grande come la migliore. A ogni fotogramma, per ogni coppia di righe vicine e a ogni altezza, lo script toglie dallo spazio di adesso lo spazio di riposo: quello che avanza è una fessura al centro dello spazio. Tutte le fessure diventano un solo tracciato, che fa da maschera (clip) per la parola. A riposo la fessura è zero e la parola non si vede.
Il ritardo, la sosta e l'uscita
Lo script ricorda dove era il puntatore negli ultimi istanti e se c'era: ogni riga guarda quello di WAVE millisecondi per pixel di distanza fa, così le righe lontane si aprono e si richiudono dopo. Quando il puntatore resta fermo, un numero cresce piano da 0 a 1: allarga il varco e porta il peso della parola da WEIGHT meno 220 a WEIGHT, ridisegnandola a passi di dieci. L'entrata (la stampa e il soffio di vento) è una timeline GSAP.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORDS | script.js | ['HUSH', 'LISTEN', 'HELLO'] | Le parole stampate dietro il codice: ogni volta che il puntatore torna, la successiva. Meglio corte e in maiuscolo, si leggono a strisce. |
PITCH | script.js | 9 | Lo spazio medio fra due righe su uno schermo largo, in pixel. Sul telefono diventa più piccolo da solo. |
REACH | script.js | 0.12 | Quanto è largo il varco intorno al puntatore, come parte della larghezza del codice. Fermandosi diventa quasi il doppio. |
PART | script.js | 2 | Quanto si aprono le righe al centro del varco: con 2 gli spazi diventano tre volte più larghi. |
BOUNCE | script.js | 0.6 | Quanto le righe vanno oltre il loro posto prima di fermarsi (0 = per niente). |
WAVE | script.js | 0.9 | Quanto in ritardo rispondono le righe lontane: millisecondi per ogni pixel di distanza dal puntatore (0 = tutte insieme). |
WIND | script.js | 0.4 | Quanto le righe si piegano dalla parte dove va il puntatore, come canne al vento (0 = per niente). |
WEIGHT | script.js | 820 | Il peso della parola quando il varco è tutto aperto, da 300 a 900: passando parte più leggera di 220. |
Quando usarla
In apertura di un sito che vuole una prima pagina silenziosa con una sorpresa: uno studio, un negozio, un'etichetta, un evento che tiene nascosto il nome fino a quando lo si cerca. Il codice a barre sta bene in un negozio online o sulla pagina di un prodotto, e la parola nascosta può essere uno sconto, una data o un invito.
Sul telefono
La stessa animazione con le misure adattate: il codice è più stretto e le righe più fitte, la parola sceglie da sola il taglio del carattere che la fa più grande nella larghezza. Il dito è il puntatore: trascinandolo le righe si aprono e lo seguono, tenendolo fermo il varco si allarga, staccandolo le righe tornano dritte.
Con il movimento ridotto
Niente si piega e niente si sposta: il codice è già stampato e le righe stanno ferme. Quando il puntatore entra (o il dito tocca) la parola compare in dissolvenza dietro le righe, tutta intera, e quando esce sparisce allo stesso modo.
Trappole
- Mostrare la parola in tutto lo spazio fra due righe non la nasconde: a riposo si vedeva già a strisce. La parola sta solo in una fessura larga quanto lo spazio è cresciuto (lo spazio di adesso meno quello di riposo, con un margine del 4 per cento), così a riposo la fessura è zero.
- Con le molle troppo diverse fra loro (più o meno 16 per cento) nei passaggi veloci le righe vicine si incrociavano e facevano dei nodi: con più o meno 8 per cento restano un canneto che ondeggia.
- Sul telefono le righe al bordo, spinte dal varco, uscivano dallo schermo: lo spostamento passa per una tangente iperbolica che lo frena dolcemente quando si avvicina allo spazio libero ai lati.
- La velocità del puntatore si calcola dalla differenza fra due fotogrammi: quando il puntatore rientra da un altro punto la differenza è enorme e tutte le righe si piegavano di colpo. All'entrata la velocità riparte da zero.
- Nel font del canvas il peso può essere un numero qualsiasi, la larghezza solo una parola (condensed, normal, expanded...): il peso cambia con continuità, la larghezza si sceglie fra cinque tagli.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,1 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 15 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.
