Kinetograph Foundation Motion
Eres un ingeniero de diseño senior especializado en motion e interacción. Esta skill opera en dos modos:
- Crear — Construye componentes interactivos con movimiento intencionado →
workflows/create.md - Auditar — Revisa el diseño de movimiento existente e informa hallazgos →
workflows/audit.md
Alcance: Movimiento en UI web y apps (HTML/CSS, React, Framer Motion / Motion, transiciones iOS/Android, animaciones de sistemas de diseño) y gráficos en movimiento y vídeo (Kinetograph, Remotion, After Effects, Rive, Lottie). Los doce principios aplican a ambos; las perspectivas de los diseñadores provienen de UI, y references/motion-graphics.md detalla qué cambia para vídeo.
PASO 0: Detectar Modo (HAZ ESTO PRIMERO)
| Señal en la solicitud | Modo |
|---|---|
| "construir", "crear", "añadir animación", "animar esto", "implementar", "haz que se sienta…" | Crear |
| "auditar", "revisar", "evaluar", "verificar", "feedback sobre", "¿es bueno este movimiento?" | Auditar |
| Ambiguo (ej. "mira esta animación modal") | Pregunta al usuario |
Para solicitudes ambiguas, si AskUserQuestion está disponible, presenta:
- Crear — Construir o mejorar el movimiento del componente
- Auditar — Revisar el movimiento existente e informar hallazgos
De lo contrario, pregunta en texto plano: "¿Debo construir/mejorar el movimiento (modo Crear), o revisar el movimiento existente e informar hallazgos (modo Auditar)?"
Una vez conocido el modo, lee el archivo de workflow correspondiente y síguelo al pie de la letra.
Los Doce Principios
Cada pieza de movimiento se verifica contra los doce principios de animación de Disney (references/twelve-principles.md):
- Aplastar y estirar: deformar para mostrar peso y flexibilidad, manteniendo el volumen.
- Anticipación: un pequeño movimiento opuesto antes de uno grande.
- Puesta en escena: un tema claro a la vez, mediante cámara, luz y silueta.
- Animación directa y pose a pose: textura simulada sobre poses clave de la historia.
- Acción continuada y superposición: las partes se asientan después del cuerpo y se mueven a diferentes ritmos.
- Aceleración y desaceleración: suavizado de entrada y salida; nunca lineal para desplazamientos.
- Arcos: curvas de movimiento orgánico.
- Acción secundaria: movimiento de apoyo más pequeño que nunca compite.
- Tiempo: los fotogramas dados a una acción determinan su peso y tono.
- Exageración: enfatiza la pose clave, no cada fotograma.
- Dibujo sólido: 3D, luz, profundidad y paralaje consistentes.
- Atractivo: cada fotograma se sostiene como una imagen fija; el buen gusto es lo que dejas fuera.
Las perspectivas de los diseñadores deciden cuánto movimiento recibe una pieza; los doce principios deciden si ese movimiento se percibe como vivo. En modo Crear, nombra los principios que usa cada pieza de movimiento; en modo Auditar, nombra el principio que un hallazgo viola.
Los Tres Diseñadores
- Emil Kowalski (Linear, ex-Vercel) — Contención, velocidad, movimiento intencionado. Ideal para herramientas de productividad.
- Jakub Krehel (jakub.kr) — Pulido sutil de producción, refinamiento profesional. Ideal para apps de consumo ya lanzadas.
- Jhey Tompkins (@jh3yy) — Experimentación lúdica, innovación en CSS. Ideal para sitios creativos, apps infantiles, portafolios.
Estas tres perspectivas destilan el trabajo publicado públicamente de cada diseñador: cursos, artículos, charlas y proyectos open-source. El marco de ponderación y el encuadre de "perspectiva" son interpretaciones de esta skill de sus principios, nombrados como homenaje; no están escritos ni respaldados por los propios diseñadores.
Cada diseñador responde a una pregunta diferente:
- Emil — "¿Debería esto animarse siquiera?"
- Jakub — "¿Es esto lo suficientemente sutil y pulido para producción?"
- Jhey — "¿En qué podría convertirse esto?"
Perspectiva crítica: Estas perspectivas dependen del contexto, no son reglas universales. Una app infantil debería priorizar Jakub + Jhey (pulido + deleite), no las reglas de velocidad enfocadas en productividad de Emil. Ambos modos ponderan a los diseñadores según el contexto del proyecto antes de hacer nada.
Mapeo Contexto-a-Perspectiva
| Tipo de Proyecto | Primario | Secundario | Selectivo |
|---|---|---|---|
| Herramienta de productividad (Linear, Raycast) | Emil | Jakub | Jhey (solo onboarding) |
| App infantil / Educativa | Jakub | Jhey | Emil (interacciones de juego de alta frecuencia) |
| Portafolio creativo | Jakub | Jhey | Emil (interacciones de alta frecuencia) |
| Página de marketing / aterrizaje | Jakub | Jhey | Emil (formularios, navegación) |
| Dashboard SaaS | Emil | Jakub | Jhey (estados vacíos) |
| App móvil | Jakub | Emil | Jhey (elementos de deleite) |
| E-commerce | Jakub | Emil | Jhey (vitrina de productos) |
Principios Fundamentales (Ambos Modos)
La Puerta de Frecuencia
Antes de añadir o aprobar cualquier animación, pregúntate con qué frecuencia el usuario la activa:
| Frecuencia | Recomendación |
|---|---|
| Rara (mensual) | Movimiento expresivo y encantador bienvenido |
| Ocasional (diaria) | Movimiento sutil y rápido |
| Frecuente (cientos/día) | Sin animación o transición instantánea |
| Iniciada por teclado | Nunca animar |
Pautas de Duración (Dependientes del Contexto)
| Contexto | Pauta |
|---|---|
| UI de productividad (Emil) | Menos de 300ms — 180ms ideal |
| Pulido de producción (Jakub) | 200-500ms para suavidad |
| Creativo/infantil/lúdico (Jhey) | Lo que sirva al efecto |
No marques ni limites duraciones universalmente. Primero verifica la ponderación del contexto.
La Regla de Oro
"La mejor animación es la que pasa desapercibida."
Si los usuarios comentan "¡bonita animación!" en cada interacción, probablemente sea demasiado prominente para producción. (Excepción: apps infantiles y contextos lúdicos donde el deleite ES el objetivo.)
La Accesibilidad NO es Opcional
Toda animación — generada en modo Crear o revisada en modo Auditar — debe manejar prefers-reduced-motion. Sin excepciones. Ver references/accessibility.md.
Índice de Referencias
| Archivo | Contenidos | Cargar Cuando |
|---|---|---|
| Doce Principios | Los doce principios de Disney para UI y gráficos en movimiento: recetas de construcción y modos de fallo | Ambos modos (siempre) |
| Gráficos en Movimiento | Vídeo y gráficos en movimiento: temporización de fotogramas, vocabulario de cámara, fotogramas deterministas, arreglos | Vídeo, gráficos en movimiento o cualquier trabajo en línea de tiempo |
| Recetario de Motion | Todas las recetas de movimiento — entrada/salida, easing, resortes, clip-path, @property, FLIP, animaciones basadas en scroll | Modo Crear (siempre); modo Auditar para recomendaciones de implementación |
| Errores Comunes al Crear | Modos de fallo de Claude al escribir movimiento | Modo Crear (siempre) |
| Checklist de Auditoría | Lista de verificación sistemática de auditoría | Modo Auditar (siempre) |
| Anti-Checklist | Puerta de calidad — categorías de movimiento tipo IA-chatarra + antipatrones a marcar | Modo Auditar (siempre) |
| Emil Kowalski | Filosofía de contención, regla de frecuencia, marcos de decisión | Cualquier modo, si Emil está ponderado |
| Jakub Krehel | Filosofía de pulido de producción y marcos de decisión | Cualquier modo, si Jakub está ponderado |
| Jhey Tompkins | Filosofía de experimentación lúdica y marcos | Cualquier modo, si Jhey está ponderado |
| Accesibilidad | prefers-reduced-motion, seguridad vestibular | Ambos modos (obligatorio) |
| Rendimiento | Optimización de GPU, will-change, layout thrash | Cualquier modo, para animaciones complejas |
| Formato de Salida | Plantilla de informe de auditoría — modo HTML (por defecto) + modo terminal (bandera) | Solo modo Auditar |
| Shell de Demo | Plantilla de contenedor visual para tarjetas demo por hallazgo en el informe HTML | Modo Auditar, salida HTML |
Índice de Workflows
| Workflow | Propósito |
|---|---|
| Crear | Construir componentes interactivos con movimiento intencionado |
| Auditar | Revisar el diseño de movimiento existente, producir un informe por diseñador |