Copy to Clipboard Part 1

Basics: stage 470×222px, background #13131C, all coordinates in px from the stage's top-left, everything clipped to the stage (top corners rounded 40px). Font F = "Segoe UI Variable Display","Segoe UI",sans-serif. The animation is a 4s loop that plays by itself and is seamless (it actually repeats every 1s); the video is 12s = three loops. T = seconds since the video start; u = (T + 0.25) mod 4 (the first frame is already 0.25s after a tap). A tap on the Copy button every second: at u = 0, 1, 2, 3 (video T = 0.75, 1.75, 2.75 …). dt = u − floor(u) = seconds since the last tap (0–1). Every tap copies: the feedback comes in, holds, and goes back to the plain "Copy" state between dt 0.62 and 0.84, so the UI is fully at rest again before the next tap. holdK(dt, a, b) = min(ease(seg(dt, a, b)), 1 − easeIO(seg(dt, 0.62, 0.84))). The shared UI (identical in all six at rest), drawn in this order: header "Invite link" 700 18px #E9E8F5 at (26, 44) left-aligned, and "Expires in 7 days" 500 14px #7F7D9C right-aligned at (444, 44); helper line "Anyone with this link can join your team" 500 15px #7F7D9C at (26, 200); the field rr(22, 64, 426, 100, radius 26) filled #1C1B2B, stroked 2px #3A3852; the link "orbi.team/join/K7Q2" in 600 23px F, color #D4D2EC, alphabetic baseline y 122, left edge x 46, drawn one character at a time at x = 46 + measureText(the text before it) (same in all six cells, so per-letter effects line up); a per-letter opacity multiplies the current globalAlpha (it never replaces it); the Copy button rr(312, 76, 124, 76, radius 22), center (374, 114). Button body btnBody(x, y, w, h, kc): fill a horizontal gradient x → x+w from mix(#6E5BFF, #1FB98F, kc) to mix(#38C6FF, #3DDBB0, kc) (kc = 0 violet → cyan, kc = 1 green → mint), with glow shadow mix(#6E5BFF, #3DDBB0, kc) at 45% opacity, blur 16; then the same shape filled with a vertical gloss y → y+h: rgba(255,255,255,0.14) → transparent (middle) → rgba(0,0,0,0.08). Faces (font 700 22px F, white, baseline = center y + 8): "Copy" face = copy icon (size 22, 3px white round lines, centered at x0 + 11) + label at x0 + 31, group width 22 + 9 + label width, x0 = cx − width/2; the copy icon = back sheet as an open path (−0.44s, 0.14s) → (−0.44s, −0.32s) → quadratic curve via (−0.44s, −0.5s) to (−0.26s, −0.5s) → (0.16s, −0.5s), and the front sheet rr(−0.2s, −0.26s, 0.66s, 0.76s, 0.16s) stroked. "Copied" face = check mark (s 32, 3.6px white) centered at x0 + 12, drawn at opacity clamp(4·ck) so its first frames never show a stray dot, + label at x0 + 32, group width 24 + 8 + label width. Check mark check(cx, cy, s, prog, lw, color): round-capped polyline through (cx − 0.30s, cy + 0.02s), (cx − 0.09s, cy + 0.23s), (cx + 0.32s, cy − 0.20s), drawn up to the fraction prog of its length. The default button copyButton(kc, sc, ck, pop, fa = 1): scale by sc around (374, 114); btnBody(312, 76, 124, 76, kc); Copy face at opacity (1 − seg(kc, 0, 0.6))·fa, scale lerp(1, 0.7, kc) (faces scale around the button center (374, 114)); Copied face at opacity seg(kc, 0.3, 1), scale pop·lerp(0.7, 1, kc), check progress ck. Press squash pressK(a, depth 0.06) (a = seconds since a tap, wrapped to −2…+2): 1 for a < −0.1 or a > 0.6; 1 − depth·(a+0.1)/0.1 just before the tap; 1 − depth·(1 − springF(22, 0.45)(a)) after; pressAll = min over the four taps. springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²). Tap indicator at (398, 132) (down-right of the button center, so the label stays readable) for each of the 4 taps (drawn last): visible for −0.42 ≤ a < 0.4; circle radius 22.575, fill rgba(215,215,230,0.38), shadow black 35% blur 10, border 3.5px white 92%; scale lerp(1.25, 1, ease((a+0.42)/0.32)) for a < −0.1, lerp(1, 0.8, (a+0.1)/0.1) for −0.1 ≤ a < 0, lerp(0.8, 1, ease(a/0.2)) after; opacity clamp((a+0.42)/0.18) before, clamp(1 − (a−0.12)/0.25) after; for 0 ≤ a < 0.4 a 3px white ring radius 22.575·(1 + 3.2a) at opacity 0.7(1 − a/0.4), drawn under the circle. Easing (k clamped 0–1): ease = 1 − (1−k)³; easeIn = k³; easeIO = 4k³ for k < 0.5 else 1 − (−2k+2)³/2; easeBack = 1 + 2.9(k−1)³ + 1.9(k−1)². seg(x, a, b) = clamp((x−a)/(b−a)); bump(x, a, b) = sin(π·seg). mix = per-channel RGB blend. Sparkle sparkle4(x, y, r, alpha, color) = 8-point star, points alternate radius r and 0.28r, first point straight up. Every value depends only on u, so 4.0s equals 0s.

A text-selection highlight sweeps over the whole link with two handles, then the button turns into "Copied". 
- Draw header, field, helper, link (Basics). tw = link width. Sweep sw = easeIO(seg(dt, 0, 0.2)); fade sa = 1 − easeIO(seg(dt, 0.56, 0.8)); highlight width hw = (tw + 10)·sw.
- If sw > 0 and sa > 0, at opacity sa: rr(41, 98, hw, 33, 6) filled rgba(110,91,255,0.55); clipped to rect(41, 98, hw, 33) the link drawn again in white; handles at opacity sa·clamp(6sw), color #38C6FF: at x = 41 and x = 41 + hw, a bar 2.5px wide from y 97 to 132, plus a dot radius 4.5 — above the left bar at y 93, below the right bar at y 136.
- Button: copyButton(kc = holdK(dt, 0.14, 0.26), sc = pressAll·(1 + 0.07·bump(dt, 0.14, 0.4)), ck = seg(dt, 0.18, 0.34), pop = easeBack(seg(dt, 0.14, 0.32))) — full "Copied" is visible from dt 0.26 to 0.62.