La tabella con la botola
Tabelle, Fisica, SVG, Transizioni, 3D
NuovaGratis
Tutti i componenti
La stampante 3D del caricamento
L’esportazione di un modello fatta come una piccola stampante 3D vista di fronte: premuto Export model, il piano sale fino all’ugello e la stampante costruisce un vaso ritorto strato dopo strato. L’ugello gira lungo lo strato, la plastica appena posata è arancio e si raffredda in rosso, viola e poi nel blu del filamento, il piano scende di uno strato a ogni giro e la bobina gira. Il vaso è l’avanzamento; alla fine la testa si parcheggia, il piano scende verso di te e un riflesso attraversa il vaso.
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, viewport-fit=cover">
<title>The 3D printer loader</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the 3D printer loader: the export of a model from a 3D modelling app, shown as a small printer seen from the
front and a little from above. Pressed, the plate comes up to the nozzle, a purge line is laid along its
front edge and a twisted vase is printed layer after layer: the nozzle runs round the current layer, the
fresh plastic glows orange behind it and cools into the colour of the filament, the plate goes down a layer
at every lap and the spool turns a little. The vase is the progress. The printer is drawn by script.js -->
<section class="printer" aria-label="Model export" data-printer>
<!-- four layers: the frame's back and the plate; the vase; the gantry and the print head; the frame's front,
the spool and the tube -->
<div class="printer__scene" role="progressbar" aria-label="Model export" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0" aria-valuetext="Ready to export" data-scene>
<svg class="printer__art" viewBox="0 6 300 256" aria-hidden="true" data-art="back"></svg>
<canvas class="printer__art" aria-hidden="true" data-paint></canvas>
<svg class="printer__art" viewBox="0 6 300 256" aria-hidden="true" data-art="head"></svg>
<svg class="printer__art" viewBox="0 6 300 256" aria-hidden="true" data-art="front"></svg>
</div>
<p class="printer__status" aria-hidden="true">
<svg class="printer__icon" viewBox="0 0 24 24" data-icon><path d="M5.5 12.6l4.2 4.2 8.8-9.4" pathLength="1"/></svg>
<span class="printer__swap" data-status>Ready to export</span>
<span class="printer__pct" data-pct></span>
<span class="printer__left" data-left></span>
</p>
<div class="printer__buttons">
<button class="pill is-quiet" type="button" hidden data-again><span class="pill__label">Export again</span></button>
<button class="pill" type="button" data-go data-autoclic><span class="pill__label" data-label>Export model</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.
47 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 stampante 3D del caricamento» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, da sola al centro, una piccola stampante 3D vista di fronte e un poco dall’alto: un telaio di profilati d’alluminio nero su una base con le prese d’aria e una manopola, due viti a ricircolo dietro, in alto il portale con la trave e il carrello, e sul carrello la testa di stampa: il motore dell’estrusore con la sua ruota dentata, la carenatura chiara con la ventolina, i due convogliatori d’aria, il blocco riscaldante nella sua calza di silicone e l’ugello d’ottone. In basso c’è il piano di stampa, una lastra dorata e granulosa; accanto, su un supporto, la bobina di filamento blu, unita alla testa da un tubo di PTFE in cui si vede il filo. Sotto, la riga Ready to export e il pulsante Export model. Puntando il pulsante la testa si sporge dal suo angolo e la ventola comincia a girare. Premuto, il piano sale fino all’ugello mentre la testa va davanti a sinistra, l’ugello posa una linea di spurgo lungo il bordo del piano e poi comincia il vaso: prima il fondo pieno, con l’ugello che va avanti e indietro a zig zag, poi la parete, un giro per strato. Il filo appena posato è quasi bianco sotto l’ugello, poi arancio, e si raffredda in rosso, viola e infine nel blu del filamento, con un alone caldo lungo i giri appena fatti; a ogni giro, dietro al vaso, il piano scende di uno strato, e prima di ogni viaggio (dalla linea di spurgo al vaso, fra i due strati del fondo) la testa ritrae il filo, che nel tubo si vede tornare indietro. Il vaso cresce sul piano in strati sottili, con le coste che girano salendo e le righe degli strati come una trama fine; la riga dice Exporting model 54% · about 3 s left, la bobina gira e dal secondo strato la ventolina va al massimo. Alla fine la testa ritrae e torna nel suo angolo, il piano scende verso di te, la ventola rallenta, un riflesso attraversa il vaso in diagonale e la riga diventa Model ready con una spunta verde, accanto a Download .stl ed Export again. Cancel ferma la stampante dov’è: la testa si parcheggia, il pezzo incompiuto resta sul piano e si raffredda, e compare Canceled at 41% con Try again. Try again ed Export again sollevano il pezzo dal piano, che sparisce, e la stampa ricomincia.
Come funziona
Una vista parallela, un poco dall’alto
Ogni punto della stampante ha tre coordinate (x a destra, y verso di te, z in su) e finisce nel disegno in x, −z·cos e + y·sin e, con sin e = 0,24: si guarda la stampante dall’alto di 14 gradi, senza prospettiva. Così il piano è un rettangolo schiacciato, la cima del telaio una cornice e il giro dell’ugello un’ellisse. Telaio, piano, testa e bobina sono SVG disegnati una volta sola; a ogni fotogramma si spostano il piano, la trave e la testa, gira la ventola (che a velocità diventa un disco sfocato), gira la ruota dell’estrusore, il tubo si ridisegna come una curva di Bézier fino alla testa e il filo dentro scorre con un tratteggio.
Il profilo e le coste ritorte
Il profilo del vaso è una curva liscia (Hermite cubica) che passa per i punti di PROFILE e dà il raggio R a ogni altezza. Il contorno a ogni altezza è r(θ) = R·(1 + d·cos(n·(θ − φ))), con n coste profonde d, e φ che cresce con l’altezza fino a TWIST: le coste girano salendo. Ogni strato è una fascia dal contorno del suo fondo a quello della sua cima, quindi il fianco del vaso scorre senza gradini e gli strati, alti 2,5 unità (meno di 3 pixel), restano solo una trama fine. I due strati del fondo sono pieni: righe a 45 gradi, poi nell’altro verso, tagliate sul contorno con l’intersezione fra una retta e un poligono di 96 lati.
Il percorso dell’ugello, mossa per mossa
Il percorso è un elenco di mosse vere: il piano che sale, l’innesco, la linea di spurgo e poi, prima di ogni viaggio, la ritrazione, il piano che scende un poco di più (il salto), il viaggio, il ritorno giù e il filo che torna; nel fondo lo zig zag, e il primo strato va a metà velocità perché si attacchi al piano. Ogni giro comincia dietro, dove la torsione l’ha portato, e lì il piano scende di uno strato mentre la testa scivola di pochi gradi: niente viaggi fra un giro e l’altro. Le mosse fisse tengono il loro tempo, quelle che stampano si dividono il resto di SECONDS secondo la lunghezza. Da lì escono la posizione della testa e del piano a ogni istante, la percentuale (il tempo fatto sul tempo del percorso) e il tempo che manca.
Ogni strato, spicchio per spicchio
Ogni giro è diviso in 120 spicchi. Per ognuno la normale della superficie viene dal raggio, dalla sua derivata lungo il giro (le coste) e dalla pendenza del profilo; la luce è diffusa (Lambert), più scura verso i bordi, con un riflesso stretto e verticale che segue le coste. La luce avvolge un poco le coste, così il loro lato in ombra è morbido. Si dipinge in due passate: prima il fondo e l’interno della parete di dietro, che si vede dall’apertura, poi le pareti davanti dal basso in alto e l’orlo in cima. Sopra ogni cordone un filo di luce, più forte dal lato della luce, sotto un’ombra leggera e la piega sottile dove si posa sullo strato sotto: sono le righe in rilievo.
Il calore che si raffredda
Ogni spicchio conosce l’istante in cui l’ugello l’ha posato, quindi il suo calore è T = e^(−età ÷ COOL). Il colore segue una scala da termocamera: quasi bianco, arancio, rosso, viola e il colore del filamento; più è caldo e meno è ombreggiato, perché brilla da sé. Lungo la parte calda degli ultimi due strati si aggiunge (lighter) un alone arancio. Quando si annulla, il percorso si ferma ma l’orologio no, e il pezzo lasciato sul piano si raffredda lo stesso.
Solo quando serve, e chi non vede
Uno strato finito e freddo si aggiunge una volta sola a due immagini a parte (le due passate); il piano si muove a passi di pixel interi del canvas, così le immagini lo seguono senza sfocarsi, e a ogni fotogramma si dipingono solo gli strati ancora caldi. Quando niente si muove e niente è caldo, il ciclo non disegna. Il disegno è un role=progressbar con aria-valuenow e aria-valuetext («54 percent, about 6 seconds left») al massimo ogni 0,6 secondi, aria-busy mentre stampa e una riga aria-live per l’inizio, l’annullamento, la fine e lo scaricamento. I clic da script (quelli dell’anteprima della libreria) non annullano e non scaricano mai: a stampa finita, dopo 2,5 secondi, ricominciano.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SECONDS | script.js | 7 | Quanto dura la stampa della demo, in secondi, dalla salita del piano all’ultimo giro (una vera esportazione segue il lavoro dell’app). |
LAYERS | script.js | 36 | Gli strati del vaso, compresi i due pieni del fondo: più strati, righe più fini e più giri dell’ugello, che va più in fretta. |
PROFILE | script.js | [[0, 19], [0.14, 24], [0.4, 32], …] | Il profilo del vaso: per ogni punto a che altezza (da 0, il piede, a 1, l’orlo) e il raggio in unità del disegno (il piano è largo 148). |
RIBS | script.js | 8 | Le coste del vaso; 0 lo fa liscio. |
RIB_DEPTH | script.js | 0.04 | Quanto sporgono le coste, rispetto al raggio. |
TWIST | script.js | 80 | Di quanti gradi girano le coste dal piede all’orlo; con un numero negativo girano dall’altra parte. |
COOL | script.js | 0.35 | In quanti secondi la plastica appena posata perde quasi due terzi del suo calore: più è alto, più strati restano accesi sotto l’ugello. |
LABELS | script.js | { busy: 'Cancel', done: 'Download .stl', saved: 'Downloaded', retry: 'Try again' } | Le scritte del pulsante mentre stampa, alla fine, dopo lo scaricamento e dopo l’annullamento; quella a riposo, Export model, si cambia in index.html. |
WORDS | script.js | { warm: 'Warming up', busy: 'Exporting model', done: 'Model ready', canceled: 'Canceled at' } | La riga sotto la stampante mentre si scalda, mentre stampa (seguita dalla percentuale e dal tempo che manca), alla fine e dopo l’annullamento (seguita dalla percentuale); quella a riposo, Ready to export, si cambia in index.html. |
Quando usarla
Per un’attesa di qualche secondo che finisce con un oggetto in mano: esportare un modello da un’app di modellazione 3D o di CAD, generare una mesh o un oggetto con un’intelligenza artificiale, preparare un file STL o 3MF, il lavoro di uno slicer. Va bene in un prodotto per maker, designer di prodotto o studi di stampa 3D, dove la stampante dice subito di che cosa si parla e il vaso dice a che punto si è anche senza leggere il numero. Per un’attesa brevissima o che non produce niente da tenere è troppo.
Sul telefono
Il disegno è largo 330 pixel e sul telefono ci sta intero (a 390 restano 16 pixel per lato); è vettoriale, quindi resta nitido a ogni densità, e il canvas del vaso dipinge alla densità vera dello schermo, fino a due volte. La riga di stato resta su una riga. I pulsanti sono pillole alte 44: col dito si schiacciano e rimbalzano; la pillola che si gonfia, la scritta che si allarga e la testa che si sporge al passaggio ci sono solo col mouse (la testa anche con la tastiera).
Con il movimento ridotto
La testa resta nel suo angolo e il piano fermo nella sua posizione di fine stampa; la ventola, la ruota dell’estrusore e la bobina non girano, niente alone e niente riflesso finale. Il vaso cresce lo stesso, perché è lui a dire a che punto si è: arriva in sei gradini, ognuno in dissolvenza sul precedente e sempre con un giro intero in cima, già nel colore del filamento. La percentuale e il tempo che manca si aggiornano, le parole cambiano con una dissolvenza e la spunta compare senza disegnarsi.
Trappole
- Con 72 spicchi per giro e un riflesso molto stretto le coste ritorte venivano a scacchi, come un vaso fatto di pixel: ora gli spicchi sono 120, il riflesso è più largo e più tenue e le coste sporgono un poco meno.
- Con 22 strati alti 4 unità, ognuno col suo raggio, il vaso finito sembrava una pila di piatti e il contorno era una scala; dove uno strato rientrava si vedeva perfino il bianco fra i due: ora gli strati sono 36, alti 2,5 unità, e ogni fascia va dal contorno del suo fondo a quello della sua cima, così il fianco scorre liscio e le righe restano una trama fine.
- Le coste avevano macchie scure irregolari che sembravano buchi: ora sporgono un poco meno e la luce le avvolge (il prodotto con la luce è spostato di 0,3 prima di tagliarlo a zero), così il lato in ombra è morbido.
- Con una cucitura sparsa all’angolo d’oro la testa saltava da una parte all’altra del vaso a ogni strato, con ritrazione e salto: con 36 strati in 7 secondi era una frenesia e i tempi fissi si mangiavano metà della stampa. Ora ogni giro comincia dove la torsione ha portato il precedente, il piano scende lì di uno strato, e ritrazione e viaggio restano dove servono: dalla linea di spurgo al vaso, fra i due strati del fondo e alla fine.
- Con gli strati sottili quasi tutto il vaso restava caldo e si ridipingeva intero a ogni fotogramma: ora uno strato freddo si aggiunge una volta sola alle due immagini a parte, e il piano si muove a passi di pixel interi del canvas perché le immagini, spostate con lui, non si sfochino.
- Il filo di luce lungo ogni cordone era uguale tutto intorno e sul lato in ombra sembrava una fessura: ora è un gradiente, forte dal lato della luce e quasi niente dall’altro.
- Il colore di passaggio fra l’arancio e il blu era un rosa acceso e il vaso sembrava di gomma da masticare: ora è un rosso, e fra il rosso e il blu esce da solo un viola, come in una termocamera.
- La linea di spurgo, lunga e spessa sul bordo del piano, una volta fredda sembrava una barra di avanzamento: ora è corta e bassa.
- Il riflesso finale era largo e poco inclinato e nessuno lo notava; stretto e forte sembrava una macchia bianca: ora è una banda inclinata e morbida che attraversa il vaso in un secondo.
- In movimento ridotto un gradino poteva cadere a metà di un giro e sull’orlo restava una tacca: ora ogni gradino finisce con l’ultimo giro intero.
- Fra la percentuale e il tempo che manca c’era un buco, perché il numero aveva una larghezza minima: ora le cifre sono tabellari e basta quello.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 23 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 7 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.
