#256
Fade rise
A card that fades in while rising 16px into place, replaying on a loop only while it is in view.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Fade rise" pattern (@codeatlasdev/ui demo #256, motion/basics) in my app.
Call get_demo({ ids: ["#256"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Entrance of a card, a toast, a list row or any block that appears after the page has loaded.
Keep these library parts, with the props and tokens the demo uses:
- Card, MotionStage from "@codeatlasdev/ui"
Behaviour to keep:
- `MotionStage` from `@codeatlasdev/ui` with `label="Fade rise: a card fades in while rising into place"` and `loop={2400}`
- `{#key m.cycle}` remounts the card so `animation: fade-rise` runs again each cycle
- Keyframes: `from { opacity: 0; transform: translateY(16px); }` to `to { opacity: 1; transform: translateY(0); }`
- Under reduced motion `class:rise--run={!m.reduced}` drops the animation and the card renders in its final state
Exact motion (do not approximate):
- opacity, transform: translateY: 420ms, cubic-bezier(0.2, 0, 0, 1), delay 80ms
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Card
@codeatlasdev/ui - MotionStage
@codeatlasdev/ui
How it is built
- `MotionStage` from `@codeatlasdev/ui` with `label="Fade rise: a card fades in while rising into place"` and `loop={2400}`
- `{#key m.cycle}` remounts the card so `animation: fade-rise` runs again each cycle
- Keyframes: `from { opacity: 0; transform: translateY(16px); }` to `to { opacity: 1; transform: translateY(0); }`
- Under reduced motion `class:rise--run={!m.reduced}` drops the animation and the card renders in its final state
Related
Loading source.