#343
Like burst
A like button whose heart pops to 1.45 and throws eight particles outward while the count ticks up; aria-pressed carries the state.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Like burst" pattern (@codeatlasdev/ui demo #343, motion/micro) in my app.
Call get_demo({ ids: ["#343"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Like, favorite or reaction buttons where a positive action deserves a small celebration.
Keep these library parts, with the props and tokens the demo uses:
- MotionStage from "@codeatlasdev/ui"
Behaviour to keep:
- `MotionStage` from `@codeatlasdev/ui` with `loop={2600}`
- `aria-pressed={liked}` on the button, count in `tabular-nums`
- `const PARTICLES = 8;` each `<i style="--a:{i * (360 / PARTICLES)}deg">` is one dot on a ring
- `@keyframes like-pop` scales the heart `1` to `1.45` and back
- `@keyframes like-particle` moves each dot `translateY(-26px)` while it fades to `opacity: 0` and `scale(0.3)`
- `{#key burst}` remounts the ring so the burst replays on every like; nothing bursts when reduced
Exact motion (do not approximate):
- transform: scale (heart): 460ms, cubic-bezier(0.175, 0.885, 0.32, 1.275)
- transform, opacity (particles): 560ms, cubic-bezier(0, 0, 0.2, 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
- MotionStage
@codeatlasdev/ui
How it is built
- `MotionStage` from `@codeatlasdev/ui` with `loop={2600}`
- `aria-pressed={liked}` on the button, count in `tabular-nums`
- `const PARTICLES = 8;` each `<i style="--a:{i * (360 / PARTICLES)}deg">` is one dot on a ring
- `@keyframes like-pop` scales the heart `1` to `1.45` and back
- `@keyframes like-particle` moves each dot `translateY(-26px)` while it fades to `opacity: 0` and `scale(0.3)`
- `{#key burst}` remounts the ring so the burst replays on every like; nothing bursts when reduced
Related
Loading source.