motion-designdi LottieFiles

Motion Design Skill.

Uno skill per Claude Code e Codex dedicato a motion e video: applica i principi del motion design: timing, easing, coreografia e fondamenti dell'animazione.

Motion e video

Scarica OpenDesign Guida all'uso

LottieFiles/motion-design-skill · skills/motion-design/SKILL.mdSKILL.md

--- name: motion-design description: Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system. --- ## When to Apply ## Quick Reference: 8-Step Checklist ## Three Pillars (CRITICAL) ## Motion Personality ## Property Selection ## Duration Table

Frontespizio e intestazioni di sezione letti dal file upstream il 14/09/2026 · 12.489 caratteri in totale

01 Cosa fa

Cosa fa la Skill motion-design in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Un riferimento di motion design basato solo su principi, per designer e sviluppatori che animano interfacce. Parte da tre pilastri — intento emotivo, narrazione visiva e artigianalità del movimento — poi restringe ogni decisione attraverso una delle quattro personalità di movimento (Playful, Premium, Corporate, Energetic), ciascuna con fasce di durata fisse, curve di easing e percentuali di overshoot.

Ricette pratiche coprono la pressione dei bottoni, l'ingresso delle card, lo scatto di successo e di errore, supportate da tabelle di durata per tipo di elemento, regole di easing direzionale, coreografia e budget di stagger, una mappa emozione-movimento e classi di peso. Le indicazioni sono espresse come numeri, valori predefiniti e vincoli applicabili a qualsiasi sistema di animazione già in uso.

Che cosa produce

Tre costanti di motion del brand da definire: easing distintivo, palette di durate e pattern di ingresso
Specifiche cubic-bezier pronte all'uso, mutuate dagli standard di piattaforma
Ricette di pattern multi-step con tempi per ciascun passaggio, come il follow-through della pressione di un bottone

Vedi l'esempio di prompt ↗

Come funziona

01
Definire Prima i Tre Pilastri
Identificare l'intento emotivo, la micro-storia visiva e l'artigianalità che rende il movimento credibile, prima di scegliere qualsiasi timing o curva.
02
Fissare un Solo Archetipo di Personalità
Scegliere un unico archetipo — Playful, Premium, Corporate o Energetic — e mantenerlo per tutto il progetto, poiché ciascuno porta con sé una propria fascia di durata, curva di easing e overshoot.
03
Usare il Minor Numero di Proprietà che Funziona
Le tabelle delle proprietà associano ogni obiettivo di effetto a una proprietà primaria e a eventuali secondarie; una proprietà risulta diretta, due risultano curate, tre o più rischiano di sopraffare chi osserva.
04
Scalare la Durata in Base alla Distanza
Partire dalla durata per il tipo di elemento, poi estenderla in base alla distanza percorsa: 100px è la base, 200px diventa 1,3x, 400px diventa 1,6x.
05
Easing in Base alla Direzione
Gli ingressi decelerano con una curva della famiglia ease-out, così il movimento parte veloce e si posa in modo delicato.

02 Trova la tua applicazione

Quando usare la skill motion-design

Usa la skill motion-design in Claude Code o Codex quando il lavoro riguarda motion and video di questo tipo. Ambito e limiti sotto sono tratti dal file della skill stessa.

Buona applicazione

Animazioni UI come bottoni, card, modali e transizioni di pagina
Micro-interazioni e animazioni di feedback
Stati di caricamento, successo ed errore
Pianificare animazioni attivate da scroll o basate su progressione

Conosci i limiti

Nelle scene con tre o più elementi, non più di un terzo può trovarsi in movimento attivo nello stesso istante.
Feedback di errore elastico: gli stati di errore non prevedono overshoot, perché gli errori devono risultare netti.

Cosa fornire

L'obiettivo emotivoDecida prima cosa deve provare chi osserva, scegliendo tra gioia, calma, urgenza o eleganza.
Un archetipo di personalità del movimentoAssegni un nome alla personalità in modo che tempi, easing e overshoot restino coerenti: Playful, Premium, Corporate o Energetic.
La proprietà primariaStabilisca cosa si muove effettivamente — posizione, scala, rotazione o opacità — prima di scrivere qualsiasi animazione.

03 Dentro la skill

Regole che la skill di motion design impone a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

Nessun Easing Lineare per il Movimento Spaziale
Il movimento spaziale deve usare curve di easing; il lineare è riservato solo a spinner e barre di progresso.
Mai Solo l'Opacità per un Cambio di Stato
I cambi di stato importanti devono combinare l'opacità con posizione o scala, invece di dissolversi in posizione fissa.
Mantenere Tutti e Tre i Livelli di Movimento
Ogni animazione contiene un'azione primaria, una ricchezza secondaria e una vita ambientale di sfondo; un'animazione piatta è una animazione a cui manca un livello.
Corporate come Default per l'UI
Quando non è indicata una personalità, usi Corporate per il lavoro sull'UI e Playful per le illustrazioni.
Rendere le Entrate Più Lunghe delle Uscite
Le entrate durano il 30-50% più delle uscite, perché agli utenti interessa ciò che appare.
Non Attraversare Mai un Terzo dello Schermo Senza un Cambio Intermedio
Nessun movimento percorre più di 1/3 dello schermo senza un cambio di keyframe intermedio.
Limitare lo Stagger Totale
Qualunque sia il pattern di stagger utilizzato, il budget totale di ritardo deve restare sotto i 500ms.
Applicare i Principi Disney
Sono richiesti i principi di animazione Disney, in particolare anticipazione e follow-through.

04 Mettila al lavoro

Installa motion-design in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi motion-design a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

npx skills add https://github.com/LottieFiles/motion-design-skill --skill motion-design

Forma generica della CLI skills per skills/motion-design/SKILL.md; il repository potrebbe documentare un proprio percorso.

Dai alla Skill un Primo Compito di Motion e Video

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

Starter prompt

Add a card entrance to [the pricing section] of my [React dashboard]. The cards should feel Premium: start 20px below target at opacity 0, take a slight curve in the path, and let the shadow arrive about 50ms after each card. Stagger the four cards at 60ms with the total under 400ms, and dim the surrounding content to 80%.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Esamina l'intero file della checklist di qualità per i criteri di valutazione.
Verifica che ogni durata corrisponda al proprio tipo di elemento in base alle tabelle delle durate.
Se il risultato sembra povero o piatto, aggiungi il movimento delle ombre e la vita dello sfondo come livelli secondari e ambientali.
Se manca di personalità, applica un archetipo in modo coerente invece di un easing generico ovunque.
Controlla l'adattamento per piattaforma, accessibilità e prestazioni prima del rilascio.

In OpenDesign importa motion-design dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi selezionalo nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: LottieFiles
Repository: github.com/LottieFiles/motion-design-skill Branch main
File della skill: skills/motion-design/SKILL.md Checksum del contenuto registrato alla verifica; commit f9a8a04
License: MIT Da LICENSE; SKILL.md dice "MIT".
Stelle del repository: 1.626 Snapshot GitHub effettuato il 14/09/2026 per l'intero repository LottieFiles/motion-design-skill. Non è un punteggio o un conteggio d'uso per motion-design.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Quando ApplicarlaTrigger per l'utilizzo della skill più un albero decisionale a quattro domande che indirizza verso timing, personalità, principi Disney o stagger.
Tre Pilastri (CRITICO)Intento emotivo, narrazione visiva e mestiere del movimento, più i tre livelli di movimento richiesti da ogni animazione.
Personalità del MovimentoQuattro archetipi con valori di durata, easing e overshoot, più tre costanti di movimento del brand.
Selezione delle ProprietàMappa gli obiettivi dell'effetto su proprietà primarie e secondarie, con una soglia di semplicità.
Tabella delle DurateDurate per elemento, scalatura in base alla distanza, rapporto entrata/uscita e tempistiche di feedback interattivo.
Selezione dell'EasingRegole di easing direzionale, standard cubic-bezier del settore e scale di durata e overshoot basate sul material design.
Pattern ComuniRicette passo dopo passo per pressione dei bottoni, entrata delle card, stato di successo e shake di errore.
Elementi Essenziali della CoreografiaElemento guida, coerenza spaziale, controm movimento, le regole del 1/3 e i budget di delay per lo stagger.
Mappa Emozione-MovimentoSette emozioni mappate su carattere, percorso, easing e durata, più i significati del percorso come linguaggio.
Classificazione del PesoElementi pesanti, medi e leggeri con indicazioni su durate, overshoot e damping.
Regole di QualitàElementi CRITICI da non violare mai e raccomandazioni ALTE per durata, easing e coerenza.
Riferimento Rapido per la Risoluzione dei ProblemiCinque odori di animazione con probabili cause e soluzioni, da robotico a piatto.

Descrizione della skill

Applica i principi del motion design per creare animazioni e transizioni tecnicamente solide e dal forte impatto emotivo. Fornisce timing, easing, coreografia e principi dell'animazione Disney adattati per le UI. Da utilizzare per creare animazioni, transizioni, micro-interazioni, stati di caricamento, transizioni tra pagine, effetti scroll-triggered o qualsiasi lavoro legato al movimento. Funziona con CSS, Framer Motion, GSAP, Lottie, Spring o qualsiasi sistema di animazione.

Descrizione dal front-matter di SKILL.md. Il file completo è di circa 12.489 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande Sulla Skill motion-design

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Questo mi blocca su una sola libreria di animazione?

No. Il file dichiara il supporto per CSS, Framer Motion, GSAP, Lottie, Spring o qualsiasi sistema di animazione, quindi le indicazioni arrivano come decisioni di timing, easing e coreografia piuttosto che codice specifico per una libreria.

Quanto dovrebbe durare la transizione di un modal?

La tabella delle durate assegna a modal e dialog 300-400ms, inquadrati come uno spostamento del focus. Per contrasto, tooltip e micro-feedback si collocano a 80-120ms perché devono sembrare istantanei.

Un elemento elastico dovrebbe rimbalzare più di una card di carta?

Sì. La tabella di easing basata sul materiale scala la durata e l'overshoot in base al materiale implicito: l'elastico applica una scala di durata 0.8x con un overshoot del 15-25%, mentre la carta resta a 1.0x con un overshoot del 3-5%.

Motion Design

Esegui motion-design su un task reale di motion e video.

Scarica OpenDesign, importa motion-design dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

npx skills add https://github.com/LottieFiles/motion-design-skill --skill motion-design

Cosa fa la Skill motion-design in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando usare la skill motion-design

Buona applicazione

Conosci i limiti

Cosa fornire

Regole che la skill di motion design impone a Claude Code e Codex

Nessun Easing Lineare per il Movimento Spaziale

Mai Solo l'Opacità per un Cambio di Stato

Mantenere Tutti e Tre i Livelli di Movimento

Corporate come Default per l'UI

Rendere le Entrate Più Lunghe delle Uscite

Non Attraversare Mai un Terzo dello Schermo Senza un Cambio Intermedio

Limitare lo Stagger Totale

Applicare i Principi Disney