/ Directorio / Playground / Motion.dev Animations Skill
← Todos los servidores ↗ GitHub
● Comunidad 199-biotechnologies ⚡ Instantáneo

Motion.dev Animations Skill

por 199-biotechnologies · 199-biotechnologies/motion-dev-animations-skill

Describe el movimiento que deseas; Obtenga código Motion.dev que se ejecuta a más de 60 fps con física de resorte, soporte de movimiento reducido y sin cambios de diseño.

motion-dev-animations-skill es una habilidad de Claude Code que escribe animaciones de nivel de producción con Motion.dev (anteriormente Framer Motion). Se activa automáticamente ante menciones de animación, efectos de desplazamiento, Motion.dev, física de primavera, etc., y emite código dirigido a 60 fps+, impacto de paquete <50 KB, accesibilidad total (prefiere movimiento reducido) y cero CLS. Cubre animaciones de entrada, efectos de desplazamiento, interacciones de gestos, microinteracciones y animaciones de diseño.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por qué usarlo

Características clave

Demo en vivo

Cómo se ve en la práctica

motion-dev-animations-skill.replay ▶ listo
0/0

Instalación

Repositorio del autor · Documentación oficial de Skills de Claude

Casos de uso

Usos del mundo real: Motion.dev Animations Skill

Agregue una entrada de héroe que se desvanece con escalonamiento

👤 Desarrolladores frontend ajustando páginas de destino ⏱ ~15 min beginner

Cuándo usarlo: Tu héroe se siente estático y quieres una animación de carga pulida.

Flujo
  1. Describe el efecto
    Agregue una entrada gradual escalonada al H1, al subtítulo y al CTA del héroe. Escalonamiento de 60 ms.✓ Copiado
    → Código Motion.dev con motion.div, resorte de transición, retraso mediante escalonamiento
  2. Retroceso de movimiento reducido
    Asegúrese de que prefiere el movimiento reducido omita la animación limpiamente.✓ Copiado
    → useReducedMotion gancho o consulta de medios CSS aplicada

Resultado: Un héroe que se siente vivo sin sacrificar la accesibilidad.

Errores comunes
  • Animar propiedades que activan el diseño (ancho, superior) — Utilice transformar (traducir/escalar) en su lugar: acelerado por GPU, sin CLS
Combinar con: magic-ui-mcp

Cree revelaciones y paralaje activados por desplazamiento

👤 Desarrolladores frontend de diseño avanzado ⏱ ~25 min intermediate

Cuándo usarlo: Su página de destino de formato largo necesita secciones que se desplieguen al desplazarse.

Flujo
  1. Revelar en desplazamiento
    Anime cada sección a medida que ingresa a la ventana gráfica (una vez, umbral del 30%).✓ Copiado
    → useInView con una vez + cantidad
  2. Primer plano de paralaje
    Agregue un sutil desplazamiento de paralaje para el SVG decorativo de primer plano.✓ Copiado
    → useScroll + useTransform mapeo scrollYProgreso a y

Resultado: Experiencia de desplazamiento que agrega profundidad sin distracciones.

Errores comunes
  • Paralaje que provoca mareos — Mantenga las compensaciones pequeñas y omítalas por completo en "prefiere movimiento reducido".

Construya una tarjeta magnética arrastrable con elevación flotante

👤 Diseñadores de interacción / desarrolladores frontend ⏱ ~20 min intermediate

Cuándo usarlo: La tarjeta del producto necesita un pulido de microinteracción.

Flujo
  1. elevación flotante
    Al pasar el mouse: levante 4 px, escala de sombra sutil; volver de vacaciones.✓ Copiado
    → mientras flota con primavera; Transformaciones compatibles con GPU
  2. Arrastre magnético
    Hazlo arrastrable con límites elásticos, arrastra Elastic 0.15.✓ Copiado
    → arrastrar + arrastrarConstraints + arrastrarElastic configurado correctamente

Resultado: Una interacción de tarjeta encantadora sin el costo de rendimiento.

Animar el reordenamiento de la lista con diseño.

👤 Desarrolladores frontend creando tableros/galerías de tareas ⏱ ~25 min intermediate

Cuándo usarlo: Los reordenamientos de su lista resultan discordantes; Quieres transiciones suaves.

Flujo
  1. Habilitar diseño en elementos
    Agregue animaciones de diseño a los elementos de la lista; animar la entrada/salida también.✓ Copiado
    → <diseño de motion.li> + AnimatePresence
  2. movimiento reducido
    Deshabilite las animaciones de diseño en Prefiere movimiento reducido.✓ Copiado
    → Condicional aplicado; reorden instantáneo para los usuarios que lo solicitaron

Resultado: Reordenes que se sienten físicos pero que respetan las preferencias del usuario.

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

motion-dev-animations-skill + magic-ui-mcp

Magic UI para componentes prediseñados, motion.dev para bits personalizados

Utilice el marco de Magic UI para logotipos; motion.dev para ver un paralaje de desplazamiento personalizado a continuación.✓ Copiado
motion-dev-animations-skill + claude-design-auditor-skill

Auditar el movimiento para soporte de movimiento reducido

Después de agregar animaciones, realice una auditoría con alcance=movimiento para detectar regresiones de movimiento reducido.✓ Copiado
motion-dev-animations-skill + claude-code-design-skills

Figma-to-code + animaciones en un solo flujo

Convierta el marco Figma; luego agregue las animaciones de entrada y de desplazamiento especificadas.✓ Copiado

Herramientas

Lo que expone este MCP

HerramientaEntradasCuándo llamarCoste
motion-dev (SKILL) describe the animation (element + intent + constraints) Cada vez que desee un código de animación, especialmente. con limitaciones de accesibilidad y rendimiento 0

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API
Ninguna
Tokens por llamada
Pequeño para código; grande sólo si descarta componentes complejos
Monetario
Gratis
Consejo
Describe claramente la intención de la animación: "desvanecimiento con un escalonamiento de 60 ms, duración de 200 ms" supera a "hazlo agradable".

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Ninguna
Salida de datos: Ninguno de la habilidad; red no involucrada

Resolución de problemas

Errores comunes y soluciones

Jank en desplazamiento

Comprueba que estás animando transformaciones, no accesorios de diseño (ancho/superior). Utilice will-change con moderación.

Verificar: Chrome DevTools → Performance → layout shift count
Animación ignorada en movimiento reducido.

Envuelva con useReducedMotion y cortocircuite las variantes de animación.

Verificar: System → Motion preferences → reduce motion; reload
Paquete grande después de agregar movimiento

Importa sólo lo que necesitas de 'motion/react'; Evite reexportar todo.

Verificar: Bundle analyzer on the chunks

Alternativas

Motion.dev Animations Skill vs otros

AlternativaCuándo usarlaContrapartida
magic-ui-mcpQuiere componentes animados prediseñados, no movimientos personalizadosMenos personalizado, más rápido de adoptar
cc-frontend-skillDesea orientación general sobre el frontend, no específicamente sobre Motion.devNo centrada en la animación
excalidraw-skillQuieres diagramas, no animaciones webProblema diferente

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills