Dark Mode Toggle 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; the clip reaches down to y 234 so the card shadow below y 208 fades out instead of being cut at 222). The animation is a 4s loop that plays by itself and is seamless; 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 every second at u = 0, 1, 2, 3 (video T = 0.75, 1.75, 2.75 …). tapInfo(u): k = floor(u) (0–3), dt = u − k (seconds since the last tap), from = k mod 2, to = (k+1) mod 2, where theme 0 = Light and 1 = Dark — so u = 0 and 2 switch Light → Dark, u = 1 and 3 switch Dark → Light. The UI (identical in all six, drawn by panel(theme)): a card rr(24, 14, 422, 194, radius 26), center (235, 111). Shadow, drawn first and never moved (except in 04): the card shape filled #13131C with shadow rgba(0,0,0,0.55), blur 18, offsetY 6. Theme colors — Light: card #DAD9E5, group box #EAE9F2, text #1D1C2C, sub text #5A5874, divider rgba(29,28,44,0.12), round button #EAE9F2 with 1.5px edge rgba(29,28,44,0.10), value text #5B4BE0. Dark: card #1F1E30, group #2A2940, text #F2F2F8, sub #9896B4, divider rgba(255,255,255,0.08), button #2C2B44 with edge rgba(255,255,255,0.10), value #A99BFF. (The light theme is a soft gray, not white, so it is not blinding.) Card content, in draw order: avatar = a ring circle (70, 60) r 30 in the card color, then a circle r 27 filled with a diagonal gradient #6E5BFF → #FF5CA8 (from (43, 33) to (97, 87)) and "LS" 800 22px white centered at baseline 68; name "Lumi Sato" 700 28px text color at (110, 55); handle "@lumi.studio" 500 19px sub color at (110, 84); theme button = circle center (400, 60) r 27 in the button color (scaled around its center by the press squash); the sun/moon glyph at (400, 60); group box rr(40, 110, 390, 86, 16) in the group color with a 1.5px divider from x 92 to 430 at y 153; row 1 (center y 131): icon tile rr(52, 117, 28, 28, 8) with gradient #6E5BFF → #38C6FF and a white contrast symbol (circle r 8 stroked 2.4px + its right half filled), label "Appearance" 600 21px at (92, 138), value "Light" or "Dark" 700 21px in the value color right-aligned at x 396, and a chevron (406, 125) → (412, 131) → (406, 137) 2.4px in the sub color; row 2 (center y 175): tile with gradient #FF5CA8 → #FF8A65 and a white bell (body: from (59, 180) a quadratic curve with control (59, 167) to (66, 167), then control (73, 167) to (73, 180), closed and filled; a bar rect(57, 179, 18, 2.6); a clapper circle (66, 183.5) r 2.4). Both tile gradients run diagonally from the tile's top-left corner to its bottom-right corner. Row 2 also has label "Notifications" at (92, 182), a small switch that is always on: rr(370, 163, 44, 24, 12) #3DDBB0 with a white knob (402, 175) r 9. Fonts: "Segoe UI Variable Display","Segoe UI",sans-serif. Sun/moon glyph glyph(m) drawn on a 96×96 offscreen canvas centered at (48, 48) and placed with drawImage (so it can rotate/scale smoothly); m = 0 sun … 1 moon: color mix(#DB8A0A, #A99BFF, m) (deep amber sun so it reads on the light button); 8 rays at angles i·45°, each a 3.4px round-capped line from radius 14.6 to 14.6 + 5.6·s with s = 1 − m (opacity clamp(2s)); a core circle radius lerp(9.5, 14, m); then a "bite" circle cut out with destination-out at (lerp(24, 7, m), lerp(−24, −7, m)) radius lerp(8, 12, m) — at m = 0 the bite is outside the sun, at m = 1 it leaves a crescent. Press squash pressK(a, 0.1) for the round button (a = seconds since a tap, wrapped to −2…+2): 1 for a < −0.1 or a > 0.6; 1 − 0.1·(a+0.1)/0.1 just before the tap; 1 − 0.1·(1 − springF(22, 0.45)(a)) after; the squash = min over the four taps; the glyph uses the same scale. springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²). Reveal helper (used by 01, 02, 05, 06): draw panel(from) without its glyph; then, clipped to the card shape AND to the type's reveal shape, panel(to) without its glyph; then the type's edge light clipped to the card; then the glyph on top (so the icon morphs on its own timing). When the reveal is finished, draw only panel(to). Tap indicator at (394, 68) 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) (its own opacity, not multiplied by the circle's fade), 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)). mOf(p) = p when going to Dark, 1 − p when going to Light. Every value depends only on u, so 4.0s equals 0s.

The new theme opens as a growing circle centered on the sun/moon button, with a glowing rim; the icon turns while it morphs. 
- p = easeIO(seg(dt, 0.02, 0.56)); reveal shape = circle at (400, 60) radius 420p (420 covers the whole card).
- Rim (0 < p < 1): the same circle stroked 3px at opacity 0.85(1 − p), color #A99BFF with glow #6E5BFF blur 12 when going Dark; #FFD166 with glow #F5A524 when going Light.
- Glyph: e = easeIO(seg(dt, 0.04, 0.46)); m = mOf(e); rotation −(π/2)(1 − e) when going Dark, +(π/2)e when going Light (the sun has 8-fold symmetry, so the rest pose never jumps).