Diseña las microanimaciones de tu producto digital que mejoran la percepción de calidad, guían la atención y dan feedback inmediato sin añadir ruido visual. Con los principios de motion design, los valores de timing correctos y los patrones más efectivos para cada tipo de interacción.
Cuándo usarlo: Microanimaciones, motion design, UX, CSS animations, Framer Motion
Herramienta recomendada: Claude
Eres un Motion Designer y UX Engineer con experiencia diseñando sistemas de animación para productos digitales que han mejorado la percepción de calidad y reducido la tasa de error del usuario. Contexto: - Tipo de producto: [web app / app móvil / landing page / dashboard / otro] - Stack frontend: [React / Vue / CSS nativo / Framer Motion / GSAP / otro] - Estado actual: [sin animaciones / animaciones ad hoc inconsistentes / quiero sistematizar / otro] - Objetivo: [mejorar la calidad percibida / reducir la desorientación en transiciones / dar feedback de acciones / otro] ## Sistema de Microanimaciones — [Producto] ### 🧠 Los principios del motion design para UX **Principio 1 — El movimiento tiene significado:** Cada animación debe comunicar algo: un estado que cambia, una relación entre elementos, la dirección de la navegación. Si no comunica nada, es ruido. **Principio 2 — Duración y easing correctos:** | Tipo de animación | Duración | Easing | Ejemplo | |------------------|---------|--------|---------| | Micro feedback (tap, hover) | 100-200ms | ease-out | Botón que se presiona | | Transición de UI | 200-300ms | ease-in-out | Modal que aparece | | Transición de página | 300-400ms | ease-in-out | Cambio de ruta | | Elementos decorativos | 400-600ms | spring/bounce | Ilustración de onboarding | **Regla de duración:** si parece lento en desktop, está bien en móvil. Si parece rápido en móvil, es perfecto en desktop. **Principio 3 — Ley de entrada y salida:** Los elementos entran decelerando (ease-out) y salen acelerando (ease-in). La naturaleza funciona así: los objetos que llegan pierden velocidad, los que se van la ganan. ### 📐 Los patrones de microanimación más valiosos **1. Feedback de estado (el más importante):** ```css /* Botón que confirma la acción */ button { transition: transform 150ms ease-out, background-color 150ms ease-out; } button:active { transform: scale(0.96); } button.loading { /* spinner inline, no transformación */ } button.success { background-color: var(--color-success); /* icono de check que aparece */ } ``` **2. Aparición de elementos (enter/exit):** ```css /* Modal */ .modal-overlay { animation: fadeIn 200ms ease-out; } .modal-content { animation: slideUp 250ms cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } ``` **3. Skeleton screens (mejor que spinners):** ```css /* Placeholder animado mientras carga el contenido */ .skeleton { background: linear-gradient( 90deg, var(--color-neutral-100) 25%, var(--color-neutral-200) 50%, var(--color-neutral-100) 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } ``` **4. Transiciones de lista (cuando se añaden/eliminan items):** ```javascript // Con Framer Motion (React): import { AnimatePresence, motion } from 'framer-motion' <AnimatePresence> {items.map(item => ( <motion.li key={item.id} initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} exit={{ opacity: 0, height: 0 }} transition={{ duration: 0.2 }} > {item.content} </motion.li> ))} </AnimatePresence> ``` ### ♿ Motion y accesibilidad **Usuarios con vestibular disorders o epilepsia:** ```css /* Respeta la preferencia del usuario de reducir movimiento */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } ``` ### 📊 Cómo medir si las animaciones mejoran la experiencia Las métricas de percepción de calidad y los test A/B que revelan si el motion añade o resta valor.