Copy Button Travel

1"use client";
2 
3import { useCallback, useEffect, useRef, useState } from "react";
4 
5// ---------------------------------------------------------------------------
6// CarbonLift — a copy-to-clipboard button that shows WHAT it copied, not just
7// that something happened. On click, a duplicate of the source text peels up
8// off the source line and travels most of the real distance to the button's
9// clipboard glyph over 720ms — the actual measured gap between source and
10// icon, not a token nudge — fading and tightening its letter-spacing as it
11// goes, arriving right as the glyph gives one small settle bounce, as if it
12// just "caught" the duplicate. The label ticks Copy -> Copied in Geist Mono
13// at the same moment. This is a duplicate rising UP and traveling with the
14// real content as the moving element — distinct from a stamp pressing an
15// impression DOWN.
16//
17// MECHANISM: on click, the visible source node and the button's icon are
18// measured with getBoundingClientRect(); a clone span is absolutely
19// positioned at the source's exact box (same font, --foreground) inside a
20// shared relative container, then animated via a CSS custom property
21// translate + opacity + letter-spacing over 720ms ease-out-expo: it holds
22// near-full opacity through the first half of the flight so the two-line
23// duplication actually registers, then fades over the second half as it
24// nears the glyph. If the source is scrolled off-screen the measurement is
25// skipped and the component falls back to a plain label swap — the same
26// thing reduced motion always does.
27//
28// A11Y: a real <button> with an aria-label naming exactly what it copies.
29// Success is announced through a visually-hidden aria-live=polite region
30// ("Copied to clipboard"); the flying duplicate is aria-hidden and purely
31// decorative — nothing here is conveyed only by animation. Enter/Space
32// behave identically to a click (native button semantics, no custom key
33// handling needed). The label + icon revert to the resting state after 2s.
34//
35// Tokens only: --foreground for ink and the ghost, --muted for secondary
36// text, --border for the frame, --accent for the keyboard focus ring only.
37// Pure DOM/SVG/CSS — no canvas.
38// ---------------------------------------------------------------------------
39 
40const GHOST_MS = 720;
41const BOUNCE_MS = 260;
42// The glyph's settle bounce should land as the duplicate arrives, not
43// partway through its flight — so its delay is derived from the flight
44// … truncated