motion-designpor LottieFiles

Motion Design Skill.

Un skill de Claude Code y Codex para movimiento y video: aplica principios de diseño de movimiento: ritmo, easing, coreografía y fundamentos de animación.

Movimiento y video

Descargar OpenDesign Ver guía de 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

Encabezados y materia preliminar leídos del archivo original el 14-09-2026 · 12.489 caracteres en total

01 Qué hace

Qué Hace el Skill motion-design en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Una referencia de diseño de movimiento centrada únicamente en principios para diseñadores y desarrolladores que animan interfaces. Parte de tres pilares —intención emocional, narrativa visual y oficio del movimiento— y luego concreta cada decisión mediante una de cuatro personalidades de movimiento (Playful, Premium, Corporate, Energetic), cada una con bandas de duración fijas, curvas de easing y porcentajes de overshoot.

Las recetas trabajadas cubren la pulsación de botones, la entrada de tarjetas, el éxito y el shake de error, con tablas de duración por tipo de elemento, reglas de easing direccional, coreografía y presupuestos de stagger, un mapa de emoción a movimiento y clases de peso. La guía se expresa como números, valores predeterminados y restricciones aplicables a cualquier sistema de animación que ya utilice.

Qué produce

Tres constantes de movimiento de marca por definir: easing distintivo, paleta de duraciones y patrón de entrada
Especificaciones cubic-bezier ya preparadas, tomadas de los estándares de plataforma
Recetas de patrones de varios pasos con temporización por paso, como el seguimiento de la pulsación de un botón

Ver el ejemplo de prompt ↗

Cómo funciona

01
Fije Primero los Tres Pilares
Identifique la intención emocional, la microhistoria visual y el oficio que hace creíble el movimiento antes de elegir cualquier temporización o curva.
02
Fije un Único Arquetipo de Personalidad
Elija un único arquetipo —Playful, Premium, Corporate o Energetic— y manténgalo en todo el proyecto, ya que cada uno conlleva su propia banda de duración, curva de easing y overshoot.
03
Use el Menor Número de Propiedades que Funcione
Las tablas de propiedades emparejan cada objetivo de efecto con una propiedad principal y secundarias opcionales; una propiedad se percibe como directa, dos como pulida, tres o más corren el riesgo de saturar al espectador.
04
Escale la Duración según la Distancia
Comience con la duración correspondiente al tipo de elemento y luego ajústela según la distancia de recorrido: 100px es la base, 200px pasa a 1.3x, 400px pasa a 1.6x.
05
Aplique el Easing según la Dirección
Las entradas se desaceleran con una curva de la familia ease-out, de modo que el movimiento empieza rápido y se asienta suavemente.

02 Encuentra tu caso de uso

Cuándo usar el skill motion-design

Usa el skill motion-design en Claude Code o Codex cuando el trabajo sea animación y video de este tipo. El alcance y los límites a continuación están tomados del archivo propio del skill.

Buen caso de uso

Animaciones de UI como botones, tarjetas, modales y transiciones de página
Microinteracciones y animaciones de retroalimentación
Estados de carga, éxito y error
Planificar animaciones activadas por scroll o basadas en progreso

Conozca los límites

Las escenas con tres o más elementos no pueden tener más de un tercio de ellos en movimiento activo en el mismo instante.
Retroalimentación de error con rebote: los estados de error no llevan overshoot, porque los errores deben sentirse firmes.

Qué proporcionar

El objetivo emocionalDecida primero qué debe sentir el espectador, eligiendo entre alegría, calma, urgencia o elegancia.
Un arquetipo de personalidad de movimientoNombre la personalidad para que el timing, el easing y el overshoot se mantengan coherentes: Lúdico, Premium, Corporativo o Enérgico.
La propiedad principalEstablezca qué se mueve realmente —posición, escala, rotación u opacidad— antes de escribir ninguna animación.

03 Dentro del skill

Reglas que el skill de diseño de movimiento da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

Sin Easing Lineal para Movimiento Espacial
El movimiento espacial debe usar curvas de easing; lo lineal se reserva solo para spinners y barras de progreso.
Nunca Solo Opacidad para Cambio de Estado
Los cambios de estado importantes deben combinar opacidad con posición o escala en lugar de aparecer en el mismo lugar.
Mantenga las Tres Capas de Movimiento
Toda animación lleva una acción principal, una riqueza secundaria y una vida ambiental de fondo; una animación plana es aquella a la que le falta una capa.
Por Defecto Corporativo para UI
Cuando no se indica ninguna personalidad, use Corporativo para trabajo de UI y Lúdico para ilustraciones.
Haga las Entradas Más Largas que las Salidas
Las entradas duran entre un 30 y un 50% más que las salidas, porque a los usuarios les importa lo que aparece.
Nunca Cruce un Tercio de la Pantalla sin Interrupción
Ningún movimiento recorre más de 1/3 de la pantalla sin un cambio de fotograma clave intermedio.
Limite el Escalonamiento Total
Cualquiera que sea el patrón de escalonamiento utilizado, el presupuesto total de retraso debe mantenerse por debajo de 500ms.
Aplique los Principios de Disney
Se esperan los principios de animación de Disney, especialmente la anticipación y el follow-through.

04 Ponlo a trabajar

Instalar motion-design en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar motion-design a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

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

Formulario genérico de la CLI skills para skills/motion-design/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al Skill una Primera Tarea de Motion y Video

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

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%.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Revise el archivo completo de la lista de verificación de calidad para conocer los criterios de evaluación.
Confirme que cada duración coincida con su tipo de elemento según las tablas de duración.
Si el resultado se ve pobre o plano, añada movimiento de sombras y vida de fondo como capas secundarias y ambientales.
Si no tiene personalidad, aplique un arquetipo de forma consistente en lugar de un easing genérico en todo momento.
Verifique la adaptación de plataforma, accesibilidad y rendimiento antes de publicar.

En OpenDesign importe motion-design desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: LottieFiles
Repository: github.com/LottieFiles/motion-design-skill Rama main
Archivo de skill: skills/motion-design/SKILL.md Suma de verificación de contenido registrada en verificación; commit f9a8a04
License: MIT De LICENSE; SKILL.md dice "MIT".
Estrellas del repositorio: 1.626 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio LottieFiles/motion-design-skill. No es una calificación ni un recuento de uso de motion-design.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Cuándo AplicarloDisparadores para usar el skill, además de un árbol de decisión de cuatro preguntas que dirige hacia timing, personalidad, principios de Disney o stagger.
Tres Pilares (CRÍTICO)Intención emocional, narrativa visual y oficio del movimiento, además de las tres capas de movimiento que necesita toda animación.
Personalidad de MovimientoCuatro arquetipos con valores de duración, easing y overshoot, además de tres constantes de movimiento de marca.
Selección de PropiedadesAsocia los objetivos del efecto con propiedades primarias y secundarias, con un umbral de simplicidad.
Tabla de DuraciónDuraciones por tipo de elemento, escalado por distancia, relación entre entrada y salida, y tiempos de retroalimentación interactiva.
Selección de EasingReglas de easing direccional, estándares cubic-bezier de la industria y escalas de duración y overshoot basadas en material.
Patrones ComunesRecetas paso a paso para pulsación de botón, entrada de tarjeta, estado de éxito y sacudida de error.
Fundamentos de CoreografíaElemento protagonista, consistencia espacial, contramovimiento, las reglas del tercio y presupuestos de retraso de stagger.
Mapa de Emoción a MovimientoSiete emociones asociadas a carácter, trayectoria, easing y duración, además de los significados de la trayectoria como lenguaje.
Clasificación de PesoElementos pesados, medios y ligeros con duraciones, overshoot y orientación sobre amortiguación.
Reglas de CalidadElementos CRÍTICOS que nunca deben romperse y recomendaciones de ALTA prioridad para duración, easing y consistencia.
Referencia Rápida de Resolución de ProblemasCinco señales de animación problemática con sus causas probables y soluciones, desde lo robótico hasta lo plano.

La descripción propia del Skill

Aplica principios de diseño de movimiento para crear animaciones y transiciones emocionalmente impactantes y técnicamente sólidas. Proporciona timing, easing, coreografía y los principios de animación de Disney adaptados para UI. Usa cuando crees animaciones, transiciones, microinteracciones, estados de carga, transiciones de página, efectos activados por scroll o cualquier trabajo de movimiento. Funciona con CSS, Framer Motion, GSAP, Lottie, Spring o cualquier sistema de animación.

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 12.489 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas Sobre el Skill motion-design

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Esto me limita a una sola librería de animación?

No. El archivo indica compatibilidad con CSS, Framer Motion, GSAP, Lottie, Spring o cualquier sistema de animación, por lo que la guía se presenta como decisiones de timing, easing y coreografía en lugar de código específico de una librería.

¿Cuánto debería durar una transición de modal?

La tabla de duración asigna a los modales y diálogos entre 300 y 400 ms, planteado como un cambio de foco. En contraste, los tooltips y la microrretroalimentación se ubican entre 80 y 120 ms porque deben sentirse instantáneos.

¿Un elemento elástico debería rebotar más que una tarjeta de papel?

Sí. La tabla de easing basada en materiales escala la duración y el overshoot según el material implícito: elastic aplica una escala de duración de 0.8x con un 15-25% de overshoot, mientras que paper se mantiene en 1.0x con un 3-5% de overshoot.

Motion Design

Ejecuta motion-design en una tarea real de movimiento y video.

Descarga OpenDesign, importa motion-design desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills