#307
Blur in
A two-line headline that sharpens from a 12px blur while rising 8px, each line 160ms after the previous. The sentence keeps one accessible name; a button replays it.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Blur in" pattern (@codeatlasdev/ui demo #307, motion/text) in my app.
Call get_demo({ ids: ["#307"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Hero titles, product-reveal moments and section intros that want a soft, cinematic entrance instead of a hard slide.
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="Blur in: a headline sharpens from a blur, line by line"` and `loop={3400}`
- `aria-label={lines.join(' ')}` on the heading is the one accessible name; each `.bi__line` is `aria-hidden="true"`
- `animation: blur-in 900ms cubic-bezier(0.2, 0, 0, 1) calc(var(--i) * 160ms) both` with `style="--i:{i}"` per line
- Keyframes: `from { opacity: 0; filter: blur(12px); transform: translateY(8px); }` to `to { opacity: 1; filter: blur(0); transform: translateY(0); }`
- The `Button` `onclick` runs `manual++`, which remounts the lines through `{#key`: pressing Sharpen again is the takeover
- Under reduced motion `class:bi__line--run={!m.reduced}` drops the animation: the lines render sharp
Exact motion (do not approximate):
- opacity, filter: blur, transform: translateY (per line): 900ms, cubic-bezier(0.2, 0, 0, 1), stagger calc(var(--i) * 160ms)
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="Blur in: a headline sharpens from a blur, line by line"` and `loop={3400}`
- `aria-label={lines.join(' ')}` on the heading is the one accessible name; each `.bi__line` is `aria-hidden="true"`
- `animation: blur-in 900ms cubic-bezier(0.2, 0, 0, 1) calc(var(--i) * 160ms) both` with `style="--i:{i}"` per line
- Keyframes: `from { opacity: 0; filter: blur(12px); transform: translateY(8px); }` to `to { opacity: 1; filter: blur(0); transform: translateY(0); }`
- The `Button` `onclick` runs `manual++`, which remounts the lines through `{#key`: pressing Sharpen again is the takeover
- Under reduced motion `class:bi__line--run={!m.reduced}` drops the animation: the lines render sharp
Related
Loading source.