La striscia che si impenna

Scroll, 3D, WebGL, ImmaginiWebGL, Canvas, GSAPImpegnativaPeso compresso: Demo 12 KBGSAP 28 KBGratisScarica lo zip

Scorri dentro l’anteprima

Otto schede su un nastro curvo in profondità: scorrendo la pagina il nastro corre di lato, e più va veloce più il lato sinistro si alza verso di te mentre le due estremità si torcono. All’inizio tre barrette di caricamento diventano le schede.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The rearing ribbon</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- a tall page: scrolling down moves the ribbon sideways; the script sets the height from the ribbon's length -->
  <main class="hall" data-hall>
    <div class="stage" data-stage>
      <!-- the ribbon and the floor are drawn here -->
      <canvas class="stage__canvas" data-canvas aria-hidden="true"></canvas>

      <header class="bar">
        <p class="brand">The Museum of Small Things</p>
        <a class="bar__link" href="#">Plan a visit</a>
      </header>

      <!-- the rooms: the script paints these names on the cards, and they stay here for whoever cannot see them -->
      <ul class="rooms" data-rooms>
        <li><h2>Buttons</h2><p>Four holes, mostly</p></li>
        <li><h2>Keys</h2><p>To doors that are gone</p></li>
        <li><h2>Marbles</h2><p>Won and lost in playgrounds</p></li>
        <li><h2>Matchboxes</h2><p>From cafés that closed</p></li>
        <li><h2>Tickets</h2><p>Trams, ferries, one funicular</p></li>
        <li><h2>Stamps</h2><p>Steamed off old letters</p></li>
        <li><h2>Spoons</h2><p>None of them matching</p></li>
        <li><h2>Combs</h2><p>Pocket size, tortoiseshell</p></li>
      </ul>

      <footer class="foot">
        <p>Autumn rooms</p>
        <p data-hint>Scroll</p>
      </footer>
    </div>
  </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.

109 valori da cambiare

Apri il Playground

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 striscia che si impenna» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Le sale di un museo inventato delle cose piccole, una scheda per sala: bottoni, chiavi, biglie, scatole di fiammiferi, biglietti, francobolli, cucchiai, pettini. Le schede stanno in fila su un nastro visto da una camera vera: a sinistra viene vicino, a destra si allontana, in una S lunga, e si inclina nella sua stessa pendenza come una pista. Sotto c’è un pavimento a quadri. Scorrendo la pagina il nastro si muove di lato, un po’ in ritardo sullo scorrimento: piano resta composto; con uno scatto il lato sinistro si alza e viene avanti, le due estremità si torcono in versi opposti e la S si fa più profonda, poi tutto si assesta. La scheda sotto il puntatore rientra al centro come un cuscino premuto, e un clic la porta in mezzo alla pagina. All’arrivo ci sono solo tre barrette bianche che si riempiono: poi ognuna vola, cresce e diventa una delle tre schede in vista, mentre le altre entrano dai lati.

Come funziona

La curva è un luogo

Ogni scheda è la stessa griglia di 32 per 8 quadri, messa dove starebbe la scheda piatta. La curva non appartiene alle schede: è una funzione della x sulla pagina, uguale per tutte. Per ogni vertice si calcola q = x / metà pagina × SPAN + SHIFT e la profondità è DEPTH × sin(π q) × e^(−q²): vicina a sinistra, lontana a destra, e di nuovo piatta fuori dalla pagina senza bisogno di tagli. Una scheda che attraversa una piega prende la piega, vertice per vertice, e le schede in fila fanno un nastro solo.

L’inclinazione letta dalla pendenza

Il nastro ruota attorno alla sua linea centrale di BANK per la derivata della stessa curva: dove sale più ripido si inclina di più, dove spiana sta dritto, e le due cose non possono mai essere in disaccordo perché una è letta dall’altra. In più tutto il nastro è girato come una porta, con una rampa 1,5 s − 0,5 s³ che arriva piatta ai bordi, e sale appena verso destra (TILT).

La velocità

Il nastro insegue lo scorrimento coprendo un decimo della distanza ogni sessantesimo di secondo. Quanto è rimasto indietro, in pixel, diviso RUSH e passato per tanh e poi al quadrato, è la velocità da 0 a 1: il quadrato tiene calmo lo scorrimento lento. Con la velocità il lato sinistro si alza di 0,1 e viene avanti di 0,2 (in mezze larghezze di pagina), con una maschera che si spegne verso il centro; le estremità si torcono fino a 1,8 radianti, una in un verso e una nell’altro; la S si approfondisce di SURGE.

La luce e l’ammaccatura

La normale della superficie si ricava dalle stesse formule, non dalla griglia: con un riflesso stretto (esponente 48) ogni spigolo della griglia diventerebbe una riga. La luce viene da sinistra in alto; in più la parte lontana della S è più scura (SHADE). Sotto il puntatore la scheda rientra di un decimo della sua altezza con una cupola (1 − x²)(1 − y²), che vale zero lungo tutti i bordi: il contorno non si muove, per quanto rientri il centro.

Le barrette erano le schede

Le tre schede più vicine al centro partono come barrette di 48 per 5 pixel, bianche, tagliate sul riempimento: la barretta k è piena per clamp(p × 3 − k, 0, 1). Finito il caricamento ognuna vola: il rettangolo va da quello della barretta a quello della scheda in 1,5 secondi di expo.inOut, a 0,05 l’una dall’altra; il bianco se ne va un filo prima dell’arrivo e la curva del nastro entra con lo stesso progresso. Le altre schede arrivano dai lati in 1,25 secondi.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`FOLLOW, RUSH`	script.js	`0.1, 140`	Quanto del ritardo sullo scorrimento il nastro recupera a ogni sessantesimo di secondo, e di quanti pixel deve essere indietro per contare come piena velocità.
`FIELD`	script.js	`53.4`	L’angolo di campo della camera, in gradi: più largo, più prospettiva.
`DEPTH, SURGE`	script.js	`0.2, 1.1`	Quanto è profonda la S (in mezze larghezze di pagina) e quanto si approfondisce alla massima velocità.
`SPAN, SHIFT`	script.js	`1.15, -0.2`	Quanta S sta nella pagina e di quanto è spostata: negativo porta il rigonfiamento vicino verso sinistra.
`BANK, DOOR, TILT`	script.js	`-0.16, -0.12, 0.03`	L’inclinazione nella pendenza (radianti), la rotazione a porta di tutto il nastro e la salita verso destra.
`REAR, WRING`	script.js	`0.1, 0.2, 1.8`	Alla massima velocità: di quanto il lato sinistro si alza e viene avanti, e di quanti radianti si torcono le estremità.
`DENT, HOVER`	script.js	`0.1, 0.5`	Di quanto rientra la scheda sotto il puntatore (parte della sua altezza) e in quanti secondi.
`SHADE, GLOSS`	script.js	`0.5, 0.35`	Quanto è scura la parte lontana della S e quanto è chiaro il riflesso.
`CARD`	script.js	`0.46, 10, 20`	Le schede: altezza (parte della pagina), distanza e raggio degli angoli in pixel.
`FLOOR`	script.js	`0.15, 0.11`	Il pavimento: quanto sono chiare le righe e quanto è largo un quadro, in larghezze di pagina.
`INTRO, BAR`	script.js	`1.4, 1.5, 0.05, 1.25 / 48, 5, 8`	I secondi dell’ingresso (caricamento, volo, scarto fra i voli, arrivo delle altre schede) e le misure delle barrette in pixel.
`ROOMS`	script.js	`8`	Le otto schede: oggetti, proporzioni e colori. Per usare delle foto si passano le immagini a texImage2D al posto dei canvas.

Provali nel Playground

Quando usarla

Per una fila di lavori, prodotti o capitoli che deve essere la scena principale: la home di un portfolio, una collezione, un programma. Vuole schede orizzontali piene di colore, da sei a una dozzina; con schede strette la torsione le mette di taglio prima che si leggano.

Sul telefono

Le schede sono più piccole e la S diventa una conca, senza porta: su uno schermo stretto un’onda non ha lo spazio per farsi leggere. Lo scorrimento col dito muove il nastro e lo fa impennare allo stesso modo. Niente ammaccatura: serve un puntatore.

Con il movimento ridotto

Il nastro è piatto e segue lo scorrimento senza ritardo: niente curva, niente impennata, niente ammaccatura, e le schede ci sono da subito, senza barrette.

Trappole

Piegare prima e ruotare dopo avvolge la piega invece del nastro. L’ordine è: rollio attorno alla linea centrale, poi la profondità, poi salita e impennata. Il rollio lascia intatta la x, e la curva legge la x.
Una normale presa dalla griglia restituisce le sue facce piatte, e un riflesso stretto trasforma ogni spigolo in una riga. La normale si calcola dalla derivata esatta della curva.
Oltre circa due radianti di torsione una scheda passa di taglio e per un attimo un’immagine diventa una linea. Per vedere più effetto a velocità normali conviene abbassare RUSH, non alzare WRING.
Quando il nastro si torce le schede si sovrappongono: serve il test di profondità, e vanno disegnate dalla più lontana alla più vicina, sennò il bordo morbido di una scheda vicina lascia un filo scuro su quella dietro.
L’area sensibile resta quella della scheda piatta: la prospettiva sposta il disegno, non il bersaglio. Con DEPTH e TILT alti il puntatore finisce per prendere la scheda sbagliata.

Librerie

GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 30 settembre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

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.