# Motion Atlas

Biblioteca de efectos originales nativos, GSAP y Three.js para Next/React, Astro, WordPress y HTML.

Lee ANIMATION-STANDARD.md y animation-standard.json para conocer los requisitos y la selección de motores. Cada paquete incluye animation-contract.json con criterios pendientes de validar en el proyecto destino. Lee registry.json para descubrir efectos por categoría, moment, element y volume. Las referencias asociadas están en el manifiesto y en references.json. Lee registry.json para descubrir efectos. Cada effects/<id>/manifest.json declara archivos y opciones. Lee README.md antes de integrar. Descarga <id>.zip para obtener el código y adaptadores. No existe un paquete npm publicado.

- [Text reveal](effects/text-reveal/README.md): Aparición escalonada por palabras, preservando el texto accesible.
- [Image reveal](effects/image-reveal/README.md): Revelado con máscara y escala suave al entrar en pantalla.
- [Stagger grid](effects/stagger-grid/README.md): Secuencia de entrada para tarjetas o elementos de una cuadrícula.
- [Magnetic button](effects/magnetic-button/README.md): Botón que sigue sutilmente el puntero y vuelve a su posición.
- [Hover preview](effects/hover-preview/README.md): Una vista previa acompaña el puntero y también responde al foco.
- [Infinite marquee](effects/marquee/README.md): Banda continua con pausa al interactuar y alternativa sin movimiento.
- [Stacked cards](effects/stack-cards/README.md): Tarjetas que se apilan mediante posición sticky durante el scroll.
- [Fullscreen menu](effects/fullscreen-menu/README.md): Menú expandible con foco contenido, Escape y restauración del foco.
- [Perspective card](effects/tilt-card/README.md): Tarjeta con inclinación 3D. Sigue al puntero o responde al toque y al teclado.
- [Spotlight](effects/spotlight/README.md): Iluminación radial que sigue al puntero; un toque fija la luz y el teclado la mueve.
- [Decode text](effects/scramble-text/README.md): Texto que se descifra progresivamente, con una versión estable para lectores de pantalla.
- [Image comparison](effects/image-comparison/README.md): Comparador de imágenes con deslizador nativo accesible para ratón, toque y teclado.
- [Fluid accordion](effects/fluid-accordion/README.md): Acordeón semántico con transición de altura y controles nativos de teclado.
- [Ripple press](effects/ripple-button/README.md): Onda que nace en el punto de presión, también disponible con teclado.
- [Count up](effects/count-up/README.md): Contador progresivo al entrar en pantalla, con valor final accesible y formato localizado.
- [Pixel reveal](effects/pixel-reveal/README.md): Una cuadrícula se disuelve en una secuencia diagonal y descubre la composición.
- [Curtain intro](effects/curtain-intro/README.md): Una cortina tipográfica abre el escenario y descubre el contenido al entrar en pantalla.
- [Orbit loader](effects/orbit-loader/README.md): Un anillo traza su recorrido y se convierte en una confirmación de carga. Demo de duración finita.
- [Rolling label](effects/rolling-link/README.md): Dos capas de texto se relevan dentro de una máscara al tocar, enfocar o pasar el puntero.
- [Image shutters](effects/image-shutters/README.md): Cinco paneles se retiran en secuencia y revelan una portada editorial.
- [Gallery dissolve](effects/gallery-crossfade/README.md): Una galería cambia de imagen con disolución y escala; selección explícita mediante botones.
- [Sliding tabs](effects/animated-tabs/README.md): Un indicador se desplaza entre pestañas mientras el contenido cambia con entrada breve.
- [Page curtain](effects/page-transition/README.md): Una cortina cubre el escenario, cambia el contenido y se retira para revelar el siguiente estado.
- [Toast arrival](effects/toast-stack/README.md): Mensajes apilados con entrada, cierre y recolocación animada de sus vecinos.
- [Submit states](effects/submit-morph/README.md): Un botón pasa de disponible a procesando y confirmado con una transformación compacta.
- [Reading progress](effects/scroll-progress/README.md): Una línea sigue el avance real de lectura dentro de un artículo desplazable.
- [Horizontal chapters](effects/horizontal-story/README.md): Capítulos horizontales con scroll-snap nativo y avance explícito, sin capturar la rueda vertical.
- [Signature path](effects/svg-draw/README.md): Un trazado SVG se dibuja en pantalla: útil para diagramas, firmas gráficas y detalles de marca.
- [Reading highlight](effects/word-highlight/README.md): Un párrafo se ilumina de manera progresiva al desplazarte por su contenedor.
- [Field focus](effects/focus-field/README.md): Etiqueta flotante, línea de foco y ayuda contextual al escribir en un campo.
- [Step sequence](effects/step-progress/README.md): Un indicador acompaña tres estados y el contenido entra al avanzar o retroceder.
- [Quote exchange](effects/testimonial-swap/README.md): Opiniones cambian con disolución y desplazamiento breve mediante controles explícitos.
- [Filter rearrange](effects/filter-grid/README.md): Una cuadrícula se reorganiza al filtrar y anima el desplazamiento de las piezas que permanecen.
- [Price cadence](effects/price-toggle/README.md): El importe y su periodo cambian con una entrada breve cuando eliges otra modalidad.
- [Timeline arrival](effects/timeline-reveal/README.md): Hitos y una línea de conexión aparecen en secuencia al entrar en pantalla.
- [Accordion scene](effects/accordion-media/README.md): Un acordeón nativo cambia una escena visual asociada a cada capítulo abierto.

## GSAP y Three.js reales
Dependencias y versiones reales en cada manifest; los ZIP incluyen vendor/ y licencias. Copiar para IA incluye fuente; adjunta ZIP para las distribuciones oficiales.
- [Type choreography](effects/gsap-type-sequence/README.md)
- [Elastic action](effects/gsap-elastic-action/README.md)
- [Scroll chapters](effects/gsap-scroll-chapters/README.md)
- [Orbit sculpture](effects/three-orbit-object/README.md)
- [Particle field](effects/three-particle-field/README.md)
- [Wave surface](effects/three-wave-surface/README.md)

## Composiciones completas

Elige una composición para coordinar una página entera. Lee primero sus reglas, secciones y preset en manifest.json y README.md.
- [Editorial flow](compositions/editorial-flow/README.md): Preciso y contenido. Tipografía, imágenes y pausas. Un recorrido editorial que acompaña el contenido sin competir con él. Incluye detalle, contenido interior, opiniones y contacto.
- [Product narrative](compositions/product-flow/README.md): Enfocado y progresivo. Presenta un objeto, explica tres cualidades y termina en una decisión. El producto une todas las secciones. Incluye detalle, contenido interior, opiniones y contacto.
- [Portfolio rhythm](compositions/portfolio-rhythm/README.md): Gráfico y expresivo. Titulares grandes, proyectos que entran al desplazarte y una pausa manifiesto. Energía con una estructura clara. Incluye detalle, contenido interior, opiniones y contacto.
- [Slow atmosphere](compositions/slow-atmosphere/README.md): Calmo y inmersivo. Imágenes amplias, parallax suave y bloques de lectura pausados. Una composición para transmitir una sensación. Incluye detalle, contenido interior, opiniones y contacto.
- [Case study](compositions/case-study/README.md): Narrativo y preciso. Una composición de página interior: caso de estudio con contexto, proceso, aplicaciones y contacto.
- [Contact & studio](compositions/contact-flow/README.md): Editorial y funcional. Una composición de página interior: estudio, equipo, servicios, formulario y dudas.
- [Kinetic atelier](compositions/kinetic-story/README.md): Escultural y editorial. Un recorrido de ocho capítulos: timelines GSAP, imágenes con máscara y una escultura Three.js que gira al desplazarte. Proyectos, proceso, equipo y contacto comparten un ritmo.