Frontend y UI
Cinematic Scroll Storytelling
Recetas de Lenis y GSAP ScrollTrigger para landing pages guiadas por el scroll.
Qué es
Código funcional para un preloader, apariciones de texto dividido enmascarado, apariciones de sección, escenas fijadas ligadas al scroll, pilas de tarjetas pegajosas y parallax, usando Lenis y GSAP ScrollTrigger.
Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, foot
Por qué importa para el diseño
- Los tokens de movimiento fijan duraciones, escalonados, desplazamientos y desenfoque para que las apariciones se mantengan coherentes.
- Cada efecto tiene una rama de reduced-motion que mantiene intactos la maquetación y el contraste.
- Un orden de construcción monta primero la página estática y luego el movimiento, evitando escenas de scroll enredadas.
Qué cubre
- Effect vocabulary
- Motion tokens
- Page anatomy
- Split text reveal
- Sticky card stack
- QA checklist
Cómo instalarlo
Cinematic Scroll Storytelling
-
Clona el repositorio.
git clone https://github.com/MengTo/Skills -
Señálale a Codex el archivo de la skill.
agent-skills/web-design/cinematic-scroll-storytelling/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Instala gsap y lenis, y luego conecta Lenis al ticker de GSAP.
-
Marca las secciones con los atributos data para apariciones, pilas y parallax.
-
Añade al final las escenas fijadas ligadas al scroll, y luego ejecuta la lista de QA.
Todos los plugins de esta colección son gratuitos, de código abierto y enlazan a su fuente original real.
Más en la lista codex-design ↗Más plugins de diseño para Codex
Frontend y UI Qué hace gpt-taste Crea landing pages de estilo premiado con movimiento de scroll GSAP y rejillas bento sin huecos. 
Sistemas de diseño Qué hace Stitch Design Taste Escribe un DESIGN.md que orienta a Google Stitch hacia pantallas que no son genéricas. 
Frontend y UI Qué hace image-to-code Primero genera imágenes de diseño, las analiza y luego construye el código frontend correspondiente. 
Frontend y UI Qué hace imagegen-frontend-mobile Genera flujos de pantallas de apps móviles premium como imágenes, no como código. Siguiente paso
Diseña con Open Design, sin montar nada
Instálalo tú mismo, o ejecuta toda una capa de diseño curada alrededor de Codex con Open Design. Trae tu propia key: lo que produzcas es tuyo.