Frontend & UI
Masked Reveal
Revela títulos palavra por palavra através de uma máscara de overflow no scroll.
O que é
Um padrão de GSAP ScrollTrigger que divide um título em spans de palavras mascaradas e as escalona para cima conforme o texto entra na viewport. Inclui um padrão de limpeza para 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 que isso importa para design
- O escalonamento por palavra soa mais calmo e editorial do que a animação por letra.
- Os leitores de tela ainda recebem o texto completo por um aria-label.
- Quem usa reduced-motion vê texto estático, sem nenhum transform aplicado.
O que cobre
- Use when
- Motion defaults
- CSS mask
- GSAP ScrollTrigger
- React cleanup pattern
- Quick checks
Como instalar
Masked Reveal
-
Clone o repositório.
git clone https://github.com/MengTo/Skills -
Aponte o Codex para o arquivo da skill.
agent-skills/web-design/masked-reveal/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Marque um título com data-masked-reveal e adicione as regras de mask em CSS.
-
Chame o helper de split, que dispensa o plugin pago SplitText.
-
Envolva num contexto do GSAP no React para o ScrollTrigger se limpar na troca de rota.
Todo plugin aqui é gratuito, open source e leva até a sua fonte original.
Mais na lista codex-design ↗Mais plugins de design para o Codex
Frontend & UI O que ele faz gpt-taste Cria landing pages estilo premiado com movimento de scroll em GSAP e grids bento sem falhas. 
Design Systems O que ele faz Stitch Design Taste Escreve um DESIGN.md que guia o Google Stitch para telas que fogem do genérico. 
Frontend & UI O que ele faz image-to-code Gera imagens de design primeiro, analisa cada uma e só depois constrói o código de frontend correspondente. 
Frontend & UI O que ele faz imagegen-frontend-mobile Gera fluxos de telas de app mobile em nível premium, como imagens, não como código. Próximo passo
Projete com o Open Design, sem a configuração
Instale este plugin por conta própria ou rode uma camada de design curada em volta do Codex com o Open Design. Use sua própria chave e seja dono do resultado.