TextMaskReveal

Editorial typographic intro that reveals from a full-block mask wiping in one of four directions.

stable motion #motion#text#reveal#masking#editorial

Designed for AI agents.

Loading preview…

Usage

- Use as the headline of a landing or about page hero — once per page, max twice. - Pair with smaller `AnimatedText` or static body copy below — TextMaskReveal owns the entrance. - Keep the text under 12 words — long lines wrap unpredictably during the wipe. - Up direction (default) feels assertive; down feels gentler; left/right feel editorial.

Do / Don't

- **Do** use Space Grotesk or another display face — the wipe rewards heavy stroke. - **Do** trigger once per session — repeated reveals on re-entry feels like a glitch. - **Don't** chain multiple TextMaskReveals in immediate succession (use `delay` to stagger if you must). - **Don't** apply to body text or interactive elements (buttons, links).

Tokens

A11y

Respects prefers-reduced-motion — renders static text. Uses semantic heading element via `as=` prop. Screen readers read the complete string; the reveal is purely visual.

Source

src/components/TextMaskReveal.tsx

Live playground

Designed for AI agents.

Designed for AI agents.