Quanto costa un sito web animato o 3D: i fattori

In breve

• Struttura prima del motion: pagine, template, lingue e CMS determinano la stima più del movimento.
• GSAP non cambia l'ordine di grandezza: entrate, scroll e transizioni restano nella stessa fascia. Three.js, uno shader custom o la WebAR sì.
• Shopify headless: aggiunge catalogo, carrello e stati vuoti; a parità di negozio costa più di un tema.
• Voci separate: design, modelli 3D, testi e manutenzione non rientrano nello sviluppo. A consegna il codice è del cliente.
• Tempi: settimane per un sito editoriale, mesi con shop, più lingue o 3D.

Quanto incidono pagine e template?

Conto i template, non le URL né gli scroll. Un template ripetuto vale uno; venti landing diverse valgono venti.

• Think Liquid — sito custom in GSAP e Lenis, storytelling allo scroll, pochi layout.
• Contraste Milano — Next.js, Prismic, GSAP e Lenis: atmosfera e prenotazione.
• Villa Brasini — Next.js e Prismic, con uno studio partner: protocolli, tecnologie, medici e notizie su pochi template.
• Frame by Frame — un sistema di pagine corporate simili, contenuti che cambiano.
• Victoria Music — Next.js e React Three Fiber: meno pagine, più scena. Una scena sola può pesare più di venti articoli.

Contano anche gli stati che il file non mostra: lista vuota, form in errore, 404, immagine mancante. Se il design non li ha, li metto in stima, in modo esplicito.

Quanto pesa una seconda lingua?

Una lingua in più significa altri campi, rotte, titoli e meta, e un layout che regge frasi più lunghe. Se un titolo va a capo, il motion legato alla sua altezza si sposta.

• Su pochi template editoriali, due lingue restano di solito nella stessa fascia.
• Su uno shop con CMS, allungano i mesi.
• Il salto vero arriva quando la lingua si somma a e-commerce o 3D.

Se le lingue non sono decise, la stima resta aperta. Aggiungerle dopo significa rivedere campi, immagini con testo, meta e transizioni. Servizio correlato: siti multilingua.

Un CMS a campi costa meno di un page builder libero?

Sì. Un CMS a campi ha una struttura nota — titolo, immagine con misure, sequenza con un numero di passi — e il motion si appoggia lì. Prismic è quello che uso più spesso con gli studi: Diesel Farm, NAYT, Cosmic Crisp, Contraste Milano, Josetta Saffirio, Tenuta Fratini, Frame by Frame. Si aggiorna il testo, il movimento resta.

WordPress entra quando l'editor del cliente è già quello: GreenWaves (Uncode con child theme), Colombo New Scal, Wolf VA e POLI.design, che aggiunge visualizzazioni D3.

Un page builder libero costa di più: o il motion si rompe al primo contenuto imprevisto, o serve un sistema difensivo che è un progetto a parte.

Bradiboo è il caso misto: Next.js, WordPress per i contenuti, Shopify per il catalogo. Due back-office sono una voce vera.

Quando Shopify headless cambia la fascia?

Shopify tiene prodotti, prezzi, carrello e checkout; Next.js tiene la pagina. Headless ha senso quando un tema non regge il design: racconto, motion, più lingue, un CMS accanto al catalogo.

• Diesel Farm — e-commerce e racconto della tenuta di Brave Wine Company, con uno studio partner. Shopify headless, Next.js, Prismic, GSAP. Awwwards Honorable Mention 2024.
• NAYT — piattaforma ufficiale dopo Sanremo 2026, con un designer di riferimento. Next.js, Shopify Storefront, Prismic, GSAP; Three.js trattato come scena a parte.
• Bradiboo — stesso schema su un catalogo più piccolo, con WordPress come CMS.

In headless vanno costruiti stati che un tema spesso dà già fatti: carrello vuoto, variante assente, collezione vuota, errore Storefront. Se un tema ben progettato è sufficiente, lo indico prima. Servizio correlato: Shopify headless.

Il motion in GSAP cambia l'ordine di grandezza?

No. Entrate, scroll e transizioni sono lavoro di timing e di rispetto per chi chiede meno movimento. Think Liquid, Contraste Milano, Josetta Saffirio, GreenWaves e Frame by Frame restano vicini a un sito con gli stessi template senza motion. Con il design chiuso, si sta in settimane. Servizio correlato: siti web animati.

Three.js è un altro lavoro: la scena va integrata, provata su più telefoni e deve poter restare ferma.

• OTRO — sito custom in Three.js e GSAP, con un designer di riferimento. Awwwards Honorable Mention 2024.
• Cosmic Crisp — Next.js, Prismic, React Three Fiber, Theatre.js e GSAP, con uno studio partner.
• Victoria Music — Next.js e React Three Fiber per un brand musicale.

Uno shader custom entra quando il look non si ottiene con una texture: scrittura della superficie, prove su GPU modeste, un fermo immagine di riserva.

La WebAR richiede un modello 3D, un flusso corto e dispositivi compatibili. Brionvega AR è Vite e model-viewer, con modelli di un artista 3D esterno; Queer Beer è una landing Vite con model-viewer. Senza modello pronto, la WebAR non entra in stima. Questi lavori — esperienze 3D e WebGL — si misurano in mesi.

Come la pagina resta leggibile accanto alla scena: siti animati e SEO.

Cosa resta fuori dal preventivo?

• Design: di solito c'è già uno studio di design, un art director o un designer freelance. Parto dal file.
• Modelli 3D: si commissionano prima dello sviluppo; su Brionvega AR sono di un artista 3D esterno.
• Testi: titoli, pagine, schede, microcopy. Senza testi veri il layout non si misura.
• Manutenzione: un accordo a parte. Il lancio consegna il sito.
• Account e licenze: hosting, Shopify, CMS, font, dominio: a nome del cliente.

Di chi è il codice, in diretto e in white label?

A consegna il codice è del committente — lo studio o il cliente finale, chi firma. Repository e accessi passano con il sito.

In white label il design resta dello studio, lo sviluppo è mio e il cliente finale parla con lo studio. Il mio nome compare solo se il contratto lo prevede; footer, Awwwards e portfolio si decidono prima. Posso firmare un NDA. Approfondimento: white label con agenzie.

Con un brand diretto il perimetro tecnico è lo stesso; cambia solo chi tiene la relazione.

Cosa serve per chiudere la stima, e in quanto tempo?

Servono tre cose: un design approvato (mobile compreso, motion descritto), i contenuti reali, un perimetro chiaro — template, lingue, shop sì/no, 3D sì/no.

Con questi elementi distinguo tre fasce:

1. Editoriale: una lingua, pochi template, CMS a campi, motion GSAP già disegnato. Settimane. Think Liquid, Contraste Milano, Josetta Saffirio.
2. Più superficie: molti template, seconda lingua, tema WordPress con GSAP, a volte un pezzo di dati come il D3 di POLI.design. Più tempo, stesso ordine. GreenWaves, Colombo New Scal, Wolf VA, Frame by Frame.
3. Shop headless, Three.js, shader o WebAR: mesi, un altro ordine di grandezza. Diesel Farm, NAYT, Bradiboo, OTRO, Cosmic Crisp, Victoria Music, Brionvega AR.

La stima è scritta, prima di iniziare: fascia, tempi, cosa è fuori. Se il tempo è poco, si toglie superficie. I tempi nel dettaglio: quanto tempo serve per un sito Next.js.

Per partire bastano tipo di lavoro, stato del design e una finestra di tempo: contatti.

Domande frequenti

Un sito in GSAP costa il doppio di uno fermo?

No. A parità di template e CMS, il motion misurato resta nello stesso ordine. Il salto arriva con Three.js, shader custom o WebAR.

Shopify headless costa sempre più di un tema?

Per lo stesso negozio, sì. Se il tema regge il design, propongo il tema.

Il design è incluso nello sviluppo?

No. Lo sviluppo parte dal file dello studio o del designer.

La manutenzione è inclusa nel lancio?

No, è un accordo separato. Il codice resta comunque del cliente.

La mia scelta

Stimo in base alla fascia, non all'etichetta. «Sito animato» può indicare Josetta Saffirio o OTRO, un tema come Colombo New Scal o uno shop come Diesel Farm. A partire da file, template, lingue, catalogo e scena, consegno una stima scritta con tempi e voci escluse.