#300
Split text reveal
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.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Split text reveal" pattern (@codeatlasdev/ui demo #300, motion/text) in my app.
Call get_demo({ ids: ["#300"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Hero and section headlines, empty states and onboarding titles that should arrive with a deliberate, editorial entrance.
Keep these library parts, with the props and tokens the demo uses:
- Button, MotionStage from "@codeatlasdev/ui"
Behaviour to keep:
- `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
Exact motion (do not approximate):
- opacity, transform: translateY (per word, inside an overflow mask): 640ms, cubic-bezier(0.2, 0, 0, 1), stagger calc(var(--i) * 70ms)
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Button
@codeatlasdev/ui - MotionStage
@codeatlasdev/ui
How it is built
- `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
Related
Loading source.