Il nastro perforato

Caricamento, Fisica, TransizioniCanvas, GSAPImpegnativaPeso compresso: Demo 17 KBGSAP 28 KBGratisScarica lo zip

La build di un’app fatta come una perforatrice di nastro d’epoca: la testina punzona nel nastro color crema i byte veri del pacchetto compilato, otto fori per colonna più il foro di trascinamento, il nastro esce fra due rulli, si piega e cade a terra in pieghe con una fisica vera, e i coriandoli dei fori piovono in un vassoio. Alla fine la taglierina stacca il nastro; se si inceppa si accartoccia a fisarmonica finché Retry non lo taglia via.

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, viewport-fit=cover">
  <title>The punched tape build</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the build panel of a web app's deploy tool, with the build shown as a vintage paper tape punch: the head
         punches the compiled bytes into the cream tape, eight bits a column with the feed hole, the punched tape comes
         out of the machine and falls in folds on the floor, and the chads rain into a tray. Done, the cutter snips the
         tape. The machine and the tape are drawn by script.js on the canvas; the words and the button are HTML -->
    <section class="build" aria-labelledby="build-title" data-build>
      <div class="build__head">
        <div class="build__words">
          <h2 class="build__title" id="build-title"><span class="build__swap" data-title>Production build</span></h2>
          <p class="build__meta"><span class="build__swap" data-meta>1,204 modules · last built 2 h ago</span></p>
        </div>
        <p class="build__figure" aria-hidden="true">
          <span class="build__pct" data-pct>v2.8</span>
          <svg class="build__tick" viewBox="0 0 24 24" data-tick><path d="M5.5 12.6l4.1 4.1L18.6 7.4" pathLength="1"/></svg>
        </p>
      </div>
      <div class="build__bay" role="progressbar" aria-labelledby="build-title" aria-valuemin="0" aria-valuemax="100"
           aria-valuenow="0" aria-valuetext="Not building" data-bay>
        <canvas class="build__paint" aria-hidden="true" data-paint></canvas>
        <canvas class="build__paint build__ghost" aria-hidden="true" data-ghost></canvas>
      </div>
      <div class="build__foot">
        <p class="build__file"><span class="build__swap" data-file>main · 3f9c2a1</span></p>
        <button class="pill" type="button" data-action data-autoclic><span class="pill__label" data-label>Build</span></button>
      </div>
      <p class="sr" role="status" aria-live="polite" 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.

32 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 perforato» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero, da solo al centro, un pannello scuro con gli angoli tondi: in alto Production build e 1,204 modules · last built 2 h ago, a destra v2.8; in mezzo una perforatrice di nastro vista di fronte e un po’ dall’alto, smaltata di grigio caldo, con il rotolo di nastro crema a sinistra, la testina, due rulli d’acciaio, la taglierina e sotto un vassoio; dai rulli sporge un pezzo di nastro di testa con i soli fori di trascinamento. Sotto, in carattere monospaziato, main · 3f9c2a1 e il pulsante crema Build. Premuto, la testina comincia a battere (si abbassa di un pelo a ogni colonna) e il nastro esce perforato: i fori sono i byte veri del file compilato, a colonne di otto bit con la parità. Il nastro sporge rigido, si curva, cade fino a terra e lì si piega e si ammucchia in strati che si appoggiano uno sull’altro, con la luce che cambia a ogni piega e l’ombra sul pavimento; i coriandoli dei fori cadono svolazzando nel vassoio e fanno un mucchietto. Il rotolo si assottiglia e il suo mozzo gira. La percentuale sale, la riga dice quanti moduli sono compilati e in basso passano i nomi dei file; il pulsante diventa Cancel, chiaro e col bordo. Alla fine la taglierina scende e taglia, l’ultimo tratto cade sul mucchio, al posto della percentuale si disegna una spunta verde e il titolo dice Build succeeded con i secondi e i kilobyte; Build again porta via il mucchio e i coriandoli, cambia il rotolo e riparte. Una volta su due, nella demo, a metà il nastro si inceppa all’uscita e si accartoccia a fisarmonica sotto i rulli: Build failed in rosso, il file con l’errore in basso, il pulsante Retry. Retry fa scendere la taglierina, il tratto accartocciato cade tenendo le sue pieghe e la perforatrice riprende dallo stesso modulo.

Come funziona

Una catena verlet vista di lato

Il nastro uscito dalla macchina è una fila di punti, uno ogni 4 unità di nastro, mossi con l’integrazione di Verlet (la velocità è la differenza fra la posizione di adesso e quella di prima) a tre sottopassi per fotogramma, col passo limitato a 1/30 di secondo. Sei giri di vincoli tengono la lunghezza dei tratti e tirano ogni punto verso la retta dei suoi vicini: è la rigidità della carta, che fa sporgere il nastro prima di piegarlo. Il pavimento ha l’attrito, e i punti più lontani di tre posti si respingono sotto le 3,3 unità, così gli strati del mucchio si appoggiano invece di passarsi attraverso.

I rulli spingono il nastro

Gli ultimi punti, quelli ancora fra i rulli, non sono liberi: stanno sulla linea d’uscita, alla distanza da cui sono già usciti. Il nastro cresce aggiungendo un punto ogni 4 unità, e un punto liberato si porta dietro la velocità dei rulli perché la sua posizione di prima è quella del fotogramma prima. La perforatrice va a tutta velocità finché il compilatore ha moduli pronti e aspetta quando non ne ha, a scatti come una vera.

Una striscia in proiezione obliqua

La larghezza del nastro va dentro la pagina: ogni tratto della catena diventa un quadrilatero, il suo bordo più quello stesso bordo spostato di mezza larghezza a destra e di quattro decimi in su. La faccia che si vede prende luce secondo l’angolo del tratto (sdraiato a terra è chiaro, appeso è più scuro), il bordo vicino è un filo più scuro, e i tratti si dipingono dal più lontano al più vicino ordinandoli per x ÷ 0,5 − y ÷ 0,4, così gli strati più alti del mucchio coprono quelli sotto. Sul pavimento cade la loro ombra, spostata a destra quanto più il tratto è alto.

I fori sono i byte

Il testo del pacchetto compilato si trasforma in byte ASCII a sette bit con la parità pari sull’ottavo: ogni colonna, un decimo di pollice come nel nastro vero, ha i fori dei bit a uno su otto piste e il foro piccolo di trascinamento fra la terza e la quarta. Una colonna si segna quando passa sotto i punzoni, e ogni foro si disegna nel punto del nastro dove sta, interpolato lungo il suo tratto e girato col tratto: segue ogni piega. I coriandoli cadono svolazzando e, toccato il mucchio, rotolano giù come sabbia finché il pendio è dolce; poi si dipingono una volta sola nel canvas del vassoio.

Inceppamento, taglio e fine

Quando si inceppa la testina si ferma ma i rulli spingono ancora 60 unità: i punti nuovi vengono tirati verso una fisarmonica sotto l’uscita, e al taglio ogni punto accartocciato si ricorda la distanza fra i suoi vicini, così il pezzo cade tenendo le pieghe. La taglierina, una timeline GSAP con power3.in e un ritorno elastico, rompe il legame fra due punti: il nastro oltre la lama diventa un pezzo a sé e cade, e ne comincia uno nuovo fra i rulli.

Per chi non vede e per chi non vuole movimento

La macchina è un role=progressbar con aria-valuenow e aria-valuetext in moduli, il pannello ha aria-busy mentre lavora e una riga aria-live dice quando la build parte, fallisce e finisce. Il pulsante cambia parola (Build, Cancel, Retry, Build again) e la pillola prende la larghezza nuova con un rimbalzo; un clic da script, quello dell’anteprima, non annulla mai. Con il movimento ridotto la fisica gira lo stesso, ma il canvas si aggiorna ogni mezzo secondo in dissolvenza da un fermo immagine all’altro, e i coriandoli vanno direttamente nel vassoio.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SECONDS`	script.js	`6.5`	Quanto dura una build nella demo, in secondi (una vera segue i suoi moduli).
`MODULES`	script.js	`1204`	I moduli da compilare.
`FAIL_EVERY`	script.js	`2`	Nella demo, una build su quante si inceppa (0 mai).
`FAIL_AT`	script.js	`0.56`	Fin dove arriva la build che si inceppa, da 0 a 1.
`TAPE`	script.js	`100`	Quanto nastro esce al secondo dalla perforatrice, in pixel.
`STIFFNESS`	script.js	`0.5`	Quanto è rigida la carta: 0 molle come stoffa, 1 rigida come cartoncino.
`GRAVITY`	script.js	`1500`	Quanto forte cade il nastro, in pixel al secondo quadrato.
`CHADS`	script.js	`0.4`	Quanti coriandoli dei fori si vedono cadere: 0 nessuno, 1 tutti.
`PAYLOAD`	script.js	`'import{h as e,render as t}from"./vendor-9c1e.js";const n=[{path:"/",load:()=>import("./home-3a7f.js")},{path:"/checkout",load:()=>import("./checkout-b21d.js")}];t(e(App,{routes:n}),document.getElementById("app"));'`	I byte perforati nel nastro, un carattere per colonna.

Provali nel Playground

Quando usarla

Per un’attesa di qualche secondo con un esito: una build, una compilazione, un’esportazione di dati, una stampa, un backup in un’app per sviluppatori o con un gusto d’epoca. Il nastro che si accumula dice bene «quanto lavoro è stato fatto»; per un caricamento di mezzo secondo è troppo.

Sul telefono

Il pannello prende la larghezza dello schermo meno 32 pixel (358 a 390) e il disegno si rimpicciolisce con lui tenendo le proporzioni; il canvas dipinge alla densità vera dello schermo, fino a due volte. Il pulsante col dito si schiaccia e rimbalza; la scritta si allarga sull’asse della larghezza solo sotto il mouse.

Con il movimento ridotto

Niente nastro che scorre né coriandoli che cadono: la fisica gira lo stesso, ma il canvas cambia ogni mezzo secondo con una dissolvenza da un fermo immagine all’altro, la testina non batte, i coriandoli vanno subito nel vassoio e la taglierina taglia senza scendere. Le parole nuove e la spunta arrivano in dissolvenza.

Trappole

I coriandoli facevano una torre: ognuno alzava il mucchio nel punto dove cadeva, e cadevano tutti negli stessi tre centimetri. Ora rotolano giù come sabbia verso il lato più basso finché il pendio non è dolce, e alzano il mucchio di poco.
L’inceppamento non si vedeva: i punti nuovi, chiusi in una scatola sotto i rulli, si piegavano davanti al nastro appeso e sembravano lo stesso nastro. Ora vengono tirati verso una fisarmonica con le pieghe inclinate, che girano la faccia verso la luce e via, una sì e una no.
Dopo Retry usciva un lungo tratto bianco: durante l’inceppamento la testina smetteva di perforare mentre i rulli spingevano ancora il nastro sotto i punzoni. Ora perfora finché il nastro si muove.
Con la carta troppo molle il nastro cadeva subito accanto alla macchina e si ammucchiava in un angolo, lasciando vuota metà del pavimento: una rigidità più alta lo fa sporgere e lo stende in pieghe larghe.
Disegnata come un’ellisse piena, la pozza di luce sul pavimento aveva un bordo visibile; ora è un gradiente radiale schiacciato, che sfuma fino a zero.

Librerie

GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0, JetBrains Mono (font variabile) 5.3.0.

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

Collaudo

Provata il 8 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.