RevanthThota55/FreeFrame-Studio

Vocabulario de Animación

Respuesta Inicial

Cuando este skill se invoque por primera vez sin una pregunta específica, responde únicamente con:

Estoy listo para ponerle nombre a cualquier efecto de movimiento que describas, mi conocimiento proviene de la filosofía de animación de Emil Kowalski.

No proporciones ninguna otra información hasta que el usuario haga una pregunta.

Convierte una descripción vaga de un movimiento o efecto en el término preciso, para que el usuario sepa qué pedir.

Inicio Rápido

El usuario describe un efecto de manera informal. Tú devuelves el/los término(s) coincidente(s) en este formato:

**Stagger** — Animar varios elementos uno tras otro con un pequeño retraso entre cada uno, creando una cascada.

Si varios términos podrían encajar, lista la mejor coincidencia primero, luego 1–2 alternativas con una nota de una línea sobre en qué se diferencian.

Instrucciones

1. Lee la intención, no las palabras clave. Los usuarios describen lo que ven o sienten («elástico», «se desliza», «se dibuja solo»), no el nombre técnico. Mapea la sensación al glosario de abajo.
2. Cita el glosario textualmente. Sus descripciones son autoritativas — úsalas tal cual, no las parafrasees.
3. Desambigua términos cercanos. Cuando dos compitan (Clip-path vs Máscara, Pop in vs Rebote, Transición de elemento compartido vs Animación de diseño), contrasta para que el usuario pueda elegir.
4. Cuando nada coincida exactamente, nombra el término más cercano y di claramente que es una aproximación, o describe el efecto con el vocabulario del glosario (ej. «eso es un stagger de entradas scale-in»).
5. Quédate dentro de este glosario. Si un término realmente no está aquí, dilo en lugar de inventar uno — aunque puedes explicar el concepto usando estas palabras.
6. Mantenlo breve. Una pregunta de nombre quiere un nombre, no un ensayo. Empieza con el término; amplía solo si te lo piden.

Ejemplos

Ejemplo 1 — basado en sensación Usuario: «¿Cómo se llama cuando un popover parece crecer desde el botón que hiciste clic en lugar de desde su centro?» Salida:

**Animación con origen consciente** — Un elemento se anima desde su disparador, como un popover que crece desde el botón que lo abrió en lugar de desde su propio centro que es el valor por defecto en CSS.

Ejemplo 2 — desambiguación Usuario: «Lo de que una imagen se convierte en otra imagen.» Salida:

**Morph** — Una forma se transforma suavemente en otra forma, p.ej. Dynamic Island.

Alternativas cercanas:
- **Crossfade** — si simplemente se desvanecen una sobre otra en el mismo lugar.
- **Transición de elemento compartido** — si un elemento viaja y se transforma de una posición a otra.

Ejemplo 3 — sensación física Usuario: «Ese scroll de iOS que resiste y rebota cuando tiras demasiado lejos.» Salida:

**Elasticidad (Rubber-banding)** — Resistencia y rebote cuando arrastras más allá de un límite (la sensación de sobredesplazamiento en iOS).

Glosario

Una instantánea curada que refleja la página /vocabulary del proyecto; mantén ambas sincronizadas cuando una cambie.

Entradas y Salidas — cómo aparecen y desaparecen los elementos

• Fade in / Fade out — El elemento aparece o desaparece cambiando la opacidad.
• Slide in — El elemento entra deslizándose desde fuera de la pantalla (izquierda, derecha, arriba o abajo).
• Scale in — El elemento crece de un tamaño menor a su tamaño completo al aparecer, a menudo acompañado de un fade.
• Pop in — El elemento aparece con un ligero sobrepaso, como si rebotara en su lugar.
• Revelar (Reveal) — El contenido se descubre gradualmente, a menudo animando un clip-path o una máscara.
• Entrar / Salir (Enter / Exit) — La animación que reproduce un elemento cuando se añade o se elimina de la pantalla.

Secuenciación y Temporización — coordinando múltiples elementos o momentos

• Keyframes — Puntos definidos en una animación (0%, 50%, 100%) que el navegador rellena entre ellos.
• Interpolación / Tween — Generar todos los fotogramas intermedios entre un valor inicial y final, para que el movimiento sea continuo.
• Stagger — Animar varios elementos uno tras otro con un pequeño retraso entre cada uno, creando una cascada.
• Orquestación — Temporizar deliberadamente múltiples animaciones para que se sientan como un movimiento coordinado.
• Retraso (Delay) — Tiempo antes de que empiece una animación.
• Duración (Duration) — Cuánto tiempo dura una animación.
• Modo de relleno (Fill mode) — Si un elemento mantiene los estilos de su primer o último fotograma antes de que la animación comience o después de que termine (ej. forwards).
• Animación escalonada (Stepped animation) — Una animación dividida en pasos discretos, como un contador regresivo.

Movimiento y Transformaciones — cambiar la posición, tamaño o ángulo de un elemento

• Trasladar (Translate) — Mover un elemento a lo largo del eje X o Y.
• Escalar (Scale) — Hacer un elemento más grande o más pequeño.
• Rotar (Rotate) — Girar un elemento alrededor de un punto.
• Sesgar (Skew) — Inclinar un elemento a lo largo del eje X o Y, deformándolo fuera de su forma rectangular.
• Inclinación 3D / Volteo (3D tilt / Flip) — Rotar en espacio 3D (rotateX / rotateY) para añadir profundidad.
• Perspectiva (Perspective) — Qué tan fuerte se ve el efecto 3D — un valor más bajo exagera la profundidad, como si el espectador estuviera más cerca.
• Origen de transformación (Transform origin) — El punto de anclaje desde el que crece o gira una escala o rotación.
• Animación con origen consciente (Origin-aware animation) — Un elemento se anima desde su disparador, como un popover que crece desde el botón que lo abrió en lugar de desde su propio centro que es el valor por defecto en CSS.

Transiciones entre Estados — conectando un estado, vista o elemento con otro

• Crossfade — Un elemento se desvanece mientras otro aparece en el mismo lugar.
• Transición de continuidad — Un cambio que mantiene al usuario orientado conectando visualmente el antes y el después. Por ejemplo, hacer el mismo rectángulo más grande y más pequeño.
• Morph — Una forma se transforma suavemente en otra forma, p.ej. Dynamic Island.
• Transición de elemento compartido (Shared element transition) — Un elemento viaja y se transforma de una posición a otra, como una miniatura expandiéndose en una tarjeta.
• Animación de diseño (Layout animation) — Cuando el tamaño o posición de un elemento cambia, se anima a la nueva ubicación en lugar de saltar.
• Acordeón / Colapsar (Accordion / Collapse) — Una sección expande y contrae su altura suavemente para mostrar u ocultar contenido.
• Transición consciente de dirección (Direction-aware transition) — El contenido se desliza en un sentido al avanzar y en el sentido opuesto al retroceder, dando a la navegación una sensación de dirección.

Scroll — movimiento ligado al desplazamiento o navegación entre vistas

• Revelar con scroll (Scroll reveal) — Los elementos aparecen o se deslizan al entrar en el viewport.
• Animación impulsada por scroll (Scroll-driven animation) — Una animación cuyo progreso está ligado directamente a la posición de scroll.
• Parallax — El fondo y el primer plano se mueven a diferentes velocidades al hacer scroll, creando profundidad.
• Transición de página (Page transition) — Una animación que se reproduce al navegar de una página o ruta a otra.
• Transición de vista (View transition) — El navegador transforma entre dos estados o páginas, conectando elementos compartidos.

Retroalimentación e Interacción — respondiendo a las acciones del usuario

• Efecto hover — Cambio visual cuando el cursor pasa sobre un elemento.
• Retroalimentación de presión/toque (Press / Tap feedback) — Una sutil reducción de escala cuando se hace clic en un elemento, para que se sienta físico.
• Mantener para confirmar (Hold to confirm) — Un efecto de progreso que se llena mientras el usuario mantiene presionado un botón.
• Arrastrar (Drag) — Mover un elemento agarrándolo, a menudo con inercia al soltarlo.
• Arrastrar para reordenar (Drag to reorder) — Arrastrar elementos en una lista para reordenarlos, mientras los demás se desplazan para hacer espacio.
• Deslizar para descartar (Swipe to dismiss) — Arrastrar un elemento fuera de la pantalla para cerrarlo, como un cajón o un toast.
• Elasticidad (Rubber-banding) — Resistencia y rebote cuando arrastras más allá de un límite (la sensación de sobredesplazamiento en iOS).
• Agitar / Moverse (Shake / Wiggle) — Una vibración rápida de lado a lado que señala un error o entrada rechazada.
• Onda (Ripple) — Un círculo que se expande desde el punto de un toque, confirmando la pulsación.

Easing — cómo cambia la velocidad durante una animación

• Easing — La velocidad a la que una animación acelera o desacelera.
• Ease-out — Empieza rápido, termina lento. El valor por defecto para la mayoría de la UI y cualquier cosa que responda al usuario.
• Ease-in — Empieza lento, termina rápido. Generalmente se evita; puede sentirse lento.
• Ease-in-out — Lento, rápido, lento. Bueno para elementos ya en pantalla que se mueven de A a B.
• Lineal (Linear) — Velocidad constante. Evitar para UI; reservar para spinners o marquesinas.
• Cubic-bezier — Una curva de easing personalizada que defines para un control preciso.
• Easing asimétrico (Asymmetric easing) — Una curva que acelera y desacelera a diferentes ritmos. Se siente más vivo que uno simétrico.

Animaciones Spring — movimiento basado en física como alternativa al easing de duración fija

• Spring — Movimiento impulsado por física (tensión, masa, amortiguación) en lugar de una duración fija.
• Rigidez / Tensión (Stiffness / Tension) — La fuerza con la que el muelle tira hacia su objetivo. Cuanto más alto, más rápido se siente.
• Amortiguación (Damping) — La rapidez con que se estabiliza un muelle. Una amortiguación más baja significa más rebotes y oscilación.
• Masa (Mass) — Lo pesado que se siente el elemento animado. Más masa lo hace más lento y pesado.
• Rebote (Bounce) — Un muelle que sobrepasa y se estabiliza, añadiendo alegría.
• Duración percibida (Perceptual duration) — Cuánto tiempo se siente que un muelle ha terminado, aunque siga micro-estabilizándose por debajo.
• Inercia (Momentum) — Movimiento que conserva velocidad, especialmente después de un arrastre o interrupción.
• Velocidad (Velocity) — La rapidez y dirección con que se mueve un elemento. Un muelle la lleva a la siguiente animación si se interrumpe, para que un elemento lanzado mantenga su velocidad.
• Animación interrumpible (Interruptible animation) — Una animación que puede redirigirse suavemente en pleno vuelo en lugar de terminar primero.

Bucle y Movimiento Ambiental — animaciones que se ejecutan solas

• Marquesina (Marquee) — Texto o contenido que se desplaza continuamente en bucle.
• Bucle (Loop) — Una animación que se repite, un número determinado de veces o infinitamente.
• Alternar (yoyo) — Un bucle que avanza y luego invierte cada iteración, en lugar de saltar al inicio.
• Órbita (Orbit) — Un elemento que gira alrededor de otro en una trayectoria continua.
• Pulso (Pulse) — Un cambio suave y repetitivo de escala u opacidad para llamar la atención.
• Flotar (Float) — Un suave y continuo movimiento de subida y bajada que hace que un elemento estático se sienta vivo y sin peso.
• Animación inactiva (Idle animation) — Movimiento sutil que se reproduce mientras un elemento está simplemente ahí, esperando ser interactuado.

Pulido y Efectos — los pequeños detalles que separan lo bueno de lo excelente

• Desenfoque (Blur) — Un filtro de desenfoque usado para suavizar un elemento o enmascarar pequeñas imperfecciones.
• Clip-path — Recortar un elemento a una forma, usado para revelados, máscaras y sliders de antes/después.
• Máscara (Mask) — Ocultar o revelar partes de un elemento usando una forma o gradiente — como clip-path, pero con bordes suaves y difuminables.
• Slider de antes/después — Un divisor arrastrable que barre entre dos imágenes superpuestas para compararlas.
• Dibujo de líneas (Line drawing) — Una trayectoria SVG que se dibuja a sí misma, como un lápiz invisible trazándola.
• Morfismo de texto (Text morph) — Texto que se anima carácter por carácter cuando cambia, atrayendo la atención al nuevo valor.
• Esqueleto / Destello (Skeleton / Shimmer) — Un marcador de posición con un brillo en movimiento que se muestra mientras se carga el contenido.
• Contador de números (Number ticker) — Dígitos que ruedan o cuentan hasta un valor.
• Números tabulares (Tabular numbers) — Dígitos de ancho fijo para que los números no se muevan al cambiar. Esencial para contadores, temporizadores y contadores.
• Máquina de escribir (Typewriter) — Texto que aparece un carácter a la vez, como si se estuviera escribiendo.

Rendimiento — lo que mantiene el movimiento fluido en lugar de entrecortado

• Fotogramas por segundo (FPS) — Fotogramas dibujados por segundo. 60fps es la línea base para movimiento suave; 120fps en pantallas más nuevas.
• Jank — Parpadeo visible cuando el navegador deja caer fotogramas porque no puede seguir el ritmo de la animación.
• Fotograma perdido (Dropped frame) — Un fotograma que el navegador no pudo dibujar a tiempo, causando un pequeño tropiezo en el movimiento.
• Composición (Compositing) — Dejar que la GPU mueva o desvanezca un elemento en su propia capa sin rehacer el diseño o la pintura.
• will-change — Una pista CSS de que un elemento está a punto de animarse, para que el navegador pueda promocionarlo a su propia capa antes de tiempo.
• Thrashing de diseño (Layout thrashing) — Animar propiedades como width, height, top o left que obligan al navegador a recalcular el diseño cada fotograma, causando jank.

Principios a Conocer — conceptos que guían cuándo y cómo animar

• Animación con propósito (Purposeful animation) — El movimiento debe servir a una función — orientar, dar retroalimentación, mostrar relaciones — no solo decorar.
• Anticipación (Anticipation) — Un pequeño movimiento de retroceso en la dirección opuesta antes de un movimiento, insinuando lo que está a punto de suceder.
• Seguimiento (Follow-through) — Partes de un elemento continúan moviéndose y se estabilizan ligeramente después de que el movimiento principal se detiene, añadiendo peso.
• Aplastar y estirar (Squash & stretch) — Deformar un elemento mientras se mueve para transmitir peso, velocidad y flexibilidad.
• Rendimiento percibido (Perceived performance) — La animación adecuada hace que una interfaz se sienta más rápida, incluso cuando no lo es.
• Frecuencia de uso — Cuanto más a menudo vea un usuario una animación, más corta y sutil debería ser.
• Consistencia espacial — Animar para que un elemento mantenga su identidad y posición a través de estados, para que los usuarios nunca pierdan el rastro de dónde fueron las cosas.
• Aceleración por hardware — Animar transform y opacity permite que la GPU mantenga el movimiento suave.
• Movimiento reducido — Respetar la configuración prefers-reduced-motion del usuario atenuando o eliminando el movimiento.