Frontend y UI
Masked Reveal
Revela titulares palabra por palabra mediante una máscara de overflow al hacer scroll.
Qué es
Un patrón de GSAP ScrollTrigger que divide un titular en spans de palabra enmascarados y los escalona hacia arriba a medida que el texto entra en el viewport. Incluye un patrón de limpieza en React.
Create masked staggered word reveals on scroll with GSAP ScrollTrigger. Use when headings, hero copy, section titles, or editorial text should reveal word-by-word through an overflow mask as they enter the viewport.
Por qué importa para el diseño
- El escalonado a nivel de palabra se lee más calmado y editorial que la animación letra a letra.
- Los lectores de pantalla siguen recibiendo el texto completo mediante un aria-label.
- Los usuarios con reduced-motion ven texto estático sin ninguna transformación aplicada.
Qué cubre
- Use when
- Motion defaults
- CSS mask
- GSAP ScrollTrigger
- React cleanup pattern
- Quick checks
Cómo instalarlo
Masked Reveal
-
Clona el repositorio.
git clone https://github.com/MengTo/Skills -
Señálale a Codex el archivo de la skill.
agent-skills/web-design/masked-reveal/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Marca un titular con data-masked-reveal y añade las reglas de máscara CSS.
-
Llama al helper de split, que evita el plugin de pago SplitText.
-
Envuélvelo en un contexto de GSAP en React para que ScrollTrigger se limpie al cambiar de ruta.
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.