Módulo 3.1 — animation-designer | Skill Design

🧩 Qué es / qué hace

Concepto principal

O animation-designer es un skill especialista en animaciones web, transiciones y motion design. Domina dos ecosistemas complementarios: Framer Motion (para React) y CSS Animations/Keyframes — produce desde microinteracciones sutiles hasta transiciones de página completas.

El skill cubre toda la cadena de movimiento en interfaces: fade ins, listas escalonadas (escalonado), modales con spring physics, parallax al desplazarte, contadores animados, loaders, drag-and-drop con inercia y notificaciones con una insignia animada. Cada patrón sigue buenas prácticas de rendimiento (composición por GPU, will-change, respeto al prefers-reduced-motion).

Con Framer Motion

▸Fade in / deslizamiento al montar el componente (initial/animate/exit)
▸Listas escalonadas con staggerChildren
▸Modales con física spring (AnimatePresence)
▸Transiciones de página completa
▸Arrastrar y soltar con useDragControls
▸Contadores animados con useTransform

Con CSS / Tailwind

▸Animaciones personalizadas de keyframes
▸Clases de Tailwind: animate-spin, animate-bounce, animate-pulse
▸Indicadores de carga skeleton con pulso
▸Indicador de progreso del scroll
▸Parallax con useScroll + useTransform
▸Marca de verificación de éxito e insignia de notificación

Framer Motion

Biblioteca de animación para React

CSS Keyframes

Animación nativa

Easing

Curvas de movimiento

Diseño de movimiento

UX en movimiento

🎣 Cuándo se activa

Claude activa el animation-designer cuando detecta palabras clave relacionadas con el movimiento, las transiciones o el motion design en tu solicitud. La skill es especializado — no se llama para cualquier CSS, solo cuando el foco está en la animación.

Línea de tiempo de activadores comunes

Solicitud explícita de animación

"agrega animación", "crea una transición", "anima este componente", "diseño de movimiento", "Framer Motion"

Componentes con comportamiento

"modal que entra con un deslizamiento", "botón con hover animado", "lista que aparece de forma escalonada", "loading spinner"

Scroll y paralaje

"elemento aparece al desplazarse", "parallax en el hero", "barra de progreso de lectura"

Microinteracciones

"marca de verificación de éxito", "insignia con número que pulsa", "respuesta visual al hacer clic"

Transiciones de página

"navegación con fade entre rutas", "page transition con AnimatePresence", "ruta que se desliza"

💡

Consejo para activarlo

Sé específico en tu pedido: di qué componente animar, qué tecnología prefieres (Framer Motion o CSS puro) y qué efecto quieres. El skill produce código listo para pegar, no instrucciones genéricas.

Disparador directo

"anime", "transición"

Disparador implícito

Modal, spinner, fundido

Basado en el scroll

useScroll, parallax

Microinteracción

Marca de verificación, badge

🚀 Cómo mejora tus páginas

📊 Impacto en las métricas de UX

+40%

Percepción de calidad con microinteracciones bien calibradas

−60%

Sensación de carga con skeleton loaders animados

100%

Accesibilidad con prefers-reduced-motion

✓ HACER con animation-designer

✓Fade in de tarjetas al entrar en el viewport (scroll-triggered)
✓Stagger en listas para guiar la mirada del usuario
✓Física de resorte en modales para una sensación táctil
✓Indicador de carga skeleton durante la obtención de datos
✓Barra de progreso de lectura en la parte superior de la página

✗ EVITAR al animar

✗Animar width/height directamente (causa reflow)
✗Duración superior a 500ms en microinteracciones
✗Olvidar @media (prefers-reduced-motion)
✗Animar opacity + transform sin will-change en listas largas
✗Loops infinitos sin propósito (distraen y cansan)

La mayor diferencia está en la percepción de la respuesta: una interfaz que anima la respuesta a las acciones (clic, hover, envío) parece más rápida y confiable, aunque el tiempo real sea idéntico. La skill garantiza que cada animación tenga un propósito funcional, no solo decorativo.

⚡

El rendimiento es lo primero

El skill prioriza animar solo propiedades compuestas por la GPU: transform e opacity. Nunca anima top/left/margin/width directamente — eso provoca layout thrashing.

GPU Compositing

transform + opacity

Velocidad percibida

UX subjetiva

Duración ideal

150ms–400ms

Reduced Motion

Accesibilidad

⚙️ Cómo funciona por dentro

Core

• Framer Motion
• CSS Animations / Keyframes
• React (motion.*)
• Clases de animación de Tailwind

APIs principales

• motion.div, AnimatePresence
• useScroll, useTransform
• useMotionValue
• useDragControls

Patrones entregados

• Fade In on Mount
• Lista escalonada
• Modal con spring
• Transición de página
• Activado por el desplazamiento
• Drag and Drop

Instalación

npm install framer-motion

// Uso básico em React
import { motion, AnimatePresence } from 'framer-motion';

Anatomía de una animación

<motion.div
  initial={{ opacity: 0, y: 20 }}     // estado inicial
  animate={{ opacity: 1, y: 0 }}      // estado final
  exit={{ opacity: 0, y: -20 }}       // saída (AnimatePresence)
  transition={{ duration: 0.3, ease: 'easeOut' }}
>
  Conteúdo animado
</motion.div>

✓ Buenas prácticas internas

✓Siempre incluye un bloque @media (prefers-reduced-motion)
✓Usa easing semántico: easeOut para entradas, easeIn para salidas
✓Duración de 150–300ms para microinteracciones, 300–500ms para transiciones
✓Preferencia por transform + opacity (cero layout thrashing)

✗ Patrones evitados

✗Animar width, height, top, left
✗Loops infinitos sin justificación de UX
✗Duración superior a 500ms en interacciones frecuentes
✗Ignorar el estado de foco / accesibilidad del teclado

motion.*

Componentes animables

AnimatePresence

Animación de salida

useScroll

Animación basada en el scroll

staggerChildren

Retraso escalonado

💬 Ejemplo práctico + Prompt listo

A continuación, un escenario real: tienes una lista de tarjetas de producto en React y quieres que cada tarjeta aparezca de forma escalonada al desplazarte por la página. Aquí tienes el prompt optimizado y el código que produce la skill.

Prompt listo para pegar en Claude Code

Use o skill animation-designer para adicionar animação à lista
de cards de produto no componente ProductList.tsx (React + Tailwind).

Requisitos:
- Cada card deve fade in + slide-up ao entrar na viewport (scroll-triggered)
- Stagger de 0.1s entre cada card
- Duração de 0.4s com easing easeOut
- Usar Framer Motion (já instalado)
- Incluir suporte a prefers-reduced-motion
- Não alterar layout ou estilos existentes, só adicionar animação

Código resultante — Staggered List con scroll trigger

import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';

// Variantes para o container (stagger)
const containerVariants = {
  hidden: {},
  visible: {
    transition: { staggerChildren: 0.1 }
  }
};

// Variantes para cada card
const cardVariants = {
  hidden: { opacity: 0, y: 24 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.4, ease: 'easeOut' }
  }
};

export function ProductList({ products }) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-60px' });

  return (
    <motion.ul
      ref={ref}
      variants={containerVariants}
      initial="hidden"
      animate={isInView ? "visible" : "hidden"}
      className="grid grid-cols-3 gap-4"
    >
      {products.map(p => (
        <motion.li key={p.id} variants={cardVariants}>
          <ProductCard product={p} />
        </motion.li>
      ))}
    </motion.ul>
  );
}

🎯

Consejo profesional: once: true

Pasa once: true en el useInView para que la animación se active solo la primera vez que el elemento aparece en pantalla. Sin esto, el elemento vuelve a animarse cada vez que sale del viewport y vuelve a entrar —por lo general, algo indeseable.

useInView

Desencadenante del scroll

variants

Estados con nombre

staggerChildren

0.1s de delay

once: true

Anima una sola vez

🧬 Combina con / límites

Con qué skills se combina

✨

impeccable

T1 · Construir

O impeccable también aplica animaciones, específicamente transiciones CSS y microinteracciones de pulido final (estados hover, anillos de enfoque, transiciones de color). La combinación es poderosa: impeccable se ocupa del pulido visual general, animation-designer se ocupa de motion design más elaborado (scroll, spring, stagger, drag). Usa impeccable primero para establecer la base visual; después llama a animation-designer para las capas de movimiento más complejas.

🌀

algorithmic-art

T2 · Identidad

O algorithmic-art genera arte generativo con p5.js y canvas. La combinación con animation-designer crea elementos visuales que unen generación procedural (formas, partículas, ruido Perlin) con motion design de interfaz (transiciones de entrada, feedback al pasar el cursor). Caso de uso: fondos animados generativos con p5.js + transiciones de componentes con Framer Motion en la misma página.

🖱️

3d-animation-creator

T3 · Medios · Siguiente

O 3d-animation-creator es el próximo módulo de esta ruta: amplía el motion design al eje Z, trabajando con Three.js, WebGL y animaciones 3D en el navegador. La separación es clara: animation-designer domina el espacio 2D (UI, transiciones, scroll), mientras que 3d-animation-creator se ocupa de las escenas tridimensionales, los meshes, los materiales y las cámaras. Úsalos juntos cuando necesites una interfaz animada (2D) que integre un hero o un fondo 3D.

⚠️ Límites: cuándo NO usar

✗Video y exportación de fotogramas: para crear videos renderizados a partir de componentes React, usa el skill remotion (módulo 3.3). animation-designer anima en el navegador, no exporta archivos de video.
✗Animaciones 3D complejas: las escenas de Three.js, los meshes, los shaders y las cámaras orbitales son dominio de 3d-animation-creator, no de este skill.
✗Arte generativo con canvas/p5: la generación procedural pura (fractales, ruido, sistemas de partículas matemáticas) es trabajo de algorithmic-art.
✗Proyectos sin React/CSS: El skill está orientado a React (Framer Motion) y CSS moderno. Para animaciones en contextos nativos (iOS, Android) o motores de videojuegos, no es la herramienta adecuada.

Mapa de responsabilidades en la Ruta 3

3.1 animation-designer

2D · UI · Framer Motion · CSS

3.2 3d-animation-creator

3D · WebGL · Three.js

3.3 remotion

React → Video · Exportación

3.4 seedance + HyperFrames

FFmpeg · Pipelines de medios

+ impeccable

Pulido → Motion

+ algorithmic-art

p5.js + Framer

+ 3d-animation

2D UI + hero 3D

NO para video

Usa remotion

📋 Resumen del Módulo 3.1

Qué aprendiste

✓O animation-designer es especialista en animaciones web con Framer Motion y CSS
✓Incluye fade, slide, stagger, spring, scroll, parallax, drag y microinteracciones
✓Se activa con pedidos explícitos de animación, motion design o Framer Motion
✓Siempre incluye prefers-reduced-motion y usa transform+opacity para el rendimiento
✓APIs principales: motion.*, AnimatePresence, useScroll, useTransform, useDragControls
✓Combina con impeccable (pulido), algorithmic-art (p5.js) y 3d-animation-creator (Three.js)
✓NO es un sustituto del video (remotion) ni del arte 3D (3d-animation-creator)

Próximo módulo

🖱️

3.2 — 3d-animation-creator

Three.js, WebGL y animaciones 3D en el navegador. De la interfaz plana al espacio tridimensional.

🎬

Ruta 3 — Medios

Esta ruta cubre toda la capa de movimiento y medios: desde animaciones de UI (3.1) hasta pipelines de video con FFmpeg (3.4). Cada módulo expande el eje de movimiento en una dirección diferente.

←Volver a la Ruta 3 Próximo módulo→