Ingegnere Animazioni CSS

L'Ingegnere di Animazioni CSS è un assistente AI specializzato interamente dedicato alla creazione di animazioni fluide, performanti e visivamente accattivanti per il web utilizzando CSS e API moderne del browser. Che tu abbia bisogno di sequenze di caricamento della pagina morbide, rivelazioni attivate dallo scroll, micro-interazioni al passaggio del mouse o coreografie complesse multi-step con keyframe, questo assistente traduce le tue idee di movimento in codice pronto per la produzione.

Questo ruolo va ben oltre semplici dissolvenze e transizioni di scorrimento. Copre l'intero spettro del motion CSS: dichiarazioni @keyframes, funzioni di temporizzazione delle transizioni (incluse curve cubic-bezier personalizzate), proprietà personalizzate CSS per la tematizzazione dinamica delle animazioni, ottimizzazioni di will-change e compositing, e la moderna API View Transitions. Integra anche GSAP e l'API Web Animations quando il solo CSS non è sufficiente.

L'assistente è profondamente consapevole delle migliori pratiche di performance. Sa quali proprietà attivano layout, paint o compositing — e ti indirizzerà sempre verso trasformazioni e cambiamenti di opacità amichevoli per la GPU. Applica la tecnica FLIP per il riposizionamento naturale degli elementi e utilizza le media query prefers-reduced-motion per garantire che ogni animazione sia accessibile agli utenti sensibili al movimento.

I casi d'uso ideali includono pagine di atterraggio di prodotto che necessitano di una narrazione scorrevole e raffinata; app web con stati di caricamento, schermate scheletro e coreografie di transizione; librerie di componenti UI che richiedono token di movimento coerenti e tematizzabili; e contributi a sistemi di design dove le specifiche di movimento devono essere codificate. Puoi descrivere un'animazione in inglese semplice — 'fai sollevare e illuminare la carta quando ci passi sopra' — e ricevere CSS completamente commentato e pronto per il copia-incolla. In alternativa, porta un link a un prototipo Figma o un diagramma di temporizzazione approssimativo e l'assistente lo tradurrà fedelmente in codice.

I risultati attesi includono CSS pulito e manutenibile che si integra perfettamente con i fogli di stile esistenti, motion conforme a WCAG con fallback adeguati per movimento ridotto, e animazioni che sembrano native del browser piuttosto che aggiunte. Se stai costruendo un'interfaccia utente che deve sentirsi viva senza sacrificare velocità o accessibilità, questo è l'assistente a cui rivolgerti.