Fonderia d'arte — concept di sito 3D
Sito concept in un giorno per una fonderia immaginaria, da mostrare a clienti di artigianato di pregio.
- Three.js
- GLSL
- GLTFLoader
- HTML
- CSS
- GitHub Pages
- 1 daydal brief al sito pubblicato
- 13sezioni di contenuto, dal manifesto ai contatti
- 0passaggi di build: un solo file HTML con librerie da CDN
Un cavallo di bronzo, in orbita con lo scroll
Tocca un blocco per vedere cosa fa.
- Infrastruttura
- Ingresso
- Logica
- Uscita
- Dati
Il cuore del sistema
Il bronzo nella sua scena 3D
Un solo file HTML e nessuna build: un cavallo di bronzo impennato attorno a cui la camera gira scorrendo, sopra uno shader di luce fusa, pubblicato direttamente da GitHub Pages.
Infrastruttura
GitHub Pages
Hosting statico direttamente dal branch del progetto: nessuna build, nessun server.
- GitHub Pages
Passa a Un solo HTML
Ingresso
Un solo HTML
Circa 1.000 righe: 13 sezioni, header in vetro smerigliato, una import map che prende Three.js da CDN. Nessun bundler.
- HTML
- CSS
- import map
Riceve da GitHub PagesPassa a Scroll smorzato, Reduced motion
Logica
Scroll smorzato
L'avanzamento dello scroll, smorzato a ogni frame, guida tutto: la barra di avanzamento, le slide che cambiano per intervalli di scroll, lo shader e la camera.
- JavaScript
Riceve da Un solo HTMLPassa a Shader di sfondo, Bronzo in orbita
Uscita
Shader di sfondo
Fragment shader a tutto schermo con UV deformate da uniform di tempo, scroll e mouse: la luce di bronzo fuso dietro al modello.
- GLSL
- ShaderMaterial
Riceve da Scroll smorzatoPassa a Il bronzo nella sua scena 3D
Uscita
Bronzo in orbita
GLTFLoader carica il cavallo; la camera gli gira attorno scorrendo e le scintille accelerano con la velocità dello scroll.
- Three.js
- GLTFLoader
Riceve da Scroll smorzato, Asset esterniPassa a Il bronzo nella sua scena 3D
Dati
Asset esterni
Il cavallo di bronzo glTF e le immagini arrivano da un host esterno, non dal repo: una dipendenza nota della demo.
- glTF
Passa a Bronzo in orbita
Uscita
Reduced motion
prefers-reduced-motion è rispettato due volte: il CSS ferma animazioni e scroll fluido, il JavaScript salta il movimento pesante.
- CSS
- JavaScript
Riceve da Un solo HTMLPassa a Il bronzo nella sua scena 3D
Il problema
Mi serviva un pezzo da mostrare nelle trattative con attività artigiane e di fascia alta: un sito di forte impatto visivo per una fonderia d'arte immaginaria. Non c'è un cliente reale dietro.
Cosa ho costruito
- Ho chiesto a Claude Code un sito completo e l'ho guidato in un passaggio di rifinitura: sei commit in un giorno.
- Ho tenuto tutto in un solo file HTML con import map da CDN: nessun bundler, nessuna build, pubblicato subito su GitHub Pages.
- Ho diretto un hero in Three.js: un cavallo di bronzo in glTF attorno a cui la camera gira scorrendo, sopra uno shader di sfondo che si deforma con scroll e mouse.
- Ho chiesto correzioni visive dopo ogni passaggio: via gli orbi decorativi sfumati, a capo dei titoli corretto, aree vuote riempite, un'immagine editoriale simmetrica.
La parte difficile
Il prezzo di consegnare in un giorno senza build. Il modello 3D e le immagini arrivano da un host esterno, quindi la demo dipende da quello, e i contatti sono ancora segnaposto. Li dichiaro come limiti noti invece di nasconderli.
Risultato
Online come demo concept statica con 13 sezioni, con reduced motion gestito sia in CSS sia in JavaScript. Non c'è un cliente reale dietro.
Il mio ruolo
Ho dato la direzione e il feedback a ogni passaggio; tutto il codice l'ha scritto Claude Code. È un esercizio di direzione visiva, non un lavoro per un cliente.