#345
Copy to check
A copy button whose two sheets scale away while a check mark draws itself, then it reverts after 1.6 seconds.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Copy to check" pattern (@codeatlasdev/ui demo #345, motion/micro) in my app.
Call get_demo({ ids: ["#345"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Copy-to-clipboard buttons next to a command, token or link, where the icon confirms the action.
Keep these library parts, with the props and tokens the demo uses:
- MotionStage, announce from "@codeatlasdev/ui"
Behaviour to keep:
- `MotionStage` from `@codeatlasdev/ui` with `loop={2800}`
- `navigator.clipboard?.writeText(CODE)` on a real click; autoplay never touches the clipboard
- `.cc__btn--done .cc__sheets` goes to `transform: scale(0.6)` and `opacity: 0`
- `stroke-dasharray: 1;` with `stroke-dashoffset: 1` drawing to `stroke-dashoffset: 0` on the tick path
- `setTimeout(() => (copied = false), 1600)` reverts the icon
- `announce('Copied to clipboard')` and a `ca-sr-only` label carry the state for screen readers
Exact motion (do not approximate):
- transform, opacity (sheets): 280ms, cubic-bezier(0.2, 0, 0, 1)
- stroke-dashoffset (check tick): 320ms, cubic-bezier(0.2, 0, 0, 1), delay 120ms
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={2800}`
- `navigator.clipboard?.writeText(CODE)` on a real click; autoplay never touches the clipboard
- `.cc__btn--done .cc__sheets` goes to `transform: scale(0.6)` and `opacity: 0`
- `stroke-dasharray: 1;` with `stroke-dashoffset: 1` drawing to `stroke-dashoffset: 0` on the tick path
- `setTimeout(() => (copied = false), 1600)` reverts the icon
- `announce('Copied to clipboard')` and a `ca-sr-only` label carry the state for screen readers
Related
Loading source.