Frontend & UI
Masked Reveal
Révèle les titres mot à mot via un masque de débordement au scroll.
De quoi il s’agit
Un pattern GSAP ScrollTrigger qui découpe un titre en spans de mots masqués et les décale vers le haut à mesure que le texte entre dans le viewport. Inclut un pattern de nettoyage 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.
Pourquoi ça compte pour le design
- Un décalage au niveau du mot paraît plus calme et plus éditorial qu’une animation lettre à lettre.
- Les lecteurs d’écran reçoivent tout de même le texte complet via un aria-label.
- Les utilisateurs en reduced-motion voient un texte statique, sans aucune transform.
Ce que ça couvre
- Use when
- Motion defaults
- CSS mask
- GSAP ScrollTrigger
- React cleanup pattern
- Quick checks
Comment l’installer
Masked Reveal
-
Clonez le dépôt.
git clone https://github.com/MengTo/Skills -
Pointez Codex sur le fichier du skill.
agent-skills/web-design/masked-reveal/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Marquez un titre avec data-masked-reveal et ajoutez les règles de mask CSS.
-
Appelez le helper de découpe, qui évite le plugin payant SplitText.
-
Enveloppez dans un contexte GSAP en React pour que ScrollTrigger se nettoie au changement de route.
Chaque plugin présenté ici est gratuit, open source, et renvoie à sa vraie source amont.
En savoir plus sur la liste codex-design ↗Autres plugins design pour Codex
Frontend & UI Ce qu’il fait gpt-taste Construit des pages primables avec du scroll GSAP et des grilles bento sans trous. 
Design systems Ce qu’il fait Stitch Design Taste Rédige un DESIGN.md qui oriente Google Stitch vers des écrans non génériques. 
Frontend & UI Ce qu’il fait image-to-code Génère d’abord des images de design, les analyse, puis construit le code frontend correspondant. 
Frontend & UI Ce qu’il fait imagegen-frontend-mobile Génère des parcours d’écrans d’app mobile premium en images, pas en code. Prochaine étape
Designez avec Open Design, sans la config
Installez ce plugin vous-même, ou faites tourner toute une couche design sélectionnée autour de Codex avec Open Design. Apportez votre clé, gardez la main sur ce que vous produisez.