#385
Hero intro sequence
A hero block whose eyebrow, headline, copy and buttons enter one after another, each rising 14px and fading in, 90ms apart.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Hero intro sequence" pattern (@codeatlasdev/ui demo #385, motion/hero-ambient) in my app.
Call get_demo({ ids: ["#385"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: The first screen of a landing page or the header of a feature page. The static first frame is already complete, so no content is hidden for crawlers or slow scripts.
Keep these library parts, with the props and tokens the demo uses:
- Button, MotionStage from "@codeatlasdev/ui"
Behaviour to keep:
- `MotionStage` with `loop={4200}`; `{#key m.cycle}` remounts the block so the sequence replays
- Each child gets `--i` (0 to 3) and `animation: intro-in 520ms cubic-bezier(0.2, 0, 0, 1) calc(var(--i) * 90ms) both`
- Keyframes: `from { opacity: 0; transform: translateY(14px); }` to `to { opacity: 1; transform: translateY(0); }`
- `class:intro--run={m.playing && m.cycle > 0}`: server HTML, reduced motion and a taken-over demo render the finished layout with no animation
Exact motion (do not approximate):
- opacity, transform: translateY: 520ms, cubic-bezier(0.2, 0, 0, 1), stagger 90ms
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` with `loop={4200}`; `{#key m.cycle}` remounts the block so the sequence replays
- Each child gets `--i` (0 to 3) and `animation: intro-in 520ms cubic-bezier(0.2, 0, 0, 1) calc(var(--i) * 90ms) both`
- Keyframes: `from { opacity: 0; transform: translateY(14px); }` to `to { opacity: 1; transform: translateY(0); }`
- `class:intro--run={m.playing && m.cycle > 0}`: server HTML, reduced motion and a taken-over demo render the finished layout with no animation
Related
Loading source.