index.html
<button class="pocket" …
data-copy-target="#cmd">
<!-- pivot at the base so
the clip dips as the
label lands in it -->
<g class="pocket-clip"
style="transform-origin:
9px 16px">
<!-- a live region speaks
"Copied" instead -->
…aria-hidden="true">Copiedpocket.css
/* dash outruns the tick;
JS runs offset 12 → 0 */
.pocket-check { …
stroke-dasharray: 12;
stroke-dashoffset: 12;
/* both words in one cell,
so width never jumps */
.pocket-labels {
display: grid; }
.pocket-labels > * {
grid-area: 1 / 1; …pocket.js
// clone the label and fly
// it to the icon centre
const dx = icon.offsetLeft
+ icon.offsetWidth / 2 - …
// the clip waits for the
// ghost to land, then dips
play(clip, [ …
{ transform: …,
offset: .74 },