{ "name": "Motion Atlas", "version": "1.7.1", "effects": [ { "id": "text-reveal", "name": "Text reveal", "version": "1.2.0", "category": "Texto", "description": "Aparición escalonada por palabras, preservando el texto accesible.", "tags": [ "text", "stagger", "hero" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 }, "stagger": { "type": "number", "default": 80, "unit": "ms", "min": 0, "max": 400 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Entrada", "element": "Texto", "volume": 1, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Palabras que encuentran su ritmo.", "theme": "type", "html": "

Make it
move.

", "manifest": "effects/text-reveal/manifest.json", "docs": "effects/text-reveal/README.md", "download": "text-reveal.zip" }, { "id": "image-reveal", "name": "Image reveal", "version": "1.2.0", "category": "Imagen", "description": "Revelado con máscara y escala suave al entrar en pantalla.", "tags": [ "image", "mask", "scroll" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Entrada", "element": "Imagen", "volume": 1, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Una nueva perspectiva, capa a capa.", "theme": "image", "html": "
ATELIER
NO. 08Objects of tomorrow
", "manifest": "effects/image-reveal/manifest.json", "docs": "effects/image-reveal/README.md", "download": "image-reveal.zip" }, { "id": "stagger-grid", "name": "Stagger grid", "version": "1.2.0", "category": "Scroll", "description": "Secuencia de entrada para tarjetas o elementos de una cuadrícula.", "tags": [ "cards", "stagger", "scroll" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 }, "stagger": { "type": "number", "default": 80, "unit": "ms", "min": 0, "max": 400 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Scroll", "element": "Contenido", "volume": 1, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Un orden que se siente natural.", "theme": "grid", "html": "
01
02
03
04
05
06
", "manifest": "effects/stagger-grid/manifest.json", "docs": "effects/stagger-grid/README.md", "download": "stagger-grid.zip" }, { "id": "magnetic-button", "name": "Magnetic button", "version": "1.2.0", "category": "Interacción", "description": "Botón que sigue sutilmente el puntero y vuelve a su posición.", "tags": [ "hover", "button", "pointer" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": {}, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Interacción", "element": "Control", "volume": 1, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Una pequeña atracción.", "theme": "magnetic", "html": "", "manifest": "effects/magnetic-button/manifest.json", "docs": "effects/magnetic-button/README.md", "download": "magnetic-button.zip" }, { "id": "hover-preview", "name": "Hover preview", "version": "1.2.0", "category": "Interacción", "description": "Una vista previa acompaña el puntero y también responde al foco.", "tags": [ "hover", "image", "portfolio" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": {}, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Interacción", "element": "Control", "volume": 1, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Dale una imagen a cada idea.", "theme": "hover", "html": "", "manifest": "effects/hover-preview/manifest.json", "docs": "effects/hover-preview/README.md", "download": "hover-preview.zip" }, { "id": "marquee", "name": "Infinite marquee", "version": "1.2.0", "category": "Texto", "description": "Banda continua con pausa al interactuar y alternativa sin movimiento.", "tags": [ "text", "loop", "banner" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Entrada", "element": "Texto", "volume": 1, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Ideas que siguen en movimiento.", "theme": "marquee", "html": "
CREATE EXPLORE
", "manifest": "effects/marquee/manifest.json", "docs": "effects/marquee/README.md", "download": "marquee.zip" }, { "id": "stack-cards", "name": "Stacked cards", "version": "1.2.0", "category": "Scroll", "description": "Tarjetas que se apilan mediante posición sticky durante el scroll.", "tags": [ "scroll", "sticky", "cards" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": {}, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Scroll", "element": "Contenido", "volume": 1, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Historias que se superponen.", "theme": "stack", "html": "
01 Strategy.Start with a question
02 Design.Find a new perspective
03 Motion.Bring it to life
", "manifest": "effects/stack-cards/manifest.json", "docs": "effects/stack-cards/README.md", "download": "stack-cards.zip" }, { "id": "fullscreen-menu", "name": "Fullscreen menu", "version": "1.2.0", "category": "Navegación", "description": "Menú expandible con foco contenido, Escape y restauración del foco.", "tags": [ "menu", "navigation", "overlay" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Navegación", "element": "Navegación", "volume": 1, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Una entrada con personalidad.", "theme": "menu", "html": "", "manifest": "effects/fullscreen-menu/manifest.json", "docs": "effects/fullscreen-menu/README.md", "download": "fullscreen-menu.zip" }, { "id": "tilt-card", "name": "Perspective card", "version": "1.2.0", "category": "Interacción", "description": "Tarjeta con inclinación 3D. Sigue al puntero o responde al toque y al teclado.", "tags": [ "3d", "tilt", "hover", "touch" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": {}, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Interacción", "element": "Control", "volume": 2, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Un objeto con otra dimensión.", "theme": "tilt", "html": "", "manifest": "effects/tilt-card/manifest.json", "docs": "effects/tilt-card/README.md", "download": "tilt-card.zip" }, { "id": "spotlight", "name": "Spotlight", "version": "1.2.0", "category": "Interacción", "description": "Iluminación radial que sigue al puntero; un toque fija la luz y el teclado la mueve.", "tags": [ "light", "hover", "pointer", "touch" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": {}, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Interacción", "element": "Control", "volume": 2, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "La luz sigue a tu curiosidad.", "theme": "spotlight", "html": "", "manifest": "effects/spotlight/manifest.json", "docs": "effects/spotlight/README.md", "download": "spotlight.zip" }, { "id": "scramble-text", "name": "Decode text", "version": "1.2.0", "category": "Texto", "description": "Texto que se descifra progresivamente, con una versión estable para lectores de pantalla.", "tags": [ "text", "scramble", "decode" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Entrada", "element": "Texto", "volume": 2, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Del ruido a una idea clara.", "theme": "scramble", "html": "
TRANSMISSION 011BEYOND.BEYOND.
", "manifest": "effects/scramble-text/manifest.json", "docs": "effects/scramble-text/README.md", "download": "scramble-text.zip" }, { "id": "image-comparison", "name": "Image comparison", "version": "1.2.0", "category": "Imagen", "description": "Comparador de imágenes con deslizador nativo accesible para ratón, toque y teclado.", "tags": [ "image", "slider", "before", "after", "touch" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": {}, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Interacción", "element": "Imagen", "volume": 2, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Dos estados. Un solo gesto.", "theme": "comparison", "html": "
ORIGINALCOLOR GRADE
", "manifest": "effects/image-comparison/manifest.json", "docs": "effects/image-comparison/README.md", "download": "image-comparison.zip" }, { "id": "fluid-accordion", "name": "Fluid accordion", "version": "1.2.0", "category": "Navegación", "description": "Acordeón semántico con transición de altura y controles nativos de teclado.", "tags": [ "accordion", "height", "navigation", "touch" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Navegación", "element": "Navegación", "volume": 2, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Espacio que se adapta a la historia.", "theme": "accordion", "html": "
01 The idea
Every great interaction begins with a small, unexpected detail.
02 The process
Explore, experiment and refine. Make something worth feeling.
03 The result
A little less ordinary. A little more alive.
", "manifest": "effects/fluid-accordion/manifest.json", "docs": "effects/fluid-accordion/README.md", "download": "fluid-accordion.zip" }, { "id": "ripple-button", "name": "Ripple press", "version": "1.2.0", "category": "Interacción", "description": "Onda que nace en el punto de presión, también disponible con teclado.", "tags": [ "button", "ripple", "press", "touch" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Interacción", "element": "Control", "volume": 2, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Cada toque deja su huella.", "theme": "ripple", "html": "", "manifest": "effects/ripple-button/manifest.json", "docs": "effects/ripple-button/README.md", "download": "ripple-button.zip" }, { "id": "count-up", "name": "Count up", "version": "1.2.0", "category": "Texto", "description": "Contador progresivo al entrar en pantalla, con valor final accesible y formato localizado.", "tags": [ "number", "counter", "scroll" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Entrada", "element": "Texto", "volume": 2, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Números que cuentan algo.", "theme": "counter", "html": "
IDEAS IN MOTION1.2801.280 ideas en movimiento

Small details. Bigger possibilities.

", "manifest": "effects/count-up/manifest.json", "docs": "effects/count-up/README.md", "download": "count-up.zip" }, { "id": "pixel-reveal", "name": "Pixel reveal", "version": "1.2.0", "category": "Imagen", "description": "Una cuadrícula se disuelve en una secuencia diagonal y descubre la composición.", "tags": [ "image", "pixel", "reveal", "stagger" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Entrada", "element": "Imagen", "volume": 2, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Una imagen, fragmento a fragmento.", "theme": "pixel", "html": "
NEW
PERSPECTIVES.
", "manifest": "effects/pixel-reveal/manifest.json", "docs": "effects/pixel-reveal/README.md", "download": "pixel-reveal.zip" }, { "id": "curtain-intro", "name": "Curtain intro", "version": "1.2.0", "category": "Carga", "description": "Una cortina tipográfica abre el escenario y descubre el contenido al entrar en pantalla.", "tags": [ "entrada", "hero", "curtain-intro" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Entrada", "element": "Hero", "hint": "Repite para abrir la cortina", "references": [ { "id": "azzerad", "name": "Azzerad Studios", "url": "https://www.awwwards.com/sites/azzerad-studios", "award": "SOTD · 14 enero 2022", "pattern": "La ficha destaca una animación de carga y la presentación de proyectos.", "application": "Punto de partida conceptual para entradas y galerías; ejecución propia." } ], "volume": 3, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "La primera impresión, en dos tiempos.", "theme": "intro", "html": "
INDEPENDENT OBJECTSEveryday.
Extraordinary.COLLECTION / 026
FORME®
", "manifest": "effects/curtain-intro/manifest.json", "docs": "effects/curtain-intro/README.md", "download": "curtain-intro.zip" }, { "id": "orbit-loader", "name": "Orbit loader", "version": "1.2.0", "category": "Carga", "description": "Un anillo traza su recorrido y se convierte en una confirmación de carga. Demo de duración finita.", "tags": [ "carga", "indicador", "orbit-loader" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Carga", "element": "Indicador", "hint": "Repite para ver carga y confirmación", "references": [ { "id": "azzerad", "name": "Azzerad Studios", "url": "https://www.awwwards.com/sites/azzerad-studios", "award": "SOTD · 14 enero 2022", "pattern": "La ficha destaca una animación de carga y la presentación de proyectos.", "application": "Punto de partida conceptual para entradas y galerías; ejecución propia." } ], "volume": 3, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Una espera con principio y final.", "theme": "orbit", "html": "
ListoLOAD / REVEAL
SECUENCIA DEMOSTRATIVA
", "manifest": "effects/orbit-loader/manifest.json", "docs": "effects/orbit-loader/README.md", "download": "orbit-loader.zip" }, { "id": "rolling-link", "name": "Rolling label", "version": "1.2.0", "category": "Texto", "description": "Dos capas de texto se relevan dentro de una máscara al tocar, enfocar o pasar el puntero.", "tags": [ "interacción", "enlace", "rolling-link" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Interacción", "element": "Enlace", "hint": "Toca o enfoca la palabra", "references": [ { "id": "women", "name": "Designed by Women", "url": "https://www.awwwards.com/sites/designed-by-women", "award": "SOTD · 4 enero 2021", "pattern": "La ficha incluye revelado de imagen al interactuar y navegación inferior.", "application": "Referencia de relación entre contenido visual y controles, con alternativa táctil." } ], "volume": 3, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Una palabra toma el relevo.", "theme": "rolling", "html": "
A SMALL CHANGE OF PERSPECTIVE

TOCA / ENFOCA / EXPLORA

", "manifest": "effects/rolling-link/manifest.json", "docs": "effects/rolling-link/README.md", "download": "rolling-link.zip" }, { "id": "image-shutters", "name": "Image shutters", "version": "1.2.0", "category": "Imagen", "description": "Cinco paneles se retiran en secuencia y revelan una portada editorial.", "tags": [ "entrada", "portada", "image-shutters" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Entrada", "element": "Portada", "hint": "Repite para retirar los paneles", "references": [ { "id": "azzerad", "name": "Azzerad Studios", "url": "https://www.awwwards.com/sites/azzerad-studios", "award": "SOTD · 14 enero 2022", "pattern": "La ficha destaca una animación de carga y la presentación de proyectos.", "application": "Punto de partida conceptual para entradas y galerías; ejecución propia." }, { "id": "women", "name": "Designed by Women", "url": "https://www.awwwards.com/sites/designed-by-women", "award": "SOTD · 4 enero 2021", "pattern": "La ficha incluye revelado de imagen al interactuar y navegación inferior.", "application": "Referencia de relación entre contenido visual y controles, con alternativa táctil." } ], "volume": 3, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "La imagen se descubre por franjas.", "theme": "shutters", "html": "
VISUAL RESEARCH / 021NEW
PERSPECTIVES.
", "manifest": "effects/image-shutters/manifest.json", "docs": "effects/image-shutters/README.md", "download": "image-shutters.zip" }, { "id": "gallery-crossfade", "name": "Gallery dissolve", "version": "1.2.0", "category": "Imagen", "description": "Una galería cambia de imagen con disolución y escala; selección explícita mediante botones.", "tags": [ "interacción", "galería", "gallery-crossfade" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Interacción", "element": "Galería", "hint": "Elige una portada", "references": [ { "id": "azzerad", "name": "Azzerad Studios", "url": "https://www.awwwards.com/sites/azzerad-studios", "award": "SOTD · 14 enero 2022", "pattern": "La ficha destaca una animación de carga y la presentación de proyectos.", "application": "Punto de partida conceptual para entradas y galerías; ejecución propia." }, { "id": "women", "name": "Designed by Women", "url": "https://www.awwwards.com/sites/designed-by-women", "award": "SOTD · 4 enero 2021", "pattern": "La ficha incluye revelado de imagen al interactuar y navegación inferior.", "application": "Referencia de relación entre contenido visual y controles, con alternativa táctil." } ], "volume": 3, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Tres miradas, un mismo encuadre.", "theme": "gallery", "html": "
01 / MATTER
02 / LIGHT
03 / SPACE
", "manifest": "effects/gallery-crossfade/manifest.json", "docs": "effects/gallery-crossfade/README.md", "download": "gallery-crossfade.zip" }, { "id": "animated-tabs", "name": "Sliding tabs", "version": "1.2.0", "category": "Navegación", "description": "Un indicador se desplaza entre pestañas mientras el contenido cambia con entrada breve.", "tags": [ "navegación", "pestañas", "animated-tabs" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Navegación", "element": "Pestañas", "hint": "Toca una pestaña o usa las flechas", "references": [], "volume": 3, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "La selección tiene continuidad.", "theme": "tabs", "html": "
01 / INTENCIÓNMake it
mean something.
02 / DIRECCIÓNGive it
another shape.
03 / MOVIMIENTOLet it
find its rhythm.
", "manifest": "effects/animated-tabs/manifest.json", "docs": "effects/animated-tabs/README.md", "download": "animated-tabs.zip" }, { "id": "page-transition", "name": "Page curtain", "version": "1.2.0", "category": "Navegación", "description": "Una cortina cubre el escenario, cambia el contenido y se retira para revelar el siguiente estado.", "tags": [ "navegación", "página", "page-transition" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Navegación", "element": "Página", "hint": "Toca Cambiar escena", "references": [ { "id": "aurel", "name": "Aurel’s Grand Theater", "url": "https://www.awwwards.com/sites/aurels-grand-theater", "award": "SOTD · 12 mayo 2025", "pattern": "Sus elementos documentan transiciones de página, navegación y animación de scroll.", "application": "Referencia de continuidad entre estados; aquí se traduce a un escenario DOM ligero.", "elementUrl": "https://www.awwwards.com/inspiration/cursor-trail-aurels-grand-theater" } ], "volume": 3, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Una pausa entre dos mundos.", "theme": "transition", "html": "
STUDIO / CHAPTER 01Common
ground.
STUDIO / CHAPTER 02New
territory.
NEXT CHAPTER
", "manifest": "effects/page-transition/manifest.json", "docs": "effects/page-transition/README.md", "download": "page-transition.zip" }, { "id": "toast-stack", "name": "Toast arrival", "version": "1.2.0", "category": "Estado", "description": "Mensajes apilados con entrada, cierre y recolocación animada de sus vecinos.", "tags": [ "respuesta", "notificación", "toast-stack" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Respuesta", "element": "Notificación", "hint": "Añade y cierra confirmaciones", "references": [], "volume": 3, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Una confirmación que encuentra su sitio.", "theme": "toast", "html": "
FEEDBACK / WITHOUT THE NOISE
", "manifest": "effects/toast-stack/manifest.json", "docs": "effects/toast-stack/README.md", "download": "toast-stack.zip" }, { "id": "submit-morph", "name": "Submit states", "version": "1.2.0", "category": "Estado", "description": "Un botón pasa de disponible a procesando y confirmado con una transformación compacta.", "tags": [ "respuesta", "botón", "submit-morph" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Respuesta", "element": "Botón", "hint": "Simula envío y vuelve a empezar", "references": [], "volume": 3, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "La acción también tiene un después.", "theme": "submit", "html": "
AN ACTION. A RESPONSE.

Demo local · no envía datos

", "manifest": "effects/submit-morph/manifest.json", "docs": "effects/submit-morph/README.md", "download": "submit-morph.zip" }, { "id": "scroll-progress", "name": "Reading progress", "version": "1.2.0", "category": "Scroll", "description": "Una línea sigue el avance real de lectura dentro de un artículo desplazable.", "tags": [ "scroll", "artículo", "scroll-progress" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": {}, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Scroll", "element": "Artículo", "hint": "Desliza dentro del artículo", "references": [], "volume": 3, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "El recorrido se vuelve visible.", "theme": "reading", "html": "
FIELD NOTES / 0280%
THE ART OF PAYING ATTENTION

Less noise.
More meaning.

Una página también es una secuencia de pausas. El espacio deja respirar a las ideas y el movimiento señala el siguiente paso.

Una intención clara reúne los detalles. La tipografía, el ritmo y la imagen trabajan con un mismo propósito.

El final de una lectura no necesita interrumpirte. Basta una pequeña señal de cuánto has recorrido.

", "manifest": "effects/scroll-progress/manifest.json", "docs": "effects/scroll-progress/README.md", "download": "scroll-progress.zip" }, { "id": "horizontal-story", "name": "Horizontal chapters", "version": "1.2.0", "category": "Scroll", "description": "Capítulos horizontales con scroll-snap nativo y avance explícito, sin capturar la rueda vertical.", "tags": [ "scroll", "carrusel", "horizontal-story" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": {}, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Scroll", "element": "Carrusel", "hint": "Desliza lateralmente o pulsa Siguiente", "references": [ { "id": "storybook", "name": "My Little Storybook", "url": "https://www.awwwards.com/sites/my-little-storybook", "award": "SOTD · 24 noviembre 2021", "pattern": "La ficha destaca narrativa inmersiva y una interacción de botón con sonido.", "application": "Referencia narrativa para capítulos; estos efectos no reproducen audio ni utilizan su tecnología 3D." } ], "volume": 3, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Una historia que se recorre con la mano.", "theme": "horizontal", "html": "
01 / DISCOVERFind
the spark.
02 / EXPLOREChange
the angle.
03 / CREATEMake
it happen.
DESLIZA PARA EXPLORAR
", "manifest": "effects/horizontal-story/manifest.json", "docs": "effects/horizontal-story/README.md", "download": "horizontal-story.zip" }, { "id": "svg-draw", "name": "Signature path", "version": "1.2.0", "category": "Gráfico", "description": "Un trazado SVG se dibuja en pantalla: útil para diagramas, firmas gráficas y detalles de marca.", "tags": [ "entrada", "svg", "svg-draw" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Entrada", "element": "SVG", "hint": "Repite para dibujar el trazo", "references": [], "volume": 3, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Una línea encuentra su forma.", "theme": "drawing", "html": "
A LINE BECOMES AN IDEA.Drawn to
the unexpected.
", "manifest": "effects/svg-draw/manifest.json", "docs": "effects/svg-draw/README.md", "download": "svg-draw.zip" }, { "id": "word-highlight", "name": "Reading highlight", "version": "1.2.0", "category": "Texto", "description": "Un párrafo se ilumina de manera progresiva al desplazarte por su contenedor.", "tags": [ "scroll", "párrafo", "word-highlight" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": {}, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Scroll", "element": "Párrafo", "hint": "Desliza dentro del texto", "references": [], "volume": 4, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Las palabras siguen el recorrido.", "theme": "wordfill", "html": "
READ BETWEEN THE LINES

El movimiento tiene sentido cuando acompaña una idea. Cada palabra encuentra su momento y cada pausa abre espacio para lo que viene.

DESLIZA PARA COMPLETAR LA LECTURA
", "manifest": "effects/word-highlight/manifest.json", "docs": "effects/word-highlight/README.md", "download": "word-highlight.zip" }, { "id": "focus-field", "name": "Field focus", "version": "1.2.0", "category": "Interacción", "description": "Etiqueta flotante, línea de foco y ayuda contextual al escribir en un campo.", "tags": [ "interacción", "campo", "focus-field" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": {}, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Interacción", "element": "Campo", "hint": "Enfoca y escribe en el campo", "references": [], "volume": 4, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Un campo responde a la atención.", "theme": "field", "html": "
START WITH A CONVERSATION

Escribe para ver cómo se adapta la etiqueta.

", "manifest": "effects/focus-field/manifest.json", "docs": "effects/focus-field/README.md", "download": "focus-field.zip" }, { "id": "step-progress", "name": "Step sequence", "version": "1.2.0", "category": "Navegación", "description": "Un indicador acompaña tres estados y el contenido entra al avanzar o retroceder.", "tags": [ "navegación", "proceso", "step-progress" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Navegación", "element": "Proceso", "hint": "Avanza y retrocede entre los pasos", "references": [], "volume": 4, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Un proceso, paso a paso.", "theme": "steps", "html": "
  1. 01
  2. 02
  3. 03
01 / DESCUBRIR

Encuentra
la idea.

02 / EXPLORAR

Dale
una forma.

03 / CREAR

Hazla
realidad.

", "manifest": "effects/step-progress/manifest.json", "docs": "effects/step-progress/README.md", "download": "step-progress.zip" }, { "id": "testimonial-swap", "name": "Quote exchange", "version": "1.2.0", "category": "Texto", "description": "Opiniones cambian con disolución y desplazamiento breve mediante controles explícitos.", "tags": [ "interacción", "testimonio", "testimonial-swap" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Interacción", "element": "Testimonio", "hint": "Cambia de opinión con 01 y 02", "references": [], "volume": 4, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Una voz da paso a otra.", "theme": "quotes", "html": "
«Cada detalle
tenía una razón.»

Opinión ficticia / 01

«La idea encontró
su propia voz.»

Opinión ficticia / 02

", "manifest": "effects/testimonial-swap/manifest.json", "docs": "effects/testimonial-swap/README.md", "download": "testimonial-swap.zip" }, { "id": "filter-grid", "name": "Filter rearrange", "version": "1.2.0", "category": "Interacción", "description": "Una cuadrícula se reorganiza al filtrar y anima el desplazamiento de las piezas que permanecen.", "tags": [ "interacción", "cuadrícula", "filter-grid" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Interacción", "element": "Cuadrícula", "hint": "Filtra los proyectos por tipo", "references": [], "volume": 4, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Las piezas encuentran otro orden.", "theme": "filtering", "html": "
01FORM
02FLOW
03MATTER
04SPACE
05FEEL
06SHIFT
", "manifest": "effects/filter-grid/manifest.json", "docs": "effects/filter-grid/README.md", "download": "filter-grid.zip" }, { "id": "price-toggle", "name": "Price cadence", "version": "1.2.0", "category": "Estado", "description": "El importe y su periodo cambian con una entrada breve cuando eliges otra modalidad.", "tags": [ "respuesta", "precio", "price-toggle" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Respuesta", "element": "Precio", "hint": "Cambia entre mensual y anual", "references": [], "volume": 4, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Un cambio de plan que se entiende.", "theme": "pricing", "html": "
90€ / mes

Ejemplo de precio ficticio · mensual

", "manifest": "effects/price-toggle/manifest.json", "docs": "effects/price-toggle/README.md", "download": "price-toggle.zip" }, { "id": "timeline-reveal", "name": "Timeline arrival", "version": "1.2.0", "category": "Scroll", "description": "Hitos y una línea de conexión aparecen en secuencia al entrar en pantalla.", "tags": [ "entrada", "línea de tiempo", "timeline-reveal" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Entrada", "element": "Línea de tiempo", "hint": "Repite para desplegar los hitos", "references": [], "volume": 4, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Un proceso se despliega con ritmo.", "theme": "timeline", "html": "
01

Escuchar

Encontrar la pregunta.

02

Explorar

Dar espacio a la idea.

03

Crear

Llevarla al detalle.

", "manifest": "effects/timeline-reveal/manifest.json", "docs": "effects/timeline-reveal/README.md", "download": "timeline-reveal.zip" }, { "id": "accordion-media", "name": "Accordion scene", "version": "1.2.0", "category": "Imagen", "description": "Un acordeón nativo cambia una escena visual asociada a cada capítulo abierto.", "tags": [ "interacción", "acordeón visual", "accordion-media" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 700, "unit": "ms", "min": 100, "max": 3000 } }, "files": [ "core.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT", "reducedMotion": true, "moment": "Interacción", "element": "Acordeón visual", "hint": "Abre un capítulo para cambiar la escena", "references": [], "volume": 4, "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "tagline": "Cada capítulo trae una nueva mirada.", "theme": "mediachapters", "html": "
01 / Materia

La textura da carácter.

02 / Forma

La proporción encuentra equilibrio.

03 / Luz

Una nueva perspectiva.

", "manifest": "effects/accordion-media/manifest.json", "docs": "effects/accordion-media/README.md", "download": "accordion-media.zip" }, { "id": "gsap-type-sequence", "name": "Type choreography", "category": "Texto", "description": "Timeline GSAP coordina líneas, sello y pie con solapamiento y una curva compartida.", "moment": "Entrada", "element": "Titular + sello", "hint": "Repite para ver la timeline", "version": "1.0.1", "volume": 5, "tags": [ "gsap", "intro", "timeline" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [ { "package": "gsap", "version": "3.15.0", "license": "GSAP Standard No Charge", "url": "https://gsap.com/standard-license/", "reviewed": "2026-10-13" } ], "entry": "effect.js", "stylesheet": "effect.css", "options": { "duration": { "type": "number", "default": 900, "min": 100, "max": 3000, "unit": "ms" } }, "files": [ "core.js", "runtime.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "vendor/gsap.js", "vendor/gsap-core.js", "vendor/CSSPlugin.js", "vendor/ScrollTrigger.js", "vendor/Observer.js", "vendor/GSAP-LICENSE.txt", "vendor/provenance.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT (source); see vendor licenses", "reducedMotion": true, "references": [], "engine": { "id": "gsap", "label": "GSAP + ScrollTrigger", "requiredPackages": [ { "package": "gsap", "version": "3.15.0", "license": "GSAP Standard No Charge", "url": "https://gsap.com/standard-license/", "reviewed": "2026-10-13" } ], "reason": "Timeline GSAP coordina líneas, sello y pie con solapamiento y una curva compartida." }, "aiFiles": [ "runtime.js" ], "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "tagline": "Una entrada, tres tiempos.", "html": "

BEYONDordinary.

✺

Una idea. Una secuencia. Un mismo pulso.

", "theme": "tech", "manifest": "effects/gsap-type-sequence/manifest.json", "docs": "effects/gsap-type-sequence/README.md", "download": "gsap-type-sequence.zip" }, { "id": "gsap-elastic-action", "name": "Elastic action", "category": "Interacción", "description": "Hover y foco expanden el fondo. El click comprime el botón y dispara un retorno elástico con GSAP.", "moment": "Interacción", "element": "Botón", "hint": "Hover, foco y click / toca", "version": "1.0.1", "volume": 5, "tags": [ "gsap", "button", "timeline" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [ { "package": "gsap", "version": "3.15.0", "license": "GSAP Standard No Charge", "url": "https://gsap.com/standard-license/", "reviewed": "2026-10-13" } ], "entry": "effect.js", "stylesheet": "effect.css", "options": {}, "files": [ "core.js", "runtime.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "vendor/gsap.js", "vendor/gsap-core.js", "vendor/CSSPlugin.js", "vendor/ScrollTrigger.js", "vendor/Observer.js", "vendor/GSAP-LICENSE.txt", "vendor/provenance.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT (source); see vendor licenses", "reducedMotion": true, "references": [], "engine": { "id": "gsap", "label": "GSAP + ScrollTrigger", "requiredPackages": [ { "package": "gsap", "version": "3.15.0", "license": "GSAP Standard No Charge", "url": "https://gsap.com/standard-license/", "reviewed": "2026-10-13" } ], "reason": "Hover y foco expanden el fondo. El click comprime el botón y dispara un retorno elástico con GSAP." }, "aiFiles": [ "runtime.js" ], "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "tagline": "Una respuesta con tacto.", "html": "

Prueba el gesto · demo sin envío

", "theme": "tech", "manifest": "effects/gsap-elastic-action/manifest.json", "docs": "effects/gsap-elastic-action/README.md", "download": "gsap-elastic-action.zip" }, { "id": "gsap-scroll-chapters", "name": "Scroll chapters", "category": "Scroll", "description": "Tres capítulos con entradas, rotación scrub y progreso sincronizados con ScrollTrigger dentro de un scroll nativo.", "moment": "Scroll", "element": "Secciones", "hint": "Desliza dentro del recorrido", "version": "1.0.1", "volume": 5, "tags": [ "gsap", "scroll", "timeline" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [ { "package": "gsap", "version": "3.15.0", "license": "GSAP Standard No Charge", "url": "https://gsap.com/standard-license/", "reviewed": "2026-10-13" } ], "entry": "effect.js", "stylesheet": "effect.css", "options": {}, "files": [ "core.js", "runtime.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "vendor/gsap.js", "vendor/gsap-core.js", "vendor/CSSPlugin.js", "vendor/ScrollTrigger.js", "vendor/Observer.js", "vendor/GSAP-LICENSE.txt", "vendor/provenance.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT (source); see vendor licenses", "reducedMotion": true, "references": [], "engine": { "id": "gsap", "label": "GSAP + ScrollTrigger", "requiredPackages": [ { "package": "gsap", "version": "3.15.0", "license": "GSAP Standard No Charge", "url": "https://gsap.com/standard-license/", "reviewed": "2026-10-13" } ], "reason": "Tres capítulos con entradas, rotación scrub y progreso sincronizados con ScrollTrigger dentro de un scroll nativo." }, "aiFiles": [ "runtime.js" ], "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "tagline": "El movimiento cuenta una historia.", "html": "
01 / IDEA

Start with
a feeling.

Scroll para descubrir la secuencia.

02 / FORMA

Find
the shape.

La geometría sigue tu recorrido.

03 / DETALLE

Make it
matter.

Cada capítulo conserva el mismo ritmo.

", "theme": "tech", "manifest": "effects/gsap-scroll-chapters/manifest.json", "docs": "effects/gsap-scroll-chapters/README.md", "download": "gsap-scroll-chapters.zip" }, { "id": "three-orbit-object", "name": "Orbit sculpture", "category": "Gráfico", "description": "Tres toros con geometría, cámara, iluminación y material metálico reales de Three.js. Gira con cursor o botón.", "moment": "Interacción", "element": "Objeto 3D", "hint": "Mueve el cursor / pulsa Girar", "version": "1.0.1", "volume": 5, "tags": [ "three", "sculpture", "webgl" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [ { "package": "three", "version": "0.186.1", "license": "MIT", "url": "https://github.com/mrdoob/three.js/blob/dev/LICENSE", "reviewed": "2026-10-13" } ], "entry": "effect.js", "stylesheet": "effect.css", "options": {}, "files": [ "core.js", "runtime.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "vendor/three.module.js", "vendor/three.core.js", "vendor/THREE-LICENSE.txt", "vendor/provenance.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT (source); see vendor licenses", "reducedMotion": true, "references": [], "engine": { "id": "three", "label": "Three.js / WebGL", "requiredPackages": [ { "package": "three", "version": "0.186.1", "license": "MIT", "url": "https://github.com/mrdoob/three.js/blob/dev/LICENSE", "reviewed": "2026-10-13" } ], "reason": "Tres toros con geometría, cámara, iluminación y material metálico reales de Three.js. Gira con cursor o botón." }, "aiFiles": [ "runtime.js" ], "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "tagline": "Materia que cambia de mirada.", "html": "
Estudio de forma
", "theme": "tech", "manifest": "effects/three-orbit-object/manifest.json", "docs": "effects/three-orbit-object/README.md", "download": "three-orbit-object.zip" }, { "id": "three-particle-field", "name": "Particle field", "category": "Gráfico", "description": "Nube determinista de puntos en profundidad. Responde al cursor; usa menos partículas en móvil.", "moment": "Interacción", "element": "Partículas 3D", "hint": "Explora el campo / pulsa Girar", "version": "1.0.1", "volume": 5, "tags": [ "three", "particles", "webgl" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [ { "package": "three", "version": "0.186.1", "license": "MIT", "url": "https://github.com/mrdoob/three.js/blob/dev/LICENSE", "reviewed": "2026-10-13" } ], "entry": "effect.js", "stylesheet": "effect.css", "options": {}, "files": [ "core.js", "runtime.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "vendor/three.module.js", "vendor/three.core.js", "vendor/THREE-LICENSE.txt", "vendor/provenance.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT (source); see vendor licenses", "reducedMotion": true, "references": [], "engine": { "id": "three", "label": "Three.js / WebGL", "requiredPackages": [ { "package": "three", "version": "0.186.1", "license": "MIT", "url": "https://github.com/mrdoob/three.js/blob/dev/LICENSE", "reviewed": "2026-10-13" } ], "reason": "Nube determinista de puntos en profundidad. Responde al cursor; usa menos partículas en móvil." }, "aiFiles": [ "runtime.js" ], "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "tagline": "Un campo de pequeñas posibilidades.", "html": "
Estudio de forma
", "theme": "tech", "manifest": "effects/three-particle-field/manifest.json", "docs": "effects/three-particle-field/README.md", "download": "three-particle-field.zip" }, { "id": "three-wave-surface", "name": "Wave surface", "category": "Gráfico", "description": "Shader GLSL de vértices y fragmentos deforma una malla de Three.js con ondas y el punto de interacción.", "moment": "Interacción", "element": "Shader WebGL", "hint": "Mueve el cursor / pausa la onda", "version": "1.0.1", "volume": 5, "tags": [ "three", "surface", "webgl" ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [ { "package": "three", "version": "0.186.1", "license": "MIT", "url": "https://github.com/mrdoob/three.js/blob/dev/LICENSE", "reviewed": "2026-10-13" } ], "entry": "effect.js", "stylesheet": "effect.css", "options": {}, "files": [ "core.js", "runtime.js", "effect.js", "effect.d.ts", "effect.css", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "example.html", "README.md", "manifest.json", "vendor/three.module.js", "vendor/three.core.js", "vendor/THREE-LICENSE.txt", "vendor/provenance.json", "ANIMATION-STANDARD.md", "animation-contract.json" ], "license": "MIT (source); see vendor licenses", "reducedMotion": true, "references": [], "engine": { "id": "three", "label": "Three.js / WebGL", "requiredPackages": [ { "package": "three", "version": "0.186.1", "license": "MIT", "url": "https://github.com/mrdoob/three.js/blob/dev/LICENSE", "reviewed": "2026-10-13" } ], "reason": "Shader GLSL de vértices y fragmentos deforma una malla de Three.js con ondas y el punto de interacción." }, "aiFiles": [ "runtime.js" ], "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "tagline": "Una superficie que respira.", "html": "
Estudio de forma
", "theme": "tech", "manifest": "effects/three-wave-surface/manifest.json", "docs": "effects/three-wave-surface/README.md", "download": "three-wave-surface.zip" } ], "compositions": [ { "id": "editorial-flow", "name": "Editorial flow", "kind": "Estudio / marca", "mood": "Preciso y contenido", "description": "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.", "duration": 850, "stagger": 85, "distance": 60, "intensity": "Media", "rules": [ "Usa una sola curva de salida para titulares, fichas e imágenes.", "Reserva la máscara para imágenes; el texto entra por desplazamiento corto.", "Anima cada bloque una sola vez. No añadas cursores, rebotes ni marquesinas a esta composición.", "En móvil la escena pasa a flujo vertical y conserva un giro de menor amplitud." ], "type": "composition", "version": "1.2.2", "interactions": [ { "id": "work", "label": "Portadas y enlaces" }, { "id": "voices", "label": "Cambiar opiniones" }, { "id": "contact", "label": "Botones y campos" } ], "assets": [ { "file": "assets/portfolio.webp", "alt": "Composición de packaging terracota, papel y una pieza verde", "width": 1536, "height": 1024, "generated": true }, { "file": "assets/studio.webp", "alt": "Atelier con mesa de travertino, cerámica y luz natural", "width": 1536, "height": 1024, "generated": true } ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "files": [ "engine.js", "engine.d.ts", "interactions.js", "composition.css", "content.html", "content.js", "content.d.ts", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "index.html", "demo.css", "demo.js", "tour.js", "ready.js", "README.md", "manifest.json", "LICENSE", "IMAGE-PROMPTS.md", "assets/portfolio.webp", "assets/studio.webp", "ANIMATION-STANDARD.md", "animation-contract.json" ], "sections": [ { "id": "top", "title": "Una entrada con jerarquía", "movement": "Primero el titular; después el contexto y el enlace. Entrada vertical y opacidad, una sola curva." }, { "id": "work", "title": "Proyectos con espacio", "movement": "Máscara de imagen y aparición escalonada de las fichas. Mantén el mismo intervalo entre elementos." }, { "id": "story", "title": "Una historia que permanece", "movement": "La pieza visual queda fija en escritorio mientras pasan tres ideas; su rotación y escala avanzan con el scroll." }, { "id": "case", "title": "Dentro del proyecto", "movement": "Una foto se revela con máscara; los datos y la narrativa entran con el preset." }, { "id": "team", "title": "El equipo", "movement": "Tarjetas de perfiles en secuencia, con una pausa para leer." }, { "id": "voices", "title": "Una voz externa", "movement": "Opiniones de ejemplo cambian con disolución al tocar los controles." }, { "id": "contact", "title": "Iniciar una conversación", "movement": "Campos con foco claro y confirmación animada de una simulación local." }, { "id": "end", "title": "Un cierre limpio", "movement": "Un único bloque de texto y acción. La página recupera la calma." } ], "preset": { "durationMs": 850, "staggerMs": 85, "distancePx": 60, "easing": "cubic-bezier(.22,1,.36,1)", "intensityOptions": [ "subtle", "original", "expressive" ], "nativeScroll": true }, "mobile": "Una columna a ≤600px; sin pinning. Mantiene revelados, giros locales y parallax reducido.", "reducedMotion": "Contenido visible; sin entradas animadas, parallax ni escenas sticky.", "license": "MIT", "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "color": "#e2c6a9", "brand": "forma.", "preview": "compositions/editorial-flow/index.html", "docs": "compositions/editorial-flow/README.md", "manifest": "compositions/editorial-flow/manifest.json", "download": "editorial-flow-composition.zip" }, { "id": "product-flow", "name": "Product narrative", "kind": "Producto / lanzamiento", "mood": "Enfocado y progresivo", "description": "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.", "duration": 950, "stagger": 100, "distance": 65, "intensity": "Media", "rules": [ "El producto es el único elemento con rotación ligada al scroll.", "Mantén la duración de las entradas dentro del preset; no aceleres cada tarjeta por separado.", "Presenta un argumento por capítulo, con espacio de lectura antes del siguiente.", "En móvil el objeto conserva su giro al entrar en pantalla y los argumentos pasan a flujo natural." ], "type": "composition", "version": "1.2.2", "interactions": [ { "id": "detail", "label": "Zoom de producto" }, { "id": "questions", "label": "Abrir acordeones" }, { "id": "contact", "label": "Botones y campos" } ], "assets": [ { "file": "assets/product.webp", "alt": "Altavoz conceptual azul oscuro sobre una base de piedra", "width": 1536, "height": 1024, "generated": true }, { "file": "assets/studio.webp", "alt": "Atelier con mesa de travertino, cerámica y luz natural", "width": 1536, "height": 1024, "generated": true } ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "files": [ "engine.js", "engine.d.ts", "interactions.js", "composition.css", "content.html", "content.js", "content.d.ts", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "index.html", "demo.css", "demo.js", "tour.js", "ready.js", "README.md", "manifest.json", "LICENSE", "IMAGE-PROMPTS.md", "assets/product.webp", "assets/studio.webp", "ANIMATION-STANDARD.md", "animation-contract.json" ], "sections": [ { "id": "top", "title": "El producto primero", "movement": "Una entrada breve presenta promesa y objeto antes de mostrar los detalles." }, { "id": "story", "title": "Tres razones, una escena", "movement": "El objeto permanece visible en escritorio y gira con el avance. Las explicaciones entran por capítulos." }, { "id": "features", "title": "Lectura en secuencia", "movement": "Beneficios con el mismo ritmo de aparición y sin competir con el objeto central." }, { "id": "detail", "title": "Detalle de producto", "movement": "Foto de producto con máscara y ficha técnica en secuencia." }, { "id": "use", "title": "En contexto", "movement": "Una escena editorial aparece con una máscara y un relato paralelo." }, { "id": "questions", "title": "Resolver dudas", "movement": "Acordeón semántico con transición de entrada del contenido." }, { "id": "contact", "title": "La siguiente conversación", "movement": "Formulario con respuesta local y sin proceso de compra." }, { "id": "end", "title": "De explorar a actuar", "movement": "Un cierre de alto contraste y una acción final sin efectos adicionales." } ], "preset": { "durationMs": 950, "staggerMs": 100, "distancePx": 65, "easing": "cubic-bezier(.22,1,.36,1)", "intensityOptions": [ "subtle", "original", "expressive" ], "nativeScroll": true }, "mobile": "Una columna a ≤600px; sin pinning. Mantiene revelados, giros locales y parallax reducido.", "reducedMotion": "Contenido visible; sin entradas animadas, parallax ni escenas sticky.", "license": "MIT", "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "color": "#c4cfe7", "brand": "nōma.", "preview": "compositions/product-flow/index.html", "docs": "compositions/product-flow/README.md", "manifest": "compositions/product-flow/manifest.json", "download": "product-flow-composition.zip" }, { "id": "portfolio-rhythm", "name": "Portfolio rhythm", "kind": "Portfolio / agencia", "mood": "Gráfico y expresivo", "description": "Titulares grandes, proyectos que entran al desplazarte y una pausa manifiesto. Energía con una estructura clara. Incluye detalle, contenido interior, opiniones y contacto.", "duration": 650, "stagger": 65, "distance": 80, "intensity": "Alta", "rules": [ "Alterna composición de proyectos, no estilos de animación.", "Usa el acento cromático para jerarquía; coordina las entradas, la banda tipográfica y el revelado del manifiesto.", "Evita animar el contenido mientras el usuario está leyéndolo.", "En móvil los proyectos forman una columna y conservan su orden editorial." ], "type": "composition", "version": "1.2.2", "interactions": [ { "id": "work", "label": "Portadas y enlaces" }, { "id": "voices", "label": "Cambiar opiniones" }, { "id": "contact", "label": "Botones y campos" } ], "assets": [ { "file": "assets/portfolio.webp", "alt": "Composición de packaging terracota, papel y una pieza verde", "width": 1536, "height": 1024, "generated": true }, { "file": "assets/studio.webp", "alt": "Atelier con mesa de travertino, cerámica y luz natural", "width": 1536, "height": 1024, "generated": true }, { "file": "assets/product.webp", "alt": "Altavoz conceptual azul oscuro sobre una base de piedra", "width": 1536, "height": 1024, "generated": true } ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "files": [ "engine.js", "engine.d.ts", "interactions.js", "composition.css", "content.html", "content.js", "content.d.ts", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "index.html", "demo.css", "demo.js", "tour.js", "ready.js", "README.md", "manifest.json", "LICENSE", "IMAGE-PROMPTS.md", "assets/portfolio.webp", "assets/studio.webp", "assets/product.webp", "ANIMATION-STANDARD.md", "animation-contract.json" ], "sections": [ { "id": "top", "title": "Una declaración", "movement": "El titular se revela por líneas; una banda tipográfica se desplaza con el scroll." }, { "id": "work", "title": "La obra lleva el ritmo", "movement": "Las portadas se revelan con máscara; los títulos entran con la misma curva. La cuadrícula alterna alturas." }, { "id": "manifesto", "title": "Una pausa tipográfica", "movement": "El manifiesto ocupa su propio espacio, con líneas que ganan opacidad conforme avanza el scroll." }, { "id": "case", "title": "De portada a caso", "movement": "Una portada fotográfica se abre hacia estrategia y aplicaciones." }, { "id": "process", "title": "Cómo llegamos aquí", "movement": "Hitos del proyecto aparecen escalonados con el mismo ritmo." }, { "id": "voices", "title": "La respuesta", "movement": "Testimonio ficticio con cambio animado al interactuar." }, { "id": "contact", "title": "Una nueva colaboración", "movement": "Formulario con foco y confirmación de estado." }, { "id": "end", "title": "Invitación final", "movement": "Cierre visualmente fuerte con una única acción." } ], "preset": { "durationMs": 650, "staggerMs": 65, "distancePx": 80, "easing": "cubic-bezier(.22,1,.36,1)", "intensityOptions": [ "subtle", "original", "expressive" ], "nativeScroll": true }, "mobile": "Una columna a ≤600px; sin pinning. Mantiene revelados, giros locales y parallax reducido.", "reducedMotion": "Contenido visible; sin entradas animadas, parallax ni escenas sticky.", "license": "MIT", "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "color": "#27372e", "brand": "OFFSET®", "preview": "compositions/portfolio-rhythm/index.html", "docs": "compositions/portfolio-rhythm/README.md", "manifest": "compositions/portfolio-rhythm/manifest.json", "download": "portfolio-rhythm-composition.zip" }, { "id": "slow-atmosphere", "name": "Slow atmosphere", "kind": "Hospitalidad / lifestyle", "mood": "Calmo y inmersivo", "description": "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.", "duration": 1150, "stagger": 130, "distance": 35, "intensity": "Baja", "rules": [ "Mantén amplitudes cortas y duraciones lentas. No añadas giros ni rebotes.", "Usa parallax únicamente en imágenes decorativas, nunca en texto o controles.", "Deja márgenes amplios y pausas de lectura entre capítulos.", "El móvil conserva las entradas y reduce la amplitud del parallax." ], "type": "composition", "version": "1.2.2", "interactions": [ { "id": "voices", "label": "Cambiar opiniones" }, { "id": "questions", "label": "Abrir acordeones" }, { "id": "contact", "label": "Botones y campos" } ], "assets": [ { "file": "assets/retreat.webp", "alt": "Refugio de piedra y madera frente a un valle de montaña", "width": 1672, "height": 941, "generated": true }, { "file": "assets/suite.webp", "alt": "Suite con textiles naturales y ventana hacia las montañas", "width": 1536, "height": 1024, "generated": true } ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "files": [ "engine.js", "engine.d.ts", "interactions.js", "composition.css", "content.html", "content.js", "content.d.ts", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "index.html", "demo.css", "demo.js", "tour.js", "ready.js", "README.md", "manifest.json", "LICENSE", "IMAGE-PROMPTS.md", "assets/retreat.webp", "assets/suite.webp", "ANIMATION-STANDARD.md", "animation-contract.json" ], "sections": [ { "id": "top", "title": "Entrar en el lugar", "movement": "La imagen abre el recorrido; el texto aparece con una entrada de baja amplitud." }, { "id": "place", "title": "Descubrir despacio", "movement": "Imagen y relato alternan. El parallax acompaña a las ilustraciones con menor amplitud en móvil." }, { "id": "moments", "title": "Pequeños capítulos", "movement": "Tres escenas aparecen con el mismo intervalo; cada descripción permanece quieta." }, { "id": "stay", "title": "Dentro de la estancia", "movement": "Fotografía de suite, detalles de confort y entrada pausada." }, { "id": "voices", "title": "Recuerdos de una visita", "movement": "Relatos ficticios cambian a demanda con una disolución suave." }, { "id": "questions", "title": "Antes del viaje", "movement": "Información en acordeones semánticos sin alterar el scroll." }, { "id": "contact", "title": "Consultar una estancia", "movement": "Formulario accesible con confirmación de demo, conservando la cadencia." }, { "id": "end", "title": "Una última pausa", "movement": "Cierre de una sola idea y un enlace, conservando la cadencia del inicio." } ], "preset": { "durationMs": 1150, "staggerMs": 130, "distancePx": 35, "easing": "cubic-bezier(.22,1,.36,1)", "intensityOptions": [ "subtle", "original", "expressive" ], "nativeScroll": true }, "mobile": "Una columna a ≤600px; sin pinning. Mantiene revelados, giros locales y parallax reducido.", "reducedMotion": "Contenido visible; sin entradas animadas, parallax ni escenas sticky.", "license": "MIT", "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "color": "#789078", "brand": "senda", "preview": "compositions/slow-atmosphere/index.html", "docs": "compositions/slow-atmosphere/README.md", "manifest": "compositions/slow-atmosphere/manifest.json", "download": "slow-atmosphere-composition.zip" }, { "id": "case-study", "name": "Case study", "kind": "Detalle / caso de estudio", "mood": "Narrativo y preciso", "description": "Una composición de página interior: caso de estudio con contexto, proceso, aplicaciones y contacto.", "duration": 800, "stagger": 85, "distance": 48, "intensity": "Media", "rules": [ "Conserva el orden de lectura y la misma curva de movimiento.", "Reserva las máscaras para fotografías y los desplazamientos para entradas.", "El contenido ficticio y las opiniones deben sustituirse antes de publicar para un cliente.", "La confirmación del formulario es local; conecta una API para envío real." ], "type": "composition", "version": "1.2.2", "interactions": [ { "id": "voices", "label": "Cambiar opiniones" }, { "id": "contact", "label": "Botones y campos" } ], "assets": [ { "file": "assets/portfolio.webp", "alt": "Composición de packaging terracota, papel y una pieza verde", "width": 1536, "height": 1024, "generated": true }, { "file": "assets/studio.webp", "alt": "Atelier con mesa de travertino, cerámica y luz natural", "width": 1536, "height": 1024, "generated": true } ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "files": [ "engine.js", "engine.d.ts", "interactions.js", "composition.css", "content.html", "content.js", "content.d.ts", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "index.html", "demo.css", "demo.js", "tour.js", "ready.js", "README.md", "manifest.json", "LICENSE", "IMAGE-PROMPTS.md", "assets/portfolio.webp", "assets/studio.webp", "ANIMATION-STANDARD.md", "animation-contract.json" ], "sections": [ { "id": "top", "title": "El proyecto", "movement": "Título por líneas y portada fotográfica con máscara." }, { "id": "brief", "title": "Contexto y encargo", "movement": "Texto y ficha de proyecto con entradas coordinadas." }, { "id": "process", "title": "El proceso", "movement": "Una secuencia de hitos despliega la historia del trabajo." }, { "id": "applications", "title": "Las aplicaciones", "movement": "Fotografía y sistema de aplicaciones con máscaras." }, { "id": "voices", "title": "La respuesta", "movement": "Cambio de opiniones con controles explícitos." }, { "id": "contact", "title": "Siguiente proyecto", "movement": "Formulario y transición de confirmación local." }, { "id": "end", "title": "Cierre", "movement": "Una acción final con el ritmo del conjunto." } ], "preset": { "durationMs": 800, "staggerMs": 85, "distancePx": 48, "easing": "cubic-bezier(.22,1,.36,1)", "intensityOptions": [ "subtle", "original", "expressive" ], "nativeScroll": true }, "mobile": "Una columna a ≤600px; sin pinning. Mantiene revelados, giros locales y parallax reducido.", "reducedMotion": "Contenido visible; sin entradas animadas, parallax ni escenas sticky.", "license": "MIT", "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "color": "#26392f", "brand": "OFFSET®", "preview": "compositions/case-study/index.html", "docs": "compositions/case-study/README.md", "manifest": "compositions/case-study/manifest.json", "download": "case-study-composition.zip" }, { "id": "contact-flow", "name": "Contact & studio", "kind": "Contacto / estudio", "mood": "Editorial y funcional", "description": "Una composición de página interior: estudio, equipo, servicios, formulario y dudas.", "duration": 800, "stagger": 85, "distance": 48, "intensity": "Media", "rules": [ "Conserva el orden de lectura y la misma curva de movimiento.", "Reserva las máscaras para fotografías y los desplazamientos para entradas.", "El contenido ficticio y las opiniones deben sustituirse antes de publicar para un cliente.", "La confirmación del formulario es local; conecta una API para envío real." ], "type": "composition", "version": "1.2.2", "interactions": [ { "id": "services", "label": "Explorar servicios" }, { "id": "contact", "label": "Botones y campos" }, { "id": "questions", "label": "Abrir acordeones" } ], "assets": [ { "file": "assets/studio.webp", "alt": "Atelier con mesa de travertino, cerámica y luz natural", "width": 1536, "height": 1024, "generated": true } ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [], "files": [ "engine.js", "engine.d.ts", "interactions.js", "composition.css", "content.html", "content.js", "content.d.ts", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "index.html", "demo.css", "demo.js", "tour.js", "ready.js", "README.md", "manifest.json", "LICENSE", "IMAGE-PROMPTS.md", "assets/studio.webp", "ANIMATION-STANDARD.md", "animation-contract.json" ], "sections": [ { "id": "top", "title": "Una invitación", "movement": "Título por líneas y una imagen editorial del estudio." }, { "id": "team", "title": "Quién está detrás", "movement": "Perfiles ficticios en secuencia." }, { "id": "services", "title": "Cómo podemos ayudar", "movement": "Servicios en acordeones nativos con entrada animada." }, { "id": "contact", "title": "Tu mensaje", "movement": "Campos, validación nativa y confirmación local." }, { "id": "questions", "title": "Antes de empezar", "movement": "Respuestas claras con expansión accesible." }, { "id": "end", "title": "Cierre", "movement": "Una acción final con el ritmo del conjunto." } ], "preset": { "durationMs": 800, "staggerMs": 85, "distancePx": 48, "easing": "cubic-bezier(.22,1,.36,1)", "intensityOptions": [ "subtle", "original", "expressive" ], "nativeScroll": true }, "mobile": "Una columna a ≤600px; sin pinning. Mantiene revelados, giros locales y parallax reducido.", "reducedMotion": "Contenido visible; sin entradas animadas, parallax ni escenas sticky.", "license": "MIT", "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "native", "label": "CSS + JavaScript nativo", "requiredPackages": [], "reason": "El recorrido y las interacciones se resuelven con APIs del navegador." }, "color": "#d8c5ae", "brand": "forma.", "preview": "compositions/contact-flow/index.html", "docs": "compositions/contact-flow/README.md", "manifest": "compositions/contact-flow/manifest.json", "download": "contact-flow-composition.zip" }, { "id": "kinetic-story", "name": "Kinetic atelier", "kind": "GSAP + Three.js / estudio", "mood": "Escultural y editorial", "description": "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.", "duration": 850, "stagger": 85, "distance": 36, "intensity": "Media", "rules": [ "GSAP coordina entradas de .85 s con power3.out; titular por líneas cada .14 s y secuencias cada .085 s.", "Three.js controla únicamente la escultura; GSAP anima un proxy de progreso, sin competir por propiedades DOM.", "El scroll sigue siendo nativo: sin captura, smooth scroll global ni pinning por JavaScript.", "En móvil la escena vuelve al flujo, baja DPR y mantiene giro por botón; movimiento reducido muestra una pose estática.", "Mantén el orden de ocho capítulos, imágenes y pausas de lectura.", "Los controles de contacto y opiniones son demos locales, sin envío." ], "type": "composition", "version": "1.2.2", "interactions": [ { "id": "story", "label": "Girar o pausar la escultura 3D" }, { "id": "work", "label": "Portadas y enlaces" }, { "id": "voices", "label": "Cambiar opiniones" }, { "id": "contact", "label": "Botones y campos" } ], "assets": [ { "file": "assets/portfolio.webp", "alt": "Composición de packaging terracota, papel y una pieza verde", "width": 1536, "height": 1024, "generated": true }, { "file": "assets/studio.webp", "alt": "Atelier con mesa de travertino, cerámica y luz natural", "width": 1536, "height": 1024, "generated": true } ], "frameworks": [ "next", "astro", "wordpress", "vanilla" ], "dependencies": [ { "package": "gsap", "version": "3.15.0", "license": "GSAP Standard No Charge", "url": "https://gsap.com/standard-license/", "reviewed": "2026-10-13" }, { "package": "three", "version": "0.186.1", "license": "MIT", "url": "https://github.com/mrdoob/three.js/blob/dev/LICENSE", "reviewed": "2026-10-13" } ], "files": [ "engine.js", "engine.d.ts", "interactions.js", "composition.css", "content.html", "content.js", "content.d.ts", "react.tsx", "astro.astro", "wordpress.js", "motion-atlas.php", "index.html", "demo.css", "demo.js", "tour.js", "ready.js", "README.md", "manifest.json", "LICENSE", "IMAGE-PROMPTS.md", "assets/portfolio.webp", "assets/studio.webp", "ANIMATION-STANDARD.md", "animation-contract.json", "three-runtime.js", "vendor/gsap.js", "vendor/gsap-core.js", "vendor/CSSPlugin.js", "vendor/ScrollTrigger.js", "vendor/Observer.js", "vendor/GSAP-LICENSE.txt", "vendor/three.module.js", "vendor/three.core.js", "vendor/THREE-LICENSE.txt", "vendor/provenance.json" ], "sections": [ { "id": "top", "title": "Una entrada con jerarquía", "movement": "GSAP: entradas con un mismo ritmo; interacción nativa accesible." }, { "id": "work", "title": "Proyectos con espacio", "movement": "GSAP: entradas con un mismo ritmo; interacción nativa accesible." }, { "id": "story", "title": "Una historia que permanece", "movement": "GSAP: entrada por timeline y máscara. Three.js: giro scrub y controles." }, { "id": "case", "title": "Dentro del proyecto", "movement": "GSAP: entradas con un mismo ritmo; interacción nativa accesible." }, { "id": "team", "title": "El equipo", "movement": "GSAP: entradas con un mismo ritmo; interacción nativa accesible." }, { "id": "voices", "title": "Una voz externa", "movement": "GSAP: entradas con un mismo ritmo; interacción nativa accesible." }, { "id": "contact", "title": "Iniciar una conversación", "movement": "GSAP: entradas con un mismo ritmo; interacción nativa accesible." }, { "id": "end", "title": "Un cierre limpio", "movement": "GSAP: entradas con un mismo ritmo; interacción nativa accesible." } ], "preset": { "durationMs": 850, "staggerMs": 85, "distancePx": 36, "easing": "power3.out", "intensityOptions": [ "subtle", "original", "expressive" ], "nativeScroll": true }, "mobile": "Una columna a ≤600px; escena sin pinning, DPR 1.25, giro por botón. Mantiene entradas breves y scroll nativo.", "reducedMotion": "Contenido visible, sin timelines/scrub; escultura estática, controles inmediatos.", "license": "MIT (source); GSAP Standard No Charge + Three MIT", "animationStandard": { "version": "1.0.0", "guide": "ANIMATION-STANDARD.md", "contract": "animation-contract.json" }, "engine": { "id": "gsap-three", "label": "GSAP + ScrollTrigger + Three.js", "requiredPackages": [ { "package": "gsap", "version": "3.15.0", "license": "GSAP Standard No Charge", "url": "https://gsap.com/standard-license/", "reviewed": "2026-10-13" }, { "package": "three", "version": "0.186.1", "license": "MIT", "url": "https://github.com/mrdoob/three.js/blob/dev/LICENSE", "reviewed": "2026-10-13" } ], "reason": "Timelines y scrub de página coordinan una escena 3D real y el resto de secciones." }, "aiFiles": [ "three-runtime.js" ], "volume": 5, "timing": { "entranceMs": 850, "headlineLineDelayMs": 140, "sequenceStaggerMs": 85, "distancePx": 36, "sequenceDistancePx": 25, "scrollScrubMs": 450, "parallaxPercent": 3, "interactionMs": 650 }, "color": "#293f3c", "brand": "STILL®", "preview": "compositions/kinetic-story/index.html", "docs": "compositions/kinetic-story/README.md", "manifest": "compositions/kinetic-story/manifest.json", "download": "kinetic-story-composition.zip" } ] }