Frontend e UI
Masked Reveal
Rivela i titoli parola per parola tramite una maschera di overflow durante lo scroll.
Che cos’è
Un pattern GSAP ScrollTrigger che spezza un titolo in span di parole mascherate e le fa salire sfalsate quando il testo entra nel viewport. Include un pattern di cleanup per 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.
Perché conta per il design
- Lo sfalsamento a livello di parola risulta più calmo ed editoriale dell’animazione lettera per lettera.
- Gli screen reader ricevono comunque il testo completo tramite un aria-label.
- Chi ha reduced-motion vede testo statico senza alcuna transform applicata.
Cosa copre
- Use when
- Motion defaults
- CSS mask
- GSAP ScrollTrigger
- React cleanup pattern
- Quick checks
Come installarlo
Masked Reveal
-
Clona il repository.
git clone https://github.com/MengTo/Skills -
Punta Codex sul file della skill.
agent-skills/web-design/masked-reveal/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Marca un titolo con data-masked-reveal e aggiungi le regole CSS di mask.
-
Chiama l’helper di split, che evita il plugin a pagamento SplitText.
-
Avvolgi in un GSAP context in React così ScrollTrigger fa pulizia al cambio di route.
Ogni plugin qui è gratuito, open source e rimanda alla sua vera fonte upstream.
Altro sulla lista codex-design ↗Altri plugin di design per Codex
Frontend e UI Cosa fa gpt-taste Costruisce landing page da premio con motion GSAP legato allo scroll e griglie bento senza vuoti. 
Design system Cosa fa Stitch Design Taste Scrive un DESIGN.md che guida Google Stitch verso schermate non generiche. 
Frontend e UI Cosa fa image-to-code Genera prima immagini di design, le analizza, poi costruisce il codice frontend corrispondente. 
Frontend e UI Cosa fa imagegen-frontend-mobile Genera flussi di schermate per app mobile di livello premium come immagini, non come codice. Prossimo passo
Progetta con Open Design, senza il setup
Installa questo plugin da solo, oppure porta attorno a Codex un intero strato di design curato con Open Design. Usa la tua chiave, resta padrone dell’output.