# Come creare un sito web animato con Claude Code in una sera
> Regole contro il design da template, indicazioni visive, GSAP, accessibilità e test delle prestazioni per un sito web animato realizzato con Claude Code.
Source: https://ailoot.ai/blog/it/animated-website-claude-code/
Canonical: https://ailoot.ai/blog/it/animated-website-claude-code/
Language: it
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-007
Revision: sha256-822540978d6ccff3b60f8ac06dc8b7b0c6c5e8918004187abc84f98a13aa7045
Punti chiave
Claude Code può realizzare un sito web animato in una sera, ma il risultato sembra generico perché, senza vincoli espliciti, il modello tende verso la media dei dati di addestramento. Tre accorgimenti risolvono il problema: regole anti-template in `CLAUDE.md`, un orientamento visivo già definito al posto di un prompt vago e la documentazione aggiornata della libreria di animazione direttamente nel contesto. La trappola principale è esagerare con il movimento: troppe animazioni rivelano la generazione più della loro assenza e peggiorano la velocità nella parte visibile iniziale della pagina.
Scopri di più su come lavorare con i modelli nella [documentazione di Ailoot](https://ailoot.ai/docs/).
## Perché un sito creato dall’IA si riconosce dal primo schermo?
Punti chiave
Un modello senza limiti definiti fa la media di tutto ciò che ha visto nei dati di addestramento. Un tempo ne risultavano pulsanti viola e il font Inter; ora la tendenza è cambiata: sfondo color crema, caratteri serif e accento terracotta. Anthropic ha descritto tre look standard di questo tipo nella documentazione della propria skill, definendoli esplicitamente comportamenti predefiniti.
Chiedi a un agente di preparare una landing page. Quaranta minuti dopo hai un sito funzionante: le sezioni sono al loro posto, il layout è responsive e i pulsanti funzionano. E quasi subito hai la sensazione di averlo già visto da qualche parte.
La ragione è meccanica. Il modello è stato addestrato su un’enorme raccolta di pagine finite, e quella raccolta aveva un forte sbilanciamento.
Migliaia di tutorial e template iniziali hanno copiato quel colore, distorcendo il campione, e il modello ha imparato che i pulsanti sono viola. Lo stesso meccanismo si applica ai font, agli angoli arrotondati e alle ombre.
Nel frattempo, il «look IA» è cambiato. Nella documentazione della skill `frontend-design`, Anthropic descrive oggi look diversi.
Il design generato dall’IA ora tende a raggrupparsi intorno a tre look: uno sfondo color crema caldo (circa #F4F1EA) con un titolo serif a contrasto e un accento terracotta; uno sfondo quasi nero con un singolo accento luminoso verde acido o vermiglio; e un layout da quotidiano a grande formato, con filetti sottilissimi, angoli senza arrotondamento e colonne fitte da giornale. Tutti e tre si adattano ad alcune attività, ma sono comportamenti predefiniti, non scelte deliberate, e compaiono indipendentemente dal tema.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Il problema di fondo: lo slop nasce quando non c’è nulla di specifico da copiare e il modello si limita a fare la media di tutti gli stili web.
Qui «slop» indica un lavoro generato automaticamente, mediato fino a ottenere un risultato generico e privo di uno stile distintivo.
La conclusione pratica è che l’agente ha bisogno di una grammatica visiva ristretta, non di un compito aperto. Se dici «rendilo bello», farà la media. Se gli dai una palette specifica, un paio di font e un elemento visivo caratterizzante, costruirà a partire da quelli.
Il movimento è il segnale più evidente in questo quadro. Anche una pagina statica con una tipografia perfetta sembra comunque un template, perché i siti web vivi respirano: gli elementi appaiono mentre scorri, il cursore cambia le cose e le transizioni tra schermate non si interrompono bruscamente.
## Cosa serve per creare un sito web animato con Claude Code?
Punti chiave
L’intero kit di strumenti è gratuito. Servono Claude Code, la libreria di animazione GSAP (dalla fine di aprile 2025 è completamente gratuita, inclusi plugin prima a pagamento come SplitText e MorphSVG), la skill `frontend-design` di Anthropic e un servizio gratuito di hosting per la pubblicazione. Paghi soltanto il lavoro dell’agente.
Esaminiamo gli strumenti uno per uno, perché sui prezzi c’è molta confusione.
**GSAP** è la libreria di animazione usata da una quota considerevole di siti web premiati. Webflow l’ha acquistata nell’ottobre 2024 e quasi subito sono circolate voci secondo cui tutto sarebbe diventato gratuito. Non è del tutto corretto: all’epoca Webflow aveva confermato che i prezzi esistenti sarebbero rimasti invariati. La libreria è diventata gratuita **alla fine di aprile 2025**, con la versione 3.13.
GSAP ora è completamente gratuita per tutti gli utenti, grazie al supporto di Webflow.
— GSAP, https://gsap.com/pricing
La versione 3.13 specifica che anche i plugin prima a pagamento, come SplitText e MorphSVG, sono diventati gratuiti, anche per uso commerciale. La versione attuale a luglio 2026 è `gsap@3.15.0`.
Gratuito non significa però open source. La licenza resta proprietaria e vieta di creare con GSAP un editor visivo di animazioni in concorrenza con Webflow. Non ci sono restrizioni sui siti web, sui progetti per clienti o sul lavoro commerciale.
**La skill `frontend-design` di Anthropic** è un insieme di istruzioni che modifica il modo in cui l’agente lavora su un’interfaccia. La descrizione nel repository dice:
Indicazioni per ottenere un design visivo distintivo e ponderato quando si crea una nuova interfaccia o si rielabora quella esistente. Aiuta a definire l’orientamento estetico, la tipografia e a scegliere soluzioni di design che non sembrino il template predefinito.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
All’interno c’è un metodo in due passaggi. Per prima cosa, l’agente mette insieme un sistema di token: da quattro a sei colori con nome, font per almeno due ruoli, uno schema di layout in forma di schizzi testuali e un elemento visivo caratterizzante per la pagina. Poi valuta criticamente il proprio piano rispetto al compito. Solo dopo scrive il codice.
Il post indica 75 skill, la descrizione del repository ne elenca 78 e oggi nell’albero dei file ce ne sono 91. L’autore è chiaro al riguardo: controlla il repository con un comando di ricerca, perché la descrizione non è aggiornata.
## Come si fa a impedire a Claude Code di produrre template?
Punti chiave
Due passaggi. Per prima cosa, inserisci in `CLAUDE.md` un insieme di divieti: non usare la palette standard, non usare lo stesso font per titoli e corpo e non animare nulla oltre a opacity e transform. Poi installa la skill `frontend-design`, che fa comporre all’agente un sistema di token e valutare criticamente il proprio piano prima di scrivere il codice.
Cominciamo dal file delle regole: entra in vigore a ogni richiesta e non costa nulla.
Un utile punto di partenza è un blocco di garanzie anti-template. La logica è semplice: elencare le scelte specifiche verso cui il modello tende per impostazione predefinita e vietarle esplicitamente.
```markdown
## Garanzie anti-generiche
- Colori: non usare mai la palette predefinita di Tailwind (indigo-500, blue-600).
Scegli un colore di brand personalizzato e ricava gli altri da quello.
- Ombre: non usare mai la shadow-md piatta. Usa ombre a livelli, colorate e con bassa opacità.
- Tipografia: non usare mai lo stesso font per titoli e corpo del testo. Abbina un font display/serif
a un sans pulito. Applica un tracking stretto (-0.03em) ai titoli grandi,
un'interlinea generosa (1.7) al corpo.
- Gradienti: sovrapponi più gradienti radiali. Aggiungi grana/trama con un filtro SVG di rumore per dare profondità.
- Animazioni: anima solo transform e opacity. Non usare mai transition-all.
Usa un'easing in stile molla.
- Stati interattivi: ogni elemento cliccabile deve avere stati hover, focus-visible
e active. Nessuna eccezione.
- Spaziatura: usa token di spaziatura intenzionali e coerenti, non valori Tailwind casuali.
- Profondità: le superfici devono avere un sistema di livelli (base -> elevato -> fluttuante).
```
Il blocco è scritto intenzionalmente in inglese: il modello segue le istruzioni tecniche brevi con maggiore precisione nella lingua della documentazione.
La riga sulle animazioni compare nell’elenco dei divieti insieme a colori e ombre per un motivo. L’opacità sul primo schermo danneggia direttamente la metrica di velocità, come vedremo più avanti.
Poi c’è la skill. Le skill ufficiali di Anthropic si possono installare tramite il plugin:
```bash
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
```
Un dettaglio: le skill di design non si possono installare singolarmente; il plugin `example-skills` le installa tutte e dodici insieme. Se ne vuoi una sola, copia manualmente la cartella: Claude Code la rileverà senza riavviare la sessione:
```bash
git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/
```
Altre skill della raccolta che potrebbero essere utili: `theme-factory`, con dieci temi già pronti e la conferma obbligatoria di una persona prima di applicarli; `web-artifacts-builder`, per creare progetti in React con componenti già pronti; e `algorithmic-art`, per la grafica generativa. Un articolo separato spiega in dettaglio come scegliere le skill per un’attività: [come scegliere le skill per Claude Code](https://ailoot.ai/blog/it/choose-claude-code-skills/).
Le regole e la skill lavorano insieme: le regole vietano le scelte sbagliate e la skill impone un processo: prima il sistema, poi la revisione critica, infine il codice.
Tutto ciò che conta avviene prima della richiesta. Inserisci in anticipo nel contesto i vincoli in base ai quali l’agente costruirà, e la formulazione del prompt in sé perde quasi ogni importanza. Questo approccio si chiama ingegneria del contesto, e il file `CLAUDE.md` ne è il primo elemento costitutivo. La combinazione **clone IA + Second Brain + ingegneria del contesto** aiuta a trasformare Claude da generatore di risultati mediocri in uno strumento capace di attenersi al tuo stile.
## Dove si trovano orientamenti visivi e prompt di animazione già pronti?
Le tecniche di movimento incluse sono: `animation-on-scroll`, `gsap`, `gsap-scrolltrigger-storytelling`, `cinematic-gsap-lenis-motion-system`, `cinematic-scroll-storytelling`, `marquee-loop`, `masked-reveal`, `staggered-word-reveal`, `reveal-hover-effect`, `scroll-progress-timeline`, `scroll-scrubbed-visual-sequence`, `scroll-scrubbed-word-reveal`, `scroll-world-storytelling`.
Se non sei un programmatore, per te sono più importanti gli orientamenti visivi già pronti. Invece del vago «rendilo moderno», scegline uno e fornisci al modello la grammatica ristretta che gli mancava:
- `clean-minimal-beige-light-mode` - minimalismo beige chiaro
- `dark-glass-clean-layout` - vetro scuro
- `documentary-brutalist-agency` - stile documentaristico brutalista
- `editorial-portfolio-chapters` - portfolio diviso in capitoli, come una rivista
- `orange-clean-paper-saas` - sito per un servizio in stile carta con accento arancione
- `solar-duotone-bold` - trattamento audace a due colori
- `tech-green-dark-mode-modern` - stile tecnologico scuro con verde
- `light-mode-paper-technical` - carta tecnica chiara
Ci sono anche skill tecniche per la grafica 3D e gli effetti: `threejs`, `matterjs`, `globe-gl`, `vantajs`, `unicorn-studio`, `progressive-blur`, `beautiful-shadows`, `css-border-gradient`.
Nel repository non c’è un comando di installazione: l’autore dice chiaramente nella roadmap che lo aggiungerà quando il metodo d’integrazione sarà definito. L’unica istruzione per Claude Code è:
Di seguito è mostrato un metodo d’installazione. Questo comando non è nel repository: è un consiglio per l’installazione.
```bash
git clone ''
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/
```
## Come fornire a un agente la documentazione GSAP aggiornata con una riga?
Punti chiave
GSAP ha un file `llms.txt`: un riepilogo della documentazione di 25 kilobyte, creato appositamente per i modelli linguistici. Fornisci all’agente un link al file e potrà lavorare con descrizioni aggiornate dei metodi invece che affidarsi a ciò che ricorda del passato. Ogni pagina della documentazione è disponibile anche in versione markdown. La libreria Motion ha lo stesso file, ed è ancora più grande.
Un problema comune con le librerie di animazione è che l’agente ricorda un modo ormai superato di collegarle. Scrive un import da un vecchio percorso, registra un plugin come si faceva due anni fa e il codice non funziona.
La soluzione è inserire tu stesso la documentazione nel contesto. GSAP la fornisce in un formato leggibile dalle macchine:
```
https://gsap.com/llms.txt
```
A oggi il file è di circa 25 kilobyte. Ogni pagina della documentazione è disponibile anche in versione markdown: basta aggiungere `.md` all’URL.
In pratica, si presenta così:
```
Leggi https://gsap.com/llms.txt e https://gsap.com/docs/v3/Plugins/ScrollTrigger.md
Poi crea una scena nella home page: il titolo appare mentre scorri la prima schermata
e l’immagine a destra si sposta più lentamente del testo.
Usa solo transform e opacity. Niente transition-all.
```
La libreria Motion (in precedenza Framer Motion) ha lo stesso file, ed è ancora più grande. Motion è distribuita con licenza MIT ed è davvero open source; la versione attuale è `motion@12.42.2`. Se il progetto è in React e servono solo semplici effetti di comparsa, puoi scegliere Motion; per scene di scorrimento complesse, usa GSAP con il plugin ScrollTrigger.
ScrollTrigger permette a chiunque di creare animazioni di scorrimento straordinarie con poco codice.
— GSAP, https://gsap.com/docs/v3/Plugins/ScrollTrigger
Ci sono anche opzioni basate solo sul browser, senza librerie. Le transizioni di stato della pagina tramite la View Transitions API sono entrate nel supporto baseline il 14 ottobre 2025, ma solo all’interno di una singola pagina; la versione tra pagine non è affatto supportata in Firefox. Le animazioni di scorrimento CSS non sono ancora entrate nel supporto baseline: Chrome le supporta, Safari ha imparato a supportarle di recente, ma in Firefox bisogna abilitarle manualmente nelle impostazioni, quindi per i lettori comuni semplicemente non funzioneranno. Chiedi prima all’agente di verificare se il browser le supporta e, in caso contrario, di lasciare la transizione standard.
## Come trasformare un sito che ti piace in un prompt?
Il modo più comune per spiegare cosa vuoi è mostrare un esempio. Con un agente non funziona direttamente: non vede il sito web, vede il testo.
La skill `video-to-superprompt` colma il divario. La descrizione nel repository: trasformare un riferimento video in un prompt dettagliato da usare per ricreare o trarre ispirazione. Al suo interno, analizza la registrazione per livelli: narrazione, layout, movimento, tipografia e grafica 3D. Il risultato è un prompt pronto all’uso.
La sua regola principale è formulata con forza:
La seconda skill, `html-to-interaction-prompts`, lavora con il codice sorgente: trova tutto ciò che si muove — reazioni al cursore, grafica 3D, effetti di scorrimento, livelli che si spostano a velocità diverse — e suddivide la pagina in prompt separati, uno per ogni sezione, pulsante, stato hover o effetto. Il suo principio è considerare il comportamento del sorgente come verità e non inventare effetti a partire da uno screenshot quando il codice è disponibile.
La terza, `stitched-full-page-capture`, risolve un problema pratico. Un normale screenshot a pagina intera di siti con caricamento differito e grafica 3D risulta grigio e vuoto perché l’acquisizione avviene prima del rendering. La skill scorre la pagina schermata dopo schermata, aspetta che tutto si stabilizzi e assembla il risultato.
C’è anche un metodo senza registrazione dello schermo: collegare l’agente a una libreria di esempi di interfacce reali tramite MCP. Il server ufficiale di Mobbin si può installare con un comando:
```bash
claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp
```
Dopodiché, apri una nuova sessione, seleziona il server dall’elenco e accedi dal browser. L’agente ottiene accesso agli screenshot di app reali e funzionanti: ne sono elencate più di 621,500. Si tratta di schermate di prodotti finiti, non di componenti o codice. Avvertenza importante: il server Mobbin non funziona con il piano gratuito; è disponibile con i piani a pagamento (a luglio 2026). Un [articolo separato su Google Stitch](https://ailoot.ai/blog/it/google-stitch-claude-code-design/) descrive il collegamento di servizi esterni a un agente e usa lo stesso metodo per portare un design system in Claude Code.
## Passo dopo passo: un sito web animato in una sera
Punti chiave
L’ordine è: regole anti-template, skill di design, scelta di un orientamento visivo, pagina statica e solo nell’ultimo passaggio una scena animata. Aggiungi il movimento alla fine, un effetto alla volta, altrimenti quando qualcosa si rompe non saprai da dove cominciare. I sette passaggi qui sotto richiedono una sera, se non provi ad animare tutto insieme.
1. ### Prepara un progetto
Se non hai ancora un progetto, parti da una cartella vuota. Creala, aprila in un terminale ed esegui `claude` al suo interno. Come primo prompt, chiedi uno scheletro iniziale: «costruisci lo scheletro di un sito web a pagina singola per la mia attività (descrivi di cosa si tratta), solo HTML e CSS, senza librerie». Comparirà un insieme di file: quella è la radice del progetto, dove d’ora in poi si svolgerà tutto.
2. ### Inserisci le regole in CLAUDE.md
Copia il blocco Garanzie anti-generiche in un file `CLAUDE.md` nella radice del progetto. Se non c’è, chiedi all’agente di crearlo. Le regole sono scritte per Tailwind; se il tuo scheletro iniziale usa CSS semplice, di’ all’agente: «applica questi principi al CSS normale» — il significato delle regole non cambia. Consulta l’analisi delle quattro regole per CLAUDE.md per capire come funziona il file e cos’altro inserirvi.
3. ### Installa la skill frontend-design
Usa il plugin `example-skills` oppure copia la cartella `frontend-design`, come descritto sopra. Puoi verificare che la skill sia stata caricata con il comando `/doctor`.
4. ### Scegli un orientamento visivo
Uno solo, non due o tre. Mescolare lo stile documentaristico brutalista con il minimalismo beige ti darà proprio quella media che stai cercando di evitare.
5. ### Crea una pagina statica
Senza una sola animazione. Prima vengono tipografia, spaziatura e griglia. Chiedi all’agente di avviare un’anteprima locale e apri l’indirizzo che ti fornisce. Per visualizzarla sul telefono, di’: «eseguilo in modo che si apra anche sugli altri dispositivi della mia rete»; l’agente ti fornirà un indirizzo.
6. ### Aggiungi una scena di movimento
Una sola. Di solito è la prima schermata: appare il titolo e un livello di sfondo si muove più lentamente del primo piano. Fornisci all’agente il file `llms.txt` della libreria e descrivi concretamente la scena: cosa si muove, dove e nell’arco di quanti millisecondi. Lascia stare l’opacità nella prima schermata; più avanti c’è una sezione che spiega il perché.
7. ### Aggiungi una regola per ridurre il movimento
Applica sia la regola CSS sia la configurazione JavaScript per il movimento ridotto descritte nella sezione accessibilità. Prima di pubblicare prova la pagina con la preferenza attiva.
8. ### Pubblica e controlla la velocità
Pubblica il sito su un qualsiasi servizio gratuito di hosting statico: Vercel, Netlify o GitHub Pages. Chiedi all’agente: «pubblica questo progetto su Vercel e dammi il link». Solo dopo la pubblicazione, analizza l’URL risultante con PageSpeed Insights: il servizio funziona con URL pubblici e non può visualizzare una pagina locale. Guarda «Largest Contentful Paint», il tempo necessario per visualizzare l’elemento più grande: la zona verde arriva fino a 2.5 secondi. L’agente può misurare la versione locale prima della pubblicazione: Chrome DevTools MCP la aprirà in Chrome e mostrerà la stessa metrica.
Il passaggio sei è quello in cui è più facile rovinare il lavoro dei cinque precedenti.
## Perché troppe animazioni fanno sembrare un sito ancora più generato dall’IA?
Punti chiave
Anthropic lo dice chiaramente nella documentazione della skill di design: troppo movimento rafforza l’impressione che una pagina sia stata generata. Per impostazione predefinita, l’agente aggiunge effetti di comparsa a ogni sezione, una dopo l’altra, creando una pagina in cui tutto sobbalza e l’attenzione non viene guidata in alcuna direzione. Funziona il contrario: una scena deliberata nella prima schermata, poi moderazione.
È qui che si blocca il ragionamento di quasi tutti quelli che affrontano l’argomento: poche animazioni sembrano economiche, quindi bisogna aggiungerne di più.
A volte meno è meglio, e troppe animazioni aumentano la sensazione che il design sia stato generato.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Lo dice proprio la skill `frontend-design` che hai installato per migliorare il design. Anthropic mette in guardia dall’esagerare nello strumento che l’agente usa per decorare la pagina.
Elenca anche altre tecniche standard: un numero grande con una piccola didascalia e un accento sfumato come risposta predefinita a qualsiasi compito; blocchi numerati come 01 / 02 / 03, adatti solo quando c’è davvero una sequenza.
Ecco come si manifesta l’eccesso nella pratica: l’agente riceve il compito «aggiungi animazioni» e inserisce un effetto di comparsa durante lo scorrimento in ogni sezione. Il titolo scorre in vista, tre schede compaiono una dopo l’altra, le testimonianze arrivano di lato e il piè di pagina sfuma in vista. Ogni effetto, preso da solo, va bene. Insieme creano una pagina che non smette mai di muoversi e non mette nulla in risalto.
Un sito web vivo funziona diversamente: una scena deliberata, di solito nella prima schermata, e poi moderazione. Il movimento funziona come l’enfasi: ha senso finché ricade su una singola parola.
Ecco una regola da seguire nel prompt. Formulala così: «crea una scena nella prima schermata e lascia tutto il resto statico». Sono poche parole diverse da «aggiungi animazioni», ma il risultato è di un ordine di grandezza migliore.
## In che modo le animazioni uccidono la velocità di un sito web?
Punti chiave
La trappola principale: un browser non considera nemmeno un elemento con opacità zero tra i candidati per Largest Contentful Paint. La tecnica standard di «nascondere la sezione e mostrarla durante lo scorrimento», applicata alla prima schermata, danneggia direttamente la metrica di velocità principale. Inoltre, anima solo transform e opacity: tutto il resto innesca un ricalcolo del layout.
Le tre metriche che Google usa per valutare una pagina sono: tempo necessario per visualizzare l’elemento più grande — non più di 2.5 secondi; reattività a un’interazione — non più di 200 millisecondi; e spostamento del layout — non più di 0.1. Si misurano al 75º percentile delle visite reali.
Vediamo perché qui è importante. Per impostazione predefinita, l’agente crea un effetto di comparsa in questo modo: imposta l’opacità di una sezione a zero, poi rimuove l’impostazione quando la sezione entra nell’area visibile. Se l’effetto è nella prima schermata, l’immagine può essere già stata caricata e decodificata completamente, ma la metrica non la conteggia finché non inizia il rendering. È peggio se uno script rimuove l’opacità dopo il caricamento: a quel punto la metrica aspetta l’intero script.
Ci sono due modi per risolvere. Si può iniziare l’effetto di comparsa da un’opacità bassa ma diversa da zero, così il rendering iniziale viene conteggiato. Oppure si può lasciare invariata l’opacità nella prima schermata e animare solo lo spostamento.
Il secondo problema riguarda ciò che è economico da animare e ciò che è costoso.
Quando possibile, limita le animazioni alle proprietà opacity e transform, così restano nella fase di compositing della pipeline di rendering.
— web.dev, https://web.dev/articles/animations-guide
In parole semplici: il browser assembla l’immagine a livelli, e le modifiche a posizione e opacità avvengono nell’ultima fase, la meno costosa. Tutto il resto lo obbliga a ricalcolare la pagina. Le misurazioni riportate nella stessa documentazione: animare con gli offset top e left richiede 37 millisecondi per il layout e 79 per il rendering; ottenere lo stesso effetto visivo tramite transform richiede zero per entrambi.
Ecco una contraddizione da ricordare: l’opacità costa poco in compositing, ma esclude un elemento dalla metrica di velocità. Un’animazione economica per il browser e una sicura per le prestazioni sono dunque due cose diverse.
Un’altra cosa sulla proprietà `will-change`, che gli agenti amano spargere in giro «per ottimizzare». La documentazione MDN dice il contrario:
Un uso eccessivo di will-change comporta un consumo eccessivo di memoria e costringe il browser a eseguire rendering più complessi mentre cerca di prepararsi a possibili modifiche. Questo degrada le prestazioni.
— MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
La documentazione dice anche che la proprietà è da usare come ultima risorsa per problemi di prestazioni già esistenti. Non è una misura preventiva. Una riga come `will-change: transform, opacity` su cinquanta elementi è un tipico segnale di codice generato.
La questione dello spostamento del layout è più semplice. La documentazione di Google non accusa le animazioni; al contrario, transizioni ponderate aiutano ad aggiornare il contenuto senza sorprendere il lettore. La ricetta è la stessa: modifica la scala con transform invece che con width e height e sposta con gli offset invece che con le coordinate.
## E le persone che subiscono danni fisici a causa del movimento?
Punti chiave
Fino al 35% degli adulti sopra i quarant’anni negli Stati Uniti ha avuto disturbi vestibolari. Per loro, le animazioni durante lo scorrimento possono causare nausea ed emicrania. L’impostazione di sistema «riduci il movimento» è supportata da tutti i browser da più di cinque anni, ma l’agente non la aggiungerà se non glielo chiedi. Servono sia regole CSS sia un ramo esplicito nella configurazione JavaScript: leggere la preferenza da solo non ferma una timeline.
Questa sezione conta per più che la semplice cortesia. Il pubblico a cui si rivolge chi gestisce un’attività è proprio quello delle persone dai quarant’anni in su.
Per le persone con disturbi vestibolari, il consorzio W3C descrive le conseguenze senza attenuarle: nausea ed emicrania, talvolta abbastanza gravi da richiedere di sdraiarsi.
Si può intervenire con tre righe di stili:
```css
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
Ci sono tre punti da tenere a mente.
Imposta l’animazione come comportamento predefinito e disattivala all’interno di questa regola: così la pagina degrada in modo più sicuro rispetto all’approccio opposto.
La specifica dice «rimuove, riduce o sostituisce»: la rimozione completa non è nemmeno la prima opzione. Sostituire un ingresso brusco con una breve dissolvenza funziona meglio che interromperlo del tutto: disattivare tutte le animazioni fa smettere di funzionare gli indicatori di caricamento e le barre di avanzamento.
Le animazioni JavaScript richiedono una propria gestione della preferenza: una durata CSS non annulla una timeline GSAP. Salvare `matchMedia(...).matches` in una variabile non basta se la configurazione non cambia di conseguenza. Con GSAP mantieni visibile l’elemento in HTML/CSS ordinario e crea movimento soltanto quando l’utente lo consente:
```js
// Run after GSAP and the page elements have loaded.
function mountMotion() {
const mm = gsap.matchMedia();
mm.add('(prefers-reduced-motion: no-preference)', () => {
gsap.from('.hero-title', { y: 24, duration: 0.35 });
});
return () => mm.revert();
}
const cleanupMotion = mountMotion();
// Call cleanupMotion() when this page or component is removed.
```
Il titolo non deve avere uno stile base nascosto o traslato. Con movimento ridotto resta visibile e statico. Se la preferenza cambia a pagina aperta, GSAP ripristina l’animazione quando la query non corrisponde più. `mm.revert()` rimuove anche l’animazione raccolta alla chiusura. Con Motion realizza il ramo equivalente nella configurazione della libreria: la sola regola CSS non basta. Consulta la [documentazione GSAP su ciclo di vita e pulizia matchMedia](https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/).
C’è anche un criterio formale di accessibilità da tenere presente. WCAG 2.2.2, criterio di livello A, richiede che, se qualcosa si muove, lampeggia o scorre automaticamente per più di cinque secondi ed è mostrato insieme ad altri contenuti, l’utente possa fermarlo. Questo si applica ai caroselli a rotazione automatica e ai ticker infiniti, che gli agenti inseriscono con facilità.
## Sette punti in cui tutto si rompe
Punti chiave
Quasi tutti gli errori si riconducono a tre cause: la prima schermata viene animata, c’è troppo movimento oppure vengono animate le proprietà sbagliate. Lo scrolljacking è un problema a parte: le ricerche sull’usabilità lo giudicano direttamente dannoso. Una durata utile per un’animazione va da 100 a 400 millisecondi, mentre gli agenti tendono a usare un secondo intero come valore predefinito.
**1. La prima schermata resta nascosta finché non compare con una dissolvenza.** Un elemento con opacità zero non viene conteggiato tra i candidati per la metrica di rendering. È l’errore più costoso, perché danneggia una metrica che incide sul posizionamento nei motori di ricerca.
**2. Tutto è animato.** Ogni sezione scorre in vista, ogni scheda compare. Anthropic dice chiaramente che questo rafforza l’impressione di un design generato.
**3. Scrolljacking.** Quando un sito web sostituisce il comportamento normale della rotellina del mouse con una propria logica «cinematografica».
Nello stesso studio, la maggior parte dei partecipanti ha provato almeno un lieve disorientamento.
**4. Si animano le proprietà del layout.** Coordinate e dimensioni al posto di transform. 37 e 79 millisecondi contro zero.
**5. Le animazioni sono troppo lunghe.** La durata utile va da 100 a 400 millisecondi, mentre 400 è già molto lenta e adatta solo ai movimenti ampi. Gli agenti tendono a usare un secondo intero come valore predefinito.
Secondo i suoi risultati, l’intervallo utile va da 100 a 400 millisecondi, e 400 è già molto lento e adatto solo a movimenti ampi. Gli agenti tendono a usare un secondo intero come valore predefinito.
**6. Manca la regola per ridurre il movimento.** L’agente non la aggiungerà di sua iniziativa.
**7. Il sito diventa più lento a ogni interazione.** Problema specifico di React: un’animazione creata senza un riferimento all’elemento e senza una procedura di pulizia si moltiplica a ogni aggiornamento del componente. La pagina comincia gradualmente a rallentare senza una ragione apparente.
C’è un’ottava trappola: l’approccio in cui «l’agente acquisisce uno screenshot e corregge ciò che vede» funziona benissimo sulle pagine statiche, ma con gli elementi animati intrappola l’agente in un ciclo infinito di modifiche: vede un fotogramma intermedio, pensa che sia un bug, lo corregge e vede un altro fotogramma intermedio. Inoltre, ogni screenshot consuma contesto.
## Quanto costa e come evitare di bruciare il limite mensile su un solo sito?
Punti chiave
Tutti gli strumenti di questa configurazione sono gratuiti; si paga il lavoro dell’agente. Le animazioni consumano i limiti più rapidamente del normale lavoro sul layout, perché non si può verificare il risultato leggendo il codice: ogni modifica richiede di rileggere i file e fare altre iterazioni. Costruire una scena alla volta, mantenere breve `CLAUDE.md` e disattivare il ciclo di screenshot sugli elementi animati sono tutte misure utili.
Una storia tipica delle community anglofone dedicate al vibe coding: qualcuno crea una pagina vistosa con uno scorrimento nello spazio, pubblica il risultato e dalla discussione emerge che quel singolo sito ha consumato l’intera quota mensile.
È prevedibile. Le animazioni costano più del normale lavoro sul layout per più ragioni contemporaneamente. Non è possibile verificare il risultato leggendo il codice: servono iterazioni. Ogni modifica richiede di rileggere i file. E un ciclo di screenshot sugli elementi in movimento aggiunge passaggi inutili.
Cosa aiuta:
Costruisci una scena alla volta e fissane il risultato. Una richiesta in un solo passaggio di «aggiungere animazioni a tutto il sito» garantisce una spesa eccessiva. Puoi disattivare la verifica tramite screenshot sugli elementi animati e ispezionarli tu stesso a vista. Mantieni breve `CLAUDE.md` affinché le regole non consumino contesto a ogni richiesta. E fornisci in anticipo all’agente il file `llms.txt` della libreria: altrimenti inventerà un metodo di collegamento obsoleto e poi correggerà la propria invenzione.
L’articolo [perché Claude Code rilegge l’intero progetto](https://ailoot.ai/blog/it/claude-code-rereads-project/) spiega dove vanno i token quando si lavora a un progetto; l’articolo [come non esaurire i limiti di Claude Code](https://ailoot.ai/blog/it/claude-code-token-limits-saving/) illustra i modi per tenere sotto controllo l’utilizzo.
## E adesso?
Punti chiave
Il metodo funziona: regole anti-template, un orientamento visivo, una scena in movimento, un controllo della velocità e rispetto per le impostazioni del lettore. La complessità sta nell’inserire in anticipo le informazioni giuste nel contesto dell’agente, così ha una base da cui partire. Le animazioni in sé sono la parte più semplice del lavoro.
Crea la tua prima pagina seguendo gli otto passaggi. Scegli un orientamento visivo, crea una scena nella prima schermata e controlla la velocità.
### Fonti
- [anthropics/skills](https://github.com/anthropics/skills) - skill ufficiali di Anthropic, tra cui frontend-design
- [GSAP: Prezzi](https://gsap.com/pricing) - conferma che è gratuita
- [Versione 3.13 di GSAP](https://gsap.com/blog/3-13) - cosa è diventato gratuito alla fine di aprile 2025
- [GSAP: llms.txt](https://gsap.com/llms.txt) - documentazione per modelli linguistici
- [GSAP: ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger) - plugin per animazioni di scorrimento
- [Motion](https://motion.dev/) - alternativa open source con licenza MIT
- [web.dev: Guida alle animazioni](https://web.dev/articles/animations-guide) - quali proprietà animare
- [MDN: will-change](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change) - perché non impostarla preventivamente
- [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) - impostazione per ridurre il movimento
- [WCAG 2.2.2: Pausa, Arresto, Nascondi](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) - criterio di accessibilità
- [W3C: Animazione da interazioni](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) - effetti sui disturbi vestibolari
- [Mobbin MCP](https://mobbin.com/mcp) - libreria di riferimenti d’interfaccia per agenti
Per i tuoi prossimi passi: [Ailoot](https://ailoot.ai/).
## Domande frequenti
### Perché una regola CSS reduced-motion lascia attiva l’animazione GSAP?
Le durate CSS non annullano una timeline JavaScript. Crea l’animazione GSAP dentro un ramo matchMedia no-preference e mantieni visibile l’elemento di base: con movimento ridotto la pagina resta statica.
### Come impedisco l’accumulo delle animazioni dopo la navigazione?
Richiama la funzione di pulizia restituita dalla configurazione quando la pagina o il componente vengono rimossi. Nell’esempio mm.revert() ripristina gli stili e rimuove le animazioni raccolte da quell’istanza matchMedia.
## Ailoot · L’azienda e il suo portafoglio di progetti
Ailoot si basa su un’esperienza operativa consolidata, un’ampia base di clienti, un servizio stabile e un controllo costante dei KPI.
L’azienda e il suo portafoglio di progetti: milioni di clienti; vendite nell’ordine dei miliardi ogni mese.
Ailoot mette questa esperienza operativa al servizio dell’accesso API alle funzioni AI nei prodotti dei clienti, negli agenti, nelle applicazioni e nelle automazioni.