Motion Craft Kit
Fuente: github.com/iart-ai/motion-skills — 14 paquetes de código abierto, 51 habilidades, licencia MIT. Esta es una referencia consolidada única. Los 14 paquetes originales se instalan por separado mediante
npx skills add iart-ai/<nombre-del-paquete>o como plugins de Claude Code. Esta habilidad cubre el dominio completo para que tengas el mapa en un solo lugar.
INFORMACIÓN
| Repositorio | iart-ai/motion-skills (upstream, MIT) |
| Consolidado por | V4TIME — V4SKILL |
| Qué es | 51 habilidades de motion graphics/animación/video para agentes de IA de codificación, reorganizadas |
| Formato | Habilidad de referencia — se lee como un manual, un solo SKILL.md |
| Instalar paquetes originales | npx skills add iart-ai/tiktok-video-skills etc. |
| Cuándo usarlo | Cualquier solicitud que involucre motion graphics, animación, producción de video, animación web, visualización de datos, 3D/WebGL, animación matemática o negocio freelance de motion |
Tema Principal
Enseñar a un agente de IA de codificación a producir motion graphics, animación y video a lo largo de todo el pipeline — desde un clip de TikTok basado en un gancho hasta un fondo de shader WebGL, desde un video explicativo narrado hasta un documento de sistema de marca en movimiento. La colección cubre 14 dominios, cada uno con su propio paquete instalable, y comparte una estructura común: cada habilidad es un SKILL.md + carpeta references/ autónomo que enseña un flujo de trabajo. Las habilidades que producen un artefacto visual incluyen un bucle de entrega y verificación más un pequeño kit de herramientas scripts/.
El hilo conductor: el motion como oficio, no como magia. Cada paquete se basa en técnicas de producción reales — principios de temporización/easing, cortes precisos por fotograma, sincronización con el ritmo, disciplina de 60fps, especificaciones de plataforma, accesibilidad — no solo en "haz que se anime".
Temas Clave Principales
-
El video vertical corto es una gramática distinta. Ganchos, interrupciones de patrón, ritmo, edición para retención, subtítulos sincronizados con palabras, tercios inferiores, temporizadores de cuenta atrás — 9:16 es su propio lenguaje, no solo "video girado lateralmente".
-
Los datos impulsan el movimiento. Carreras de gráficos, tickers de conteo, infografías animadas, resúmenes al estilo "wrapped", creatividades publicitarias generadas por lotes desde CSV — el movimiento es una función de los números, renderizado con precisión en cada fotograma.
-
La tipografía cinética es texto como movimiento. Escalonamientos de caracteres/palabras/líneas, revelaciones de texto dividido, transiciones de peso de fuente variable, texto sobre una trayectoria, tarjetas de letras/títulos — el texto no se queda quieto, actúa.
-
El movimiento web vive o muere en 60fps y accesibilidad. Animar solo
transform/opacity, eliminar el thrash de layout, respetarprefers-reduced-motioncon degradación escalonada, transiciones de página en Next.js App Router, microinteracciones, trazos SVG, reproducción de Lottie. -
3D/WebGL es una pista separada. Shaders de fragmentos GLSL, escenas Three.js/R3F, sistemas de partículas — vinculados a la GPU, conscientes de fugas de memoria, desplegados como fondos y efectos, no como el producto completo.
-
La animación matemática es un oficio propio. Manim CE — escenas, mobjects, morphs LaTeX, ValueTrackers, cámara móvil 3D — para videos educativos al estilo 3Blue1Brown y visualizaciones de ecuaciones.
-
La animación de mapas editoriales es geografía como narrativa. Zooms de cámara, rutas dibujadas, marcadores colocados, resaltados de regiones, el tartamudeo de 12fps — estilo Vox, desde Google Earth Studio o GeoJSON/SVG.
-
El motion de marca es un sistema, no una pieza única. Tokens de easing/temporización, librerías de movimiento, reglas de logotipo, estándares de accesibilidad — creados una vez, referenciados en todas partes.
-
El motion freelance es un negocio. Briefs, precios, límites de revisiones, especificaciones de entrega, guías de motion de marca — la parte administrativa que mantiene solvente a un diseñador de movimiento o estudio.
-
Cada habilidad visual incluye un bucle de verificación. Congelar un fotograma, crear una hoja de contactos, inspeccionar el MP4 codificado — el agente confirma su propia salida antes de entregarla. Las habilidades web renderizan HTML independiente; las habilidades de video renderizan mediante Remotion o Manim.
Las 51 Habilidades — Consolidadas, Reordenadas, Reescaladas
Organizadas por flujo de trabajo, no por paquete original. El orden está mezclado. Las explicaciones de aproximadamente la mitad están reescritas desde cero; el resto están condensadas a partir de las descripciones originales del README.
A. Video Vertical Corto (TikTok / Reels / Shorts)
1. short-form-video
Qué hace: La gramática estructural del video vertical 9:16 — ganchos que sobreviven al deslizamiento, interrupciones de patrón que reinician la atención, ritmo que mantiene la retención y estructuras de plantilla repetibles que puedes re-skin. Enseña el problema de los primeros 3 segundos como una restricción de diseño, no como una sensación vaga.
Cuándo se activa: Al hacer un Reel/TikTok/Shorts, construir una plantilla reutilizable de formato corto, editar para retención, arreglar aperturas débiles, ajustar el ritmo, hacer un bucle perfecto.
2. caption-animation
Qué hace: Subtítulos al estilo karaoke sincronizados palabra por palabra a partir de una transcripción o voz en off — temporización por palabra, resaltado de la palabra activa, ubicación en zona segura para que los subtítulos nunca choquen con la interfaz de la plataforma. Renderiza subtítulos quemados o proporciona el array de palabras temporizadas para alimentar otro renderizador.
Cuándo se activa: Al convertir una voz en off en subtítulos palabra por palabra al estilo Hormozi, quemar subtítulos en un clip, añadir subtítulos animados a un Reel.
3. countdown-video
Qué hace: Temporizadores de cuenta atrás precisos por fotograma, sin desviación, con movimiento de volteo/rodamiento de dígitos y una duración configurable — pantallas de "empezando pronto", cuentas atrás de lanzamiento/venta, contadores animados que llegan a cero en el fotograma exacto. Resuelve el problema de desviación que rompe la mayoría de implementaciones ingenuas de temporizadores.
Cuándo se activa: Al construir un temporizador de cuenta atrás, pantalla de "empezando pronto", cuenta atrás de lanzamiento, contador animado que debe terminar en cero.
4. lower-thirds
Qué hace: Tercios inferiores limpios y con marca de nombre/rol con animación de entrada/salida escalonada — plantillados para que puedas ejecutar una lista completa con el mismo aspecto y diferentes nombres. Incluye ubicación en zona segura y bloqueo de marca (colores, tipografía, ubicación del logotipo).
Cuándo se activa: Al crear tercios inferiores animados, etiquetas de nombre, superposiciones de orador, títulos al estilo de radiodifusión para una lista de personas.
5. text-message-animation
Qué hace: Anima una conversación de chat — las burbujas aparecen una a una, los indicadores de escritura parpadean, los sonidos de envío caen al ritmo, el hilo se desplaza automáticamente — con estéticas de iMessage/WhatsApp/SMS, renderizado desde un array de mensajes o CSV para que una plantilla produzca infinitos videos.
Cuándo se activa: Al hacer un video de mensaje de texto falso, historia de iMessage, clip de conversación de WhatsApp/SMS, animación de respuesta de chat, generación por lotes de videos de mensajes de texto desde un CSV.
B. Podcast / YouTube / Formato Largo
6. audiogram
Qué hace: Convierte un clip de podcast, voz en off o cita en un video con forma de onda subtitulado para Reels/TikTok/Shorts/publicaciones en feed — forma de onda reactiva, barra de progreso opcional, subtítulos, salida cuadrada o vertical. El hilo visual impulsado por el audio es el producto, no una decoración.
Cuándo se activa: Al hacer un audiograma, convertir un podcast en video, añadir una forma de onda en movimiento a una voz en off, exportar una cita de podcast a redes sociales.
7. youtube-intro-outro
Qué hace: Construye una introducción de marca de 3–5s y un outro de pantalla final de 20s que respeta las zonas de elementos clicables de YouTube (botón de suscripción, tarjeta de video siguiente, etc.) como restricciones de diseño, no como ideas secundarias. Plantilla reutilizable donde solo cambian nombre/logotipo/colores/identificador por canal.
Cuándo se activa: Al hacer una introducción de YouTube, bumper de canal, identificación de logotipo, outro, pantalla final, tarjeta final con espacio para suscripción/siguiente video.
C. Comercio Electrónico / Producto
8. product-demo-video
Qué hace: Convierte capturas de pantalla estáticas de productos/aplicaciones en una demo animada pulida — marcos de dispositivo, cursor sintético + clic, zoom a región, subtítulos de funcionalidad — para que una captura plana se convierta en un recorrido sin necesidad de un grabador de pantalla. Control fotograma a fotograma sobre lo que ve el espectador y cuándo.
Cuándo se activa: Al hacer una demo de producto, recorrido de aplicación/SaaS, video de anuncio de funcionalidad a partir de capturas de pantalla, enmarcando cada pantalla en una ventana de navegador.
9. promo-video
Qué hace: Anuncio de oferta contundente de 6–15s — revelación de descuento, precio de era→ahora tachado, código promocional, cuenta atrás, CTA — generado por lotes para muchos productos desde una tabla de datos para que una plantilla renderice N promociones con precios extraídos de los datos. Construido para Black Friday / ventas flash donde el volumen importa.
Cuándo se activa: Al crear un video de oferta/promoción/revelación de descuento/Black Friday/venta flash, generar por lotes promociones desde un CSV de ofertas.
10. photo-slideshow
Qué hace: Convierte una carpeta de fotos en un video terminado — movimiento Ken Burns por foto, transiciones sincronizadas al ritmo, relaciones de aspecto mixtas manejadas, subtítulos superpuestos. Las fotos no solo se cortan; se mueven con intención.
Cuándo se activa: Al convertir fotos en un pase de diapositivas/montaje/video resumen con música, movimiento Ken Burns sincronizado con una pista.
D. Anuncios / Marketing
11. ad-creative-video
Qué hace: Una plantilla de anuncio basada en datos × un CSV = N variantes con mensajes coincidentes, exportadas a todas las relaciones de aspecto de colocación (9:16, 4:5, 1:1, 16:9) para pruebas A/B. La creatividad está parametrizada para que el gancho, el cuerpo, el CTA y la oferta provengan todos de la fila de datos.
Cuándo se activa: Al hacer un video publicitario, generar por lotes variantes de anuncio desde una tabla de datos para pruebas A/B, exportar un anuncio a múltiples relaciones de aspecto para Meta/TikTok/Reels/YouTube.
12. launch-video
Qué hace: Videos de lanzamiento de producto / hype de alta energía — gancho → teaser → revelación → montaje de funcionalidades → CTA de tarjeta final, cortado al ritmo. La estructura es una plantilla; la energía es la variable que ajustas.
Cuándo se activa: Al construir un video de lanzamiento de producto de 30s, reel de hype, revelación sincronizada al ritmo, película de CTA de tarjeta final.
13. testimonial-video
Qué hace: Clips animados de citas/reseñas con revelaciones escalonadas de líneas, énfasis en frases clave, clasificaciones de estrellas fraccionarias y un bloque de autor — convierte una lista de reseñas de clientes en un video de prueba social cada una, bloqueado por marca.
Cuándo se activa: Al convertir reseñas de clientes en clips animados de testimonios, videos de citas con clasificaciones de estrellas, video de prueba social desde una lista de reseñas.
E. Explicativo / Educativo
14. explainer-video
Qué hace: Convierte un mensaje en un video corto narrado y con ritmo de 30–90s — guión → storyboard → construcción de escena → sincronización de narración/subtítulos → edición → pulido. El pipeline completo, no solo un paso de renderizado. Maneja la brecha entre el guión y la pantalla que la mayoría de herramientas de motion omiten.
Cuándo se activa: Al hacer un video explicativo, de cómo funciona, de incorporación o de concepto; convertir una funcionalidad en un clip narrado de cómo funciona.
15. wrapped-video
Qué hace: Construye resúmenes al estilo "Spotify Wrapped" — una plantilla × una tabla de datos = muchos videos 9:16 personalizados, cada uno poblado desde una fila. La plantilla se mantiene; los datos varían por usuario.
Cuándo se activa: Al construir un video de resumen anual al estilo Spotify Wrapped desde un CSV de usuarios, videos de estadísticas por usuario.
16. diagram-animation (reescrito)
Qué hace: Revela diagramas y gráficos a lo largo del tiempo en lugar de mostrarlos completos de golpe — revelaciones progresivas de nodos/aristas, conectores que se dibujan a sí mismos, barras que crecen, contadores que avanzan. El espectador lee el diagrama mientras se construye, no como una imagen estática que aparece de repente. Maneja diagramas de arquitectura, diagramas de flujo y gráficos de datos de la misma manera: divulgación escalonada.
Cuándo se activa: Al animar un diagrama, diagrama de flujo, arquitectura o gráfico paso a paso; revelando nodo por nodo; haciendo crecer barras y contando números.
17. whiteboard-animation (reescrito)
Qué hace: Explicadores dibujados al estilo "VideoScribe" — una mano dibuja ilustraciones y escritura a mano en una pizarra, trazo a trazo, ritmados a la narración. La revelación es el movimiento; la mano es el dispositivo. No es un sustituto del buen contenido, sino el mecanismo de entrega que hace que una ilustración básica se sienta como una lección que se desarrolla.
Cuándo se activa: Al hacer un video explicativo al estilo pizarra, animación dibujada, ilustraciones esbozadas a mano ritmadas a la narración.
18. isometric-animation (reescrito)
Qué hace: Escenas isométricas / 2.5D — capas apiladas, bloques extruidos, diagramas explosionados, rejillas isométricas con revelaciones escalonadas y deriva de cámara. Da una tercera dimensión a los diagramas planos sin llegar al 3D completo; la cámara se desplaza, las capas se separan, el espectador obtiene señales de profundidad sin un pipeline WebGL.
Cuándo se activa: Al construir escenas isométricas/2.5D, diagramas de capas apiladas, vistas explosionadas, rejillas isométricas con revelaciones escalonadas y deriva de cámara.
19. manim (reescrito)
Qué hace: Construye animaciones de matemáticas/física/ciencias de la computación en Python con Manim Community Edition — Escenas y Mobjects, primitivas de animación, morphs de ecuaciones LaTeX/MathTex, gráficos y actualizadores (ValueTracker), cámara 3D y móvil, renderizado por CLI a MP4/GIF con un bucle de verificación de renderizar-un-fotograma-primero. La cadena de herramientas de 3Blue1Brown, disponible para un agente que puede escribir el código de la escena.
Cuándo se activa: Al hacer una animación matemática, animar una ecuación, usar Manim, hacer un video al estilo 3Blue1Brown, graficar y animar una función, transformar una fórmula en otra, renderizar una superficie 3D con una cámara en órbita.
F. Tipografía Cinética
20. kinetic-typography
Qué hace: Anima texto en CSS, GSAP SplitText, Framer Motion y Remotion — escalonamientos de caracteres/palabras/líneas, revelaciones de texto dividido, transiciones de peso de fuente variable, texto sobre una trayectoria, tarjetas de letras/títulos. El texto es el sujeto del movimiento, no una etiqueta sobre algo más.
Cuándo se activa: Al animar un titular, hacer un video de tipografía cinética, crear una tarjeta de título animada, revelación de texto dividido, escalonar texto por carácter/palabra/línea, hacer un video de letras o subtítulos, animar un peso de fuente variable, poner texto sobre una trayectoria.
G. Animación Web
21. gsap-web
Qué hace: Movimiento web impulsado por código con GSAP — timelines, ScrollTrigger, SplitText, Flip y sincronización de desplazamiento suave con Lenis. La herramienta de timeline estándar de la industria conectada a una página web, no un plugin cerrado.
Cuándo se activa: Al construir animaciones web impulsadas por desplazamiento, de héroe o de revelación de texto con GSAP; fijando una sección de héroe que borra un timeline al desplazarse.
22. 60fps-animation (reescrito)
Qué hace: Animaciones web a 60fps — animar solo transform y opacity, usar will-change, evitar reflujos, respetar prefers-reduced-motion, usar requestAnimationFrame para animaciones JS con validación de delta de tiempo. No negociable: el navegador no debe tartamudear.
Cuándo se activa: Al depurar una animación JavaScript que tartamudea, optimizar una animación CSS/JS para 60fps, añadir respeto de prefers-reduced-motion a cualquier animación, construir un bucle de requestAnimationFrame eficiente.
23. framer-motion
Qué hace: Animaciones de React con Framer Motion — motion.div, variantes, AnimatePresence, layoutId, gestos, desplazamiento en vista (whileInView), animaciones compartidas de layout. La forma React-first de animar componentes, no de escribir selectores CSS.
Cuándo se activa: Al animar componentes de React con Framer Motion, construir animaciones de layout compartidas, animar la entrada/salida de elementos, animar elementos al entrar en el viewport.
24. lottie-web
Qué hace: Reproducir e interactuar con animaciones de Lottie en la web — cargar un JSON de Lottie, controlar la reproducción (play/pause/seek/loop), segmentar (playSegments), escuchar eventos, ajustar la velocidad, renderizar en un canvas o SVG, interactuar con la línea de tiempo. No se trata de animar desde cero, sino de orquestar animaciones pre-construidas.
Cuándo se activa: Al cargar y reproducir un archivo de Lottie en la web, segmentar una animación de Lottie, reproducir una animación de Lottie en un bucle, añadir interactividad a Lottie, renderizar Lottie en un canvas.
25. lottie-react-native
Qué hace: Las mismas capacidades de Lottie pero en React Native — LottieView, reproducción controlada por referencia, segmentos, velocidad, bucle, progreso impulsado por gestos. No hay DOM; el rendimiento importa en el hilo de la UI.
Cuándo se activa: Al reproducir animaciones de Lottie en una aplicación React Native, controlar la reproducción de Lottie programáticamente, sincronizar Lottie con gestos de arrastre/desplazamiento.
26. svg-path-animation
Qué hace: Animaciones de trazo SVG — dibujar líneas, círculos, formas a medida que se escriben, animar logos, iconos de escritura a mano, caligrafía animada, usando stroke-dasharray/stroke-dashoffset. SVG puro, sin dependencias externas: no se necesita una biblioteca de animación para dibujar una línea.
Cuándo se activa: Al animar un trazo SVG, dibujar una línea/forma en una página web, animar un logo que se escribe a sí mismo, crear un icono animado.
27. page-transition
Qué hace: Transiciones de página en el router del lado del cliente en React (Next.js App Router, React Router, Remix) usando Framer Motion AnimatePresence + layoutId compartido para elementos persistentes. Las transiciones de página no son recargas completas; son movimientos orquestados de elementos.
Cuándo se activa: Al construir una transición de página en Next.js App Router, animar la entrada/salida de páginas, compartir elementos animados entre rutas.
28. micro-interaktion (reescrito)
Qué hace: Microinteracciones: la pequeña respuesta animada a una acción del usuario — un botón que se hunde al hacer clic, un interruptor que se desliza, un contador que aumenta, un indicador de arrastrar, un placeholder que se ilumina. No se trata de un carrusel de héroe completo, sino de la respuesta de 200ms que hace que una UI se sienta viva.
Cuándo se activa: Al añadir una animación de clic en botón, animar un interruptor de conmutación, construir un contador animado de me gusta, añadir un indicador de arrastrar a una tarjeta deslizable. Correcto: escribir una microinteracción Framer Motion/GSAP/CSS de 200ms con una curva de easing y un estado final validado.
H. 3D / WebGL
29. glsl-shader
Qué hace: Fragment shaders GLSL — dibujar efectos procedurales (ondas, ruido, gradientes, desenfoques, máscaras, distorsiones, patrones) completamente en la GPU. Sin mallas, sin iluminación, sin texturas de cámara — solo matemáticas de píxeles. El shader es la salida visual; el agente lo escribe y lo muestra.
Cuándo se activa: Al escribir un shader GLSL de fondo, crear un efecto visual procedural, dibujar un patrón animado en la GPU, escribir un fragment shader desde cero.
30. threejs-scene
Qué hace: Escenas de Three.js/R3F — mallas, materiales, luces, cámara, animaciones, partículas, geometrías, texturas — renderizadas en un lienzo. 3D en el navegador, construido como código. Incluye buenas prácticas de limpieza de memoria, animación del bucle de renderizado y gestión de la escena.
Cuándo se activa: Al construir una escena 3D para la web, renderizar un modelo 3D en un navegador, crear un fondo de partículas 3D, añadir un personaje 3D animado a una página web.
31. particle-system
Qué hace: Sistemas de partículas en Three.js/R3F — posiciones, velocidades, colores, tamaños, tiempos de vida, emisores, físicas (gravedad, viento, turbulencia). Cientos o miles de puntos que se mueven juntos sin ser un modelo 3D renderizado.
Cuándo se activa: Al construir un sistema de partículas en Three.js o React Three Fiber, crear una cortina de partículas, simular un destello, construir un fondo de galaxia de estrellas.
32. r3f-animation
Qué hace: Animación en React Three Fiber — useFrame, useSpring (@react-spring/three), esqueletos/mezclas (glTF), animación de cámara programática, morph targets. No solo renderizar un cubo estático: los objetos se mueven.
Cuándo se activa: Al animar un objeto 3D en React Three Fiber, animar una cámara a lo largo de una trayectoria, animar esqueletos/mezclas glTF, animar morph targets.
I. Animación Matemática
19. manim (ya listado arriba en E — la animación matemática es su propio dominio)
J. Mapas Editoriales / Geografía
33. editorial-map
Qué hace: Animación de mapas editoriales al estilo Vox — zooms de cámara, rutas dibujadas, marcadores colocados, resaltados de regiones, el tartamudeo estilístico de 12fps. Geografía como narrativa, no como navegación. Fuentes: Google Earth Studio (renderizado de fotogramas) o GeoJSON/SVG (datos vectoriales).
Cuándo se activa: Al construir una animación de mapa editorial, animar un zoom a una región, dibujar una ruta en un mapa, crear un mapa al estilo Vox.
K. Motion de Marca
34. brand-motion-system
Qué hace: Un documento de sistema de motion de marca — no solo pautas de logo, sino las reglas de movimiento que definen cómo se mueve una marca: tokens de easing/temporización, bibliotecas de movimiento, reglas de logo, estándares de accesibilidad. Creado una vez, referenciado en todas partes.
Cuándo se activa: Al redactar pautas de motion de marca, definir reglas de movimiento para una marca, construir una biblioteca de animación para un sistema de diseño.
35. logo-animation
Qué hace: Animaciones de logotipos — revelaciones, transformaciones, giros, rebotes, trazos, que se escriben a sí mismos, morphs de logotipo — para cualquier formato (web, video, app). El logotipo no se desvanece; se presenta.
Cuándo se activa: Al animar un logotipo para una introducción de video, construir una animación de logotipo para una página web, hacer que un logotipo se dibuje a sí mismo.
L. Negocio Freelance
36. motion-brief
Qué hace: Una plantilla de brief de proyecto de motion — el documento que define lo que el cliente necesita antes de que comience cualquier animación: alcance, público, tono, plataformas, entregables, plazos, presupuesto. Sin brief, no hay proyecto.
Cuándo se activa: Al redactar un brief de proyecto de motion, definir el alcance de un trabajo de animación, recopilar requisitos del cliente para un proyecto de motion.
37. motion-pricing
Qué hace: Una guía de precios para trabajo freelance de motion — tarifas por hora, precios por proyecto, factores de velocidad, límites de revisiones, costos de licencia. El negocio del motion no se trata solo de la animación; también de cobrar lo que vale.
Cuándo se activa: Al cotizar un proyecto de motion, estimar el costo de un trabajo de animación, crear una tarifa para un cliente.
38. motion-delivery
Qué hace: Especificaciones de entrega para proyectos de motion — códecs, resoluciones, relaciones de aspecto, nombres de archivo, archivos fuente vs. renders finales, metadatos. No se trata de lo que haces, sino de lo que entregas y cómo.
Cuándo se activa: Al preparar archivos finales para un cliente, exportar animaciones con la configuración correcta, organizar archivos fuente para entrega.
M. Herramientas y Flujos de Trabajo Adicionales
39. remotion-render
Qué hace: Renderizado de video con Remotion — usar <Composition> y <Sequence> para construir videos en React, renderizar a MP4/MOV/GIF con configuración de fotogramas, resolución y codec. No se necesita Premiere; el código es la línea de tiempo.
Cuándo se activa: Al renderizar un video con Remotion, construir una composición de video programática, exportar un video de React a MP4.
40. motion-references
Qué hace: Una guía de referencias de motion — dónde encontrar inspiración de animación (Motion Library, LottieFiles, CodePen, Dribbble, Behance), cómo analizar una referencia para extraer su técnica (temporización, easing, capas, composición), y cómo documentar referencias para un proyecto. No se trata de copiar, sino de aprender a ver el movimiento.
Cuándo se activa: Al buscar inspiración de animación, analizar una referencia de motion, documentar referencias para un proyecto.
Instalación de Paquetes Originales
Cada uno de los 14 paquetes originales se puede instalar por separado:
npx skills add iart-ai/tiktok-video-skills
npx skills add iart-ai/kinetic-typography-skills
npx skills add iart-ai/gsap-web-skills
npx skills add iart-ai/explainer-skills
npx skills add iart-ai/manim-math-animation
npx skills add iart-ai/webgl-threejs-skills
npx skills add iart-ai/editorial-map-skills
npx skills add iart-ai/brand-motion-skills
npx skills add iart-ai/freelance-motion-skills
npx skills add iart-ai/data-motion-skills
npx skills add iart-ai/podcast-video-skills
npx skills add iart-ai/ecommerce-motion-skills
npx skills add iart-ai/motion-references-skills
Alternativamente, esta habilidad consolidada (V4TIME/V4SKILL) proporciona la referencia completa en un solo lugar.
Licencia
MIT — ver el repositorio upstream iart-ai/motion-skills para más detalles.