Movimiento y deleite: animate, delight, overdrive, onboard

En el capítulo 8 dimos a la interfaz su esqueleto visual: el ritmo del layout, la jerarquía del typeset y la intención cromática del colorize. Esa estructura es sólida, pero todavía está quieta. Una interfaz puede ser perfectamente legible y aun así sentirse muerta, plana, como una fotografía de un producto en lugar del producto en sí. Lo que separa una pantalla competente de una pantalla memorable casi siempre es lo mismo: el momento en que algo se mueve, responde o sorprende justo cuando debe.

Este capítulo cubre los cuatro comandos de Impeccable dedicados a esa capa de vida: animate para el movimiento con propósito, delight para los micro-detalles que arrancan una sonrisa, overdrive para empujar la expresividad hasta su extremo cuando el contexto lo permite, y onboard para el primer encuentro del usuario con el producto. Bajo todos ellos late un mismo conjunto de principios de diseño de interacción que conviene entender antes de invocar un solo comando. Recuerda que en Impeccable todos los comandos se invocan con la forma /impeccable <comando> <target> sobre un agente de coding como Claude Code.

Por qué el movimiento necesita reglas

El error más caro que comete un agente de IA cuando se le pide “animar” algo es animarlo todo. Aparecen transiciones en cada hover, rebotes en cada botón, desvanecimientos en cada cambio de estado. El resultado no es vida: es ruido. Impeccable parte de una premisa explícita que conviene memorizar:

“Recorta el movimiento que existe solo como decoración. La fatiga de animación es un costo real; gasta el presupuesto en los momentos que lo necesitan.”

La idea del presupuesto de movimiento (motion budget) es la columna vertebral de animate. No tienes movimiento infinito a tu disposición; tienes una cantidad limitada de atención del usuario, y cada animación la consume. Una experiencia bien orquestada vale más que animaciones dispersas por todas partes. Por eso, antes de decidir cómo animar, Impeccable te obliga a decidir si debes hacerlo.

El espectro de expresividad

Los cuatro comandos de este capítulo no son intercambiables: ocupan posiciones distintas en un mismo espectro, desde la contención funcional hasta la expresividad máxima.

flowchart LR
    A["Sin movimiento<br/>(quieter)"] --> B["animate<br/>movimiento con propósito"]
    B --> C["delight<br/>micro-momentos que sorprenden"]
    C --> D["onboard<br/>guía con personalidad"]
    D --> E["overdrive<br/>expresividad al máximo"]
    style A fill:#1f2937,color:#fff
    style B fill:#1e40af,color:#fff
    style C fill:#6d28d9,color:#fff
    style D fill:#9333ea,color:#fff
    style E fill:#db2777,color:#fff

Moverte hacia la derecha en este espectro aumenta el impacto, pero también el riesgo y el costo de rendimiento. La habilidad no está en llegar siempre al extremo, sino en saber dónde detenerse según el contexto. Un panel de administración financiera vive cómodamente en animate; una landing page de lanzamiento de producto puede justificar overdrive.

Los principios de diseño de interacción

Antes de los comandos de movimiento, conviene asentar la base que comparten todos: el archivo reference/interaction-design.md. Estos principios no producen animación por sí mismos, pero definen qué puede moverse y cómo debe responder cada elemento. Sin ellos, animar es maquillar una interacción rota.

Los ocho estados interactivos

Todo elemento interactivo debe contemplar ocho estados, no solo el de reposo. Olvidar alguno es la fuente más común de interfaces que se sienten a medio terminar.

Estado	Comportamiento esperado
Default	Estilo base en reposo
Hover	Elevación sutil y cambio de color (solo puntero, nunca en táctil)
Focus	Anillo visible para foco de teclado o programático
Active	Apariencia de presionado, estilo más oscuro
Disabled	Opacidad reducida, sin eventos de puntero
Loading	Spinner o pantalla esqueleto (skeleton)
Error	Borde rojo, icono y mensaje
Success	Check verde y confirmación

El principio clave es que hover y focus van siempre juntos. Diseñar el hover sin el focus deja fuera a quien navega con teclado, porque esa persona nunca encuentra el estado hover. El anillo de foco no se elimina jamás sin un reemplazo: usa :focus-visible, mantén un contraste mínimo de 3:1 contra los colores adyacentes, un grosor de 2 a 3px y colócalo desplazado del borde del elemento, no dentro.

Carga, feedback y reversibilidad

Tres ideas de interaction-design.md informan directamente a animate y delight:

• Las pantallas esqueleto superan a los spinners. Previsualizan la estructura del contenido y se sienten más rápidas que un indicador genérico que gira.
• Las actualizaciones optimistas muestran el éxito de inmediato y revierten si falla, pero solo para acciones de bajo riesgo (un like, un follow), nunca para transacciones financieras u operaciones destructivas.
• El undo supera a los diálogos de confirmación. Elimina el elemento de inmediato, muestra un toast con opción de deshacer y ejecuta el borrado al expirar. Reserva las confirmaciones para acciones verdaderamente irreversibles.

Estos principios explican por qué el movimiento en Impeccable nunca es solo estético: una animación de entrada de skeleton comunica “estoy trabajando”, un toast de undo que se desliza comunica “puedes arrepentirte”. El movimiento es funcional.

animate: movimiento con propósito

El comando animate aplica movimiento a una interfaz tratándolo como comunicación funcional, no como decoración. Su trabajo es responder a una pregunta antes de cada transición: ¿qué información transmite este movimiento? Si la respuesta es “ninguna”, el movimiento se recorta.

• Propósito: orquestar transiciones, estados y entradas con timing y easing correctos, respetando el presupuesto de movimiento.
• Target: un componente, una vista o un patrón concreto (por ejemplo un modal, un menú, una lista).
• Ejemplo de invocación:

/impeccable animate src/components/Dropdown.tsx

La regla de timing 100/300/500

Impeccable define una tabla de duraciones según el tipo de cambio que el movimiento representa. Memorízala: es la diferencia entre una interfaz que se siente ágil y una que se siente perezosa.

Duración	Aplicación
100–150ms	Feedback instantáneo (presión de botón, toggle, cambio de color)
200–300ms	Cambios de estado (apertura de menú, tooltip, hover)
300–500ms	Cambios de layout (acordeón, modal, drawer)
500–800ms	Animaciones de entrada (carga de página, revelado del hero)

Dos matices importantes: las animaciones de salida corren a aproximadamente el 75% de la duración de su entrada, porque retirar algo debe sentirse más rápido que presentarlo. Y existe un umbral de percepción: cualquier cosa por debajo de ~80ms se siente instantánea, porque nuestro cerebro almacena en buffer el estímulo sensorial durante ese lapso.

Curvas de easing: las que sí y las que no

Aquí está la regla que más a menudo distingue una animación moderna de una anticuada. Impeccable recomienda curvas de salida pronunciadas (ease-out) que arrancan rápido y desaceleran:

:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}

Y prohíbe explícitamente las curvas que “se sienten anticuadas y de mal gusto” (dated and tacky):

/* EVITAR: bounce y elastic */
--ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);

El rebote (bounce) y el elástico (elastic) fueron la firma estética de una época de animación web ya superada. Sobrepasan el valor final y vuelven, lo que llama la atención sobre la animación en lugar de sobre el contenido. Una interfaz contemporánea desacelera con elegancia, no rebota.

Qué propiedades animar

Nunca animes propiedades de layout a la ligera: width, height, top, left o los márgenes obligan al navegador a recalcular el diseño en cada frame. Usa transform y la técnica FLIP en su lugar, que el navegador compone en la GPU sin recalcular. Y, de forma no negociable, toda animación debe respetar prefers-reduced-motion con un estado alternativo sin movimiento. No es opcional: hay personas para quienes el movimiento provoca mareo o malestar real.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

delight: los detalles que sorprenden

Donde animate se ocupa del movimiento estructural, delight se ocupa de los micro-momentos: ese instante en que el producto demuestra que alguien lo cuidó. Su regla rectora es tan importante como la del presupuesto de movimiento:

“Añade deleite solo donde el momento lo merece; deleite en todas partes se lee como ruido.”

• Propósito: identificar los momentos que merecen una micro-interacción con personalidad y dotarlos de carácter sin estorbar la función.
• Target: un estado o flujo concreto donde el deleite aporte valor (un estado vacío, una confirmación de éxito, una recuperación de error).
• Ejemplo de invocación:

/impeccable delight src/components/EmptyInbox.tsx

Los momentos que merecen deleite

delight no reparte sorpresas al azar. Apunta a una lista concreta de momentos donde el carácter aporta:

• Estados de éxito (guardar, enviar, publicar).
• Estados vacíos y onboarding.
• Periodos de carga.
• Hitos de logro.
• Estados interactivos de hover y click.
• Recuperación de errores.
• Easter eggs.

Técnicas y personalidad de copy

El deleite no es solo animación. Una de sus herramientas más potentes es el copy con personalidad, ajustado al tono de marca: un mensaje de error que dice “Esta página está jugando a las escondidas” en lugar de un seco “404”; un estado vacío que anima en vez de regañar; un mensaje de carga específico del producto como “Procesando tus últimos números” en lugar del genérico “Cargando…”.

Entre las técnicas visuales y sensoriales: efectos de presión en botones (translateY y sombra), animaciones de ripple, trazado de checkmarks, ráfagas de confeti para hitos, iconos animados, partículas y, con mucha mesura, diseño de sonido (señales sutiles que respeten los ajustes del sistema y ofrezcan silenciar).

Las reglas críticas del deleite

El deleite mal calibrado se convierte en estorbo. Impeccable fija límites estrictos:

• Mantén los momentos de deleite por debajo de 1 segundo.
• Nunca retrases la funcionalidad principal por una animación.
• Haz las interacciones saltables (skippable).
• Prueba la accesibilidad (movimiento reducido, lectores de pantalla).
• Evita el copy clichudo que suena a IA genérica.
• Prioriza el rendimiento; comprime los assets.

Los anti-patrones que delight combate son el sobreuso, la interacción forzada, el mal timing, la degradación de rendimiento y el tono inapropiado para el contexto. Una factura electrónica no necesita confeti.

overdrive: la expresividad al máximo

overdrive es el extremo del espectro. Su misión es mejorar la experiencia aprovechando todas las capacidades del navegador para crear efectos que superan lo que el usuario espera de una interfaz web: datasets enormes manejados con fluidez, transiciones cinematográficas, optimizaciones de rendimiento invisibles pero perceptibles.

“Algo en la implementación va más allá de lo que los usuarios esperan de una interfaz web. La técnica sirve a la experiencia, no al revés.”

• Propósito: llevar la expresividad de una interfaz a su máximo cuando el contexto lo justifica, sin sacrificar el rendimiento ni la accesibilidad.
• Target: una vista de alto impacto donde el “wow” aporta valor real (una landing, un hero, una visualización de datos).
• Ejemplo de invocación:

/impeccable overdrive src/pages/landing.astro

El flujo de proponer antes de construir

overdrive es el único de estos comandos que impone un workflow de propuesta previa. Por su costo y su riesgo, no construye a ciegas:

sequenceDiagram
    participant U as Usuario
    participant I as overdrive
    participant B as Navegador
    I->>U: Presenta 2-3 enfoques con trade-offs
    U->>I: Elige dirección (AskUserQuestion)
    I->>B: Implementa la dirección confirmada
    B-->>I: Verifica resultado visual con automatización
    I->>U: Itera hasta lograr el efecto

Primero presenta dos o tres aproximaciones direccionales con sus compensaciones, usa la herramienta de pregunta para clarificar la preferencia, y solo entonces implementa. Luego itera verificando el resultado visual real en el navegador.

Qué cuenta como “extraordinario” según el contexto

Lo extraordinario no es lo mismo en todas las interfaces. overdrive adapta su definición:

Tipo de interfaz	Forma del “wow”	Ejemplos de técnica
Visual / marketing	Asombro sensorial	Revelados al scroll, fondos con shaders, transiciones cinematográficas
UI funcional	Asombro de sensación	Diálogos que se transforman (morphing), virtual scrolling, validación en streaming
Crítica en rendimiento	Invisible pero perceptible	Búsqueda no bloqueante, interacciones ininterrumpidas
Intensiva en datos	Fluidez	Renderizado acelerado por GPU, transiciones animadas, layouts de fuerza

El toolkit incluye la View Transitions API y @starting-style con física de springs, efectos guiados por scroll con animation-timeline: scroll() y fallback estático, WebGL/WebGPU/Canvas, @property para propiedades CSS animables, y Web Workers, OffscreenCanvas o WASM para mover trabajo pesado fuera del hilo principal.

Las reglas no negociables de overdrive

El poder de overdrive viene con límites firmes:

• Mejora progresiva con degradación elegante, siempre.
• Apunta a 60fps; simplifica si bajas de 50fps.
• Respeta prefers-reduced-motion de forma absoluta.
• Prueba en dispositivos de gama media, no solo en la máquina de desarrollo.
• Nunca despaches sin fallbacks funcionales para APIs de vanguardia.
• El foco crea impacto; el exceso crea ruido.

Y un límite de alcance clave: overdrive mejora cómo se siente una funcionalidad, no qué hace el producto. Colaboración en tiempo real, soporte offline o capacidades de backend quedan fuera de su ámbito. Antes de dar por bueno un efecto, aplica sus tests de verificación: el test del wow (¿reaccionan bien usuarios no familiarizados?), el de remoción (¿se siente diminuida la experiencia sin él?), el de dispositivo, el de accesibilidad (¿sigue siendo bello con movimiento reducido?) y el de contexto (¿es apropiado para la marca y la audiencia?).

onboard: el primer encuentro

onboard diseña la bienvenida. Su filosofía es contraintuitiva para muchos equipos, que confunden onboarding con un tutorial exhaustivo:

“Lleva a los usuarios al primer valor lo más rápido posible. El trabajo del onboarding no es enseñar el producto. Su trabajo es llevar a la gente al momento que prueba que el producto vale su tiempo.”

• Propósito: diseñar flujos de bienvenida que conduzcan al “aha moment” cuanto antes, sin ceremonia ni fricción.
• Target: un flujo de entrada, una pantalla de bienvenida o un estado vacío inicial.
• Ejemplo de invocación:

/impeccable onboard src/pages/welcome.astro

Los principios del onboarding

Principio	Aplicación
Mostrar, no contar	Ejemplos funcionales, funcionalidad real, divulgación progresiva
Hacerlo opcional	Opciones de saltar, sin bloquear el acceso
Tiempo al valor	Lidera con el 20% que entrega el 80% del valor
Contexto sobre ceremonia	Enseñar en el punto de uso, estados vacíos como aprendizaje
Respetar la inteligencia	Evitar el tono paternalista, asumir patrones conocidos

Un estado vacío bien diseñado, según onboard, no es una pantalla en blanco: describe el contenido futuro, explica su valor, ofrece una llamada a la acción clara, incluye un asset visual y enlaza a ayuda contextual. El propio estado vacío es una herramienta de onboarding.

Tours y descubrimiento de funciones

Cuando un tour guiado se justifica, las reglas son concretas: de 3 a 7 pasos máximo por tour, destacando elementos con spotlight, con opción de saltar obligatoria, replayable desde el menú de ayuda y preferentemente interactivo en vez de pasivo. El descubrimiento de funciones se hace con tooltips contextuales descartables, desbloqueo progresivo, anuncios con acceso “probar ahora” y badges en lo nuevo.

Las reglas “nunca” del onboarding

onboard es tajante sobre lo que jamás debe ocurrir: no fuerces a los usuarios a través de un onboarding largo antes de que puedan usar el producto, no muestres tooltips repetidamente, no bloquees toda la UI durante un tour, no crees modos tutorial desconectados de la app real, no abrumes con información por adelantado, no escondas la opción de saltar y no repitas el onboarding para usuarios que vuelven.

Cuándo sí y cuándo no usar movimiento y deleite

La pregunta no es “¿puedo animar esto?” sino “¿debo?”. Esta es la guía práctica que destila los cuatro comandos:

flowchart TD
    A["¿El movimiento transmite información<br/>o estado?"] -->|No| B["No animes:<br/>recorta el movimiento decorativo"]
    A -->|Sí| C["¿El momento merece carácter<br/>(éxito, vacío, error, hito)?"]
    C -->|No| D["animate: solo timing y easing correctos"]
    C -->|Sí| E["delight: micro-momento < 1s, saltable"]
    E --> F["¿El contexto justifica el máximo<br/>asombro (marketing, hero, datos)?"]
    F -->|No| G["Mantente en delight"]
    F -->|Sí| H["overdrive: propón, confirma, 60fps,<br/>fallback siempre"]

Usa movimiento y deleite cuando: el movimiento comunica un cambio de estado o de layout, el momento es de los que merecen carácter, hay presupuesto de atención disponible y el rendimiento lo permite con fallbacks.

No los uses cuando: el movimiento es solo decorativo, retrasaría la función principal, el usuario activó prefers-reduced-motion, el contexto es serio o financiero, o cuando ya hay demasiado pasando en pantalla. Recuerda siempre: una experiencia bien orquestada vence a animaciones dispersas en todas partes.

Tabla comparativa de los cuatro comandos

Comando	Propósito	Target típico	Posición en el espectro	Regla rectora
animate	Movimiento funcional con timing y easing correctos	Componente, vista, transición	Contención funcional	Presupuesto de movimiento: gasta donde se necesita
delight	Micro-momentos con personalidad	Estado vacío, éxito, error, hito	Expresividad media	Solo donde el momento lo merece; < 1s y saltable
onboard	Llevar al primer valor cuanto antes	Bienvenida, estado vacío inicial, tour	Guía con personalidad	El onboarding no enseña: lleva al aha moment
overdrive	Expresividad al máximo según contexto	Landing, hero, visualización de datos	Extremo del espectro	La técnica sirve a la experiencia; propón antes de construir

Resumen

El movimiento y el deleite son la capa que convierte una interfaz correcta en una memorable, pero solo cuando se aplican con disciplina. animate trata el movimiento como comunicación funcional, gobernado por el presupuesto de movimiento, la regla de timing 100/300/500 y curvas de easing ease-out (jamás bounce ni elastic). delight añade carácter en los momentos que lo merecen —éxitos, estados vacíos, errores, hitos— con micro-interacciones por debajo de un segundo, saltables y con copy de personalidad. overdrive lleva la expresividad a su extremo cuando el contexto lo justifica, siempre proponiendo antes de construir, apuntando a 60fps y con fallbacks no negociables. Y onboard diseña la bienvenida con un único norte: llevar al usuario al primer valor lo más rápido posible, sin ceremonia. Todos ellos descansan sobre los principios de interaction-design.md: los ocho estados interactivos, los anillos de foco, el feedback honesto y el respeto absoluto por prefers-reduced-motion. La maestría no está en animarlo todo, sino en saber exactamente dónde detenerse.

Siguiente: Contenido y adaptación: clarify, adapt, optimize