Element: #300 Split text reveal (motion/text)
What it shows: A headline whose words rise out of a clipping mask one after another, 70ms apart. The unsplit sentence stays the accessible name; the split words are aria-hidden.
When to use: Hero and section headlines, empty states and onboarding titles that should arrive with a deliberate, editorial entrance.
Spec:
- `MotionStage` from `@codeatlasdev/ui` with `label="Split text reveal: a headline rises in word by word"` and `loop={3600}`
- `aria-label={headline}` on the heading keeps the unsplit sentence as the accessible name
- Each word is `aria-hidden="true"` inside `.split__mask` (`overflow: hidden`) so it rises from below its own line
- `animation: split-rise 640ms cubic-bezier(0.2, 0, 0, 1) calc(var(--i) * 70ms) both` with `style="--i:{i}"` per word
- Keyframes: `from { opacity: 0; transform: translateY(110%); }` to `to { opacity: 1; transform: translateY(0); }`
- `{#key` remounts the words on every loop (`m.cycle`) and on the Reveal again button (`manual++`, the takeover path)
- Under reduced motion `class:split__word--run={!m.reduced}` drops the animation: the words render in place
Motion:
- opacity, transform: translateY (per word, inside an overflow mask): 640ms cubic-bezier(0.2, 0, 0, 1) stagger calc(var(--i) * 70ms)
Names: Split text reveal | Word-by-word reveal | Staggered text mask | Texto dividido por palavra | Révélation de texte par mot
Tags: motion, text, split, headline, entrance, stagger
Needs: @codeatlasdev/ui@4.6.0
Components: Button, MotionStage
Live demo: https://ui.codeatlas.com.br/docs/motion/text#split-text-reveal
{#snippet children(m)}
{#key `${m.cycle}-${manual}`}
{#each words as word, i (i)}
{word}{' '}
{/each}
{/key}
Reconciliation, approvals and the audit trail, on one screen.