Il nastro con un lato solo

3D, Testo, WebGLWebGL, GSAP, CanvasImpegnativaPeso compresso: Demo 8,7 KBGSAP 28 KBThree.js 174 KBGratisScarica lo zip

Un nastro di carta chiuso con una mezza torsione, un nastro di Möbius, nello stile minimal: la parola «INSIDE» ci gira sopra piano e dopo un giro torna davanti sull’altra faccia, dove si legge «OUTSIDE» nel colore d’accento. Passando il puntatore (o la rotella, o un dito) il nastro corre più forte nel verso della mano, con una molla; lasciato, rallenta, va oltre il suo passo di un soffio e si assesta.

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 ribbon with one side</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
  <script type="importmap">
    { "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.178.0/build/three.module.min.js"
    } }
  </script>
</head>
<body>
  <!-- a thin paper ribbon closed with half a twist, a Moebius strip: it has one side and one edge. A word printed on
       it runs round and round; after one lap it comes back on the other face, where a second word waits in the
       accent. The script draws the ribbon and the letters on the canvas -->
  <main class="stage" data-stage>
    <canvas class="canvas" data-canvas aria-hidden="true"></canvas>
    <h1 class="sr" data-sr>Inside, outside: a ribbon with one side.</h1>
    <p class="hint" data-hint>Move across the ribbon</p>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script type="module" 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.

14 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 «Il nastro con un lato solo» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una carta bianco caldo un nastro sottile si disegna da solo: la carta compare lungo il nastro partendo da sinistra, fa un giro e scopre una faccia, ne fa un altro e scopre l’altra, mentre l’anello si gira di un quarto e si posa con un piccolo rimbalzo. Il nastro ha una mezza torsione: davanti sta in piedi, ai lati si piega, dietro è disteso. Il bordo è un filo d’inchiostro solo, che fa due giri prima di chiudersi, e lungo il bordo corrono le tacche di un metro da sarta. Poi le lettere di «INSIDE» atterrano una dopo l’altra: scendono di poco, prendono peso e si assestano. Il nastro comincia a correre piano verso sinistra; la parola gira dietro e torna davanti sull’altra faccia della carta, dove c’è «OUTSIDE» in vermiglio, che dietro si legge capovolta. Muovendo il puntatore sopra la pagina il nastro accelera nel verso della mano (anche all’indietro), le lettere diventano più pesanti con la velocità e l’anello si inclina; lasciato, la velocità torna al suo passo con una molla, lo supera appena e si ferma, e l’anello si raddrizza con un’ultima oscillazione. Il puntatore in alto o in basso fa vedere l’anello un po’ più dall’alto o un po’ più di fronte.

Come funziona

Un nastro che fa due giri

La linea in mezzo al nastro è un cerchio sul pavimento; di traverso il nastro ruota di mezzo giro mentre fa un giro intero: la direzione della larghezza è cos(u/2) verso l’alto più sin(u/2) verso l’esterno. Dopo un giro la stessa carta è capovolta e guarda dentro. La mesh percorre il nastro due volte (u da 0 a 4π): il primo giro è una faccia della carta, il secondo l’altra, ognuna disegnata solo dal suo lato (FrontSide). Così ogni punto è disegnato una volta per faccia, e la stessa formula dà anche le normali per la luce.

Le lettere su un canvas

Un canvas solo tiene le due parole: la prima nel canale rosso, la seconda nel verde, nello stesso tratto di carta. Il canvas copre solo il tratto dove sta la parola (una copia di mezzo giro), così ogni pixel è usato per le lettere; nel nastro la carta non è quadrata e le lettere si disegnano stringendo l’asse x del giusto fattore. Ogni lettera ha il suo stato (quanto si vede, quanto pesa, quanto sta sopra il suo posto) e si disegna da sola col suo peso del carattere variabile Archivo; le posizioni si misurano sulla parola intera, per tenere la crenatura.

Lo shader: la stampa che scorre

Nel frammento T = u − flusso dice quale punto della stampa sta lì: aumentando il flusso, la stampa scorre lungo il nastro senza toccare la geometria. Il giro (T modulo 4π) sceglie il canale e il colore: inchiostro sulla prima faccia, accento sull’altra. Il canvas si legge con textureGrad e le derivate di T, che non saltano dove una copia finisce e comincia l’altra. Le tacche e il filo del bordo sono disegnati nello shader con fwidth: restano di un pixel, e quando il nastro si mette di taglio il bordo diventa da solo una linea sottile.

La velocità con la molla

La velocità della mano (quante larghezze di pagina percorre il puntatore in un secondo, smussata e che si spegne da sola) si somma al passo del nastro; la velocità vera la insegue con una molla smorzata, integrata a passi di 1/240 di secondo. BOUNCE decide lo smorzamento: a 0 si ferma senza superare il passo, a 1 lo supera e torna. L’anello si inclina quanto la velocità è lontana dal suo passo, con una molla poco smorzata che lo fa oscillare quando si raddrizza; il peso delle lettere cresce con la stessa distanza, e il canvas si ridisegna solo quando il peso cambia di almeno 4.

L’apertura e la regia

Una timeline GSAP scopre la carta lungo due giri (un uniform che taglia il nastro dove u supera il valore), gira l’anello di un quarto con un back.out e lo ingrandisce dal 94% con un elastico leggero. Le lettere arrivano con tre tween sfalsati di 0,07 s: la comparsa, la discesa con un back.out e il peso da 200 a quello scelto. Poi il passo sale da zero con un power2.inOut. Il ciclo di ogni fotogramma sta nel ticker di GSAP, così il banco lo può rallentare e fermare.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`FRONT_WORD`	script.js	`'INSIDE'`	La parola sul diritto del nastro, in inchiostro.
`BACK_WORD`	script.js	`'OUTSIDE'`	La parola che torna davanti sull’altra faccia, nel colore d’accento.
`LAP`	script.js	`12`	Quanti secondi impiega una parola a fare un giro del nastro, da ferma.
`PUSH`	script.js	`1.6`	Quanto il puntatore, la rotella e il dito fanno correre il nastro: 0 niente.
`BOUNCE`	script.js	`0.4`	Quanto la velocità va oltre il suo passo quando lasci: 0 niente, 1 molto.
`WEIGHT`	script.js	`480`	Il peso delle lettere da ferme, da 200 a 800; correndo diventano più pesanti.
`BAND`	script.js	`0.44`	La larghezza del nastro, in parti del raggio dell’anello.
`TILT`	script.js	`24`	Quanto dall’alto si guarda l’anello, in gradi.

Provali nel Playground

Quando usarla

Per l’apertura di un portfolio, di uno studio o di un marchio che gioca su due parole opposte (dentro e fuori, prima e dopo, giorno e notte): il nastro le tiene insieme su un lato solo. Anche per una pagina di un evento o di una mostra con un titolo di una o due parole, o come oggetto da guardare a metà di una pagina lunga.

Sul telefono

Lo stesso anello, misurato perché stia in nove decimi della larghezza; un dito trascinato sopra fa correre il nastro come il puntatore, e lasciandolo si assesta. Il suggerimento in basso dice «Drag» invece di «Move».

Con il movimento ridotto

Niente gira e niente scorre: il nastro compare in dissolvenza già disegnato, con «INSIDE» davanti e «OUTSIDE» dietro. Ogni quattro secondi svanisce e ricompare mostrando davanti l’altra faccia.

Trappole

Un nastro di Möbius ha un lato solo: disegnato con un giro di mesh e DoubleSide, sul rovescio le lettere uscivano a specchio. La mesh fa due giri, uno per faccia, ognuno visibile solo dal suo lato: sul rovescio la scritta si legge dritta.
Le lettere disegnate su un canvas trasparente, caricate senza premoltiplicare, hanno ai bordi un colore pieno con un’alfa piccola: presa la maschera dal canale rosso, intorno a ogni lettera usciva un alone. Il canvas ha un fondo nero pieno e le due parole si sommano con 'lighter', una per canale.
Con fract() la coordinata della stampa salta dove una copia finisce e comincia l’altra: la GPU prende il mipmap più piccolo e lungo il nastro passa una riga grigia. Si legge con textureGrad e le derivate della coordinata continua.
Con una copia sola della parola per giro, metà del tempo il nastro restava bianco dietro e l’anello sembrava vuoto: con due copie c’è sempre una parola davanti e una dietro, e le due facce si alternano.
Il quarto di giro dell’apertura, messo sullo stesso numero che la molla del puntatore insegue, litigava con la molla e lasciava una spinta finale: è un numero a parte che si somma alla rotazione.

Librerie

Three.js 0.178.0, GSAP 3.15.0, Archivo (font variabile, assi wdth e wght) 5.3.0.

Compressi con gzip, i tre file della demo pesano 8,7 KB; le librerie: GSAP 28 KB, Three.js 174 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.