#364
Stacked toasts
Toasts that slide in from above, stack with a depth cascade (each older one lower, smaller and dimmer) and leave when dismissed.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Stacked toasts" pattern (@codeatlasdev/ui demo #364, motion/transitions) in my app.
Call get_demo({ ids: ["#364"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: In-app notifications that can arrive in bursts: payments, comments, exports, limit warnings.
Keep these library parts, with the props and tokens the demo uses:
- Button, MotionStage, MotionCtx from "@codeatlasdev/ui"
Behaviour to keep:
- `MotionStage` with `label="Stacked toasts: they enter, stack up and dismiss"` and `loop={1400}`
- At most `const MAX = 3` toasts; a new one goes first and the oldest is cut
- Depth comes from `--i`: `transform: translateY(calc(var(--i) * 0.9rem)) scale(calc(1 - var(--i) * 0.05))` and `opacity: calc(1 - var(--i) * 0.28)`
- Enter: `animation: ts-in 320ms cubic-bezier(0.2, 0, 0, 1)` from `translateY(-1.5rem) scale(0.96)`; restack: `transition: transform 320ms cubic-bezier(0.2, 0, 0, 1), opacity 320ms cubic-bezier(0.2, 0, 0, 1)`
- Only the front toast is announced and readable: older ones get `class:ts__toast--behind={i > 0}` (content `opacity: 0`), `aria-hidden` and `inert`, so the stack never overlaps text
- Dismiss: `out:leave` runs `duration: reduced ? 0 : 240` with `easing: cubicOut`, fading to `opacity:${t}` while `translate:${u * 2.5}rem 0` slides it aside
- Under reduced motion the stack is shown full with `animation: none`
Exact motion (do not approximate):
- opacity, transform: translateY and scale (enter): 320ms, cubic-bezier(0.2, 0, 0, 1)
- opacity and translate (dismiss): 240, cubicOut
- transform and opacity (restack as the list changes): 320ms, cubic-bezier(0.2, 0, 0, 1)
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 `label="Stacked toasts: they enter, stack up and dismiss"` and `loop={1400}`
- At most `const MAX = 3` toasts; a new one goes first and the oldest is cut
- Depth comes from `--i`: `transform: translateY(calc(var(--i) * 0.9rem)) scale(calc(1 - var(--i) * 0.05))` and `opacity: calc(1 - var(--i) * 0.28)`
- Enter: `animation: ts-in 320ms cubic-bezier(0.2, 0, 0, 1)` from `translateY(-1.5rem) scale(0.96)`; restack: `transition: transform 320ms cubic-bezier(0.2, 0, 0, 1), opacity 320ms cubic-bezier(0.2, 0, 0, 1)`
- Only the front toast is announced and readable: older ones get `class:ts__toast--behind={i > 0}` (content `opacity: 0`), `aria-hidden` and `inert`, so the stack never overlaps text
- Dismiss: `out:leave` runs `duration: reduced ? 0 : 240` with `easing: cubicOut`, fading to `opacity:${t}` while `translate:${u * 2.5}rem 0` slides it aside
- Under reduced motion the stack is shown full with `animation: none`
Related
Loading source.