Backgrounds Part 1

Basics: stage 470×222px (a landing-page hero), all coordinates in px from the stage's top-left, everything clipped to the stage (top corners rounded 40px). The background fills the whole stage; on top of it the same hero foreground is drawn in every variant, then the tap indicator. T = seconds since the video start (T = frame/30); the video is 12s and seamless. u = (T + 0.25) mod 4. A tap every second at u = 0, 1, 2, 3 (video T = 0.75, 1.75, 2.75 …, 12 taps). Tap points TP = [(92, 60), (380, 166), (380, 58), (90, 166)] for u = 0, 1, 2, 3 (top-left → bottom-right → top-right → bottom-left). tapInfo(u): k = floor(u) (0–3), dt = u − k (seconds since the last tap), from = (k + 3) mod 4, to = k — the background has 4 states and each tap moves it from state "from" to state "to"; 4 taps return to the start. surge(dt) = ease(dt/0.1) for dt < 0.1, else (1 − seg(dt, 0.1, 0.95))² (0 → 1 in 0.1s, back to 0 before the next tap). springTo(dt, ω₀, ζ) = lerp(springF(ω₀, ζ)(dt), 1, seg(dt, 0.7, 1)) (a spring that is forced to exactly 1 by dt = 1). Ambient motion uses only periods 12, 6, 4, 3 or 2 s of T, so 12s loops seamlessly. Any noise is deterministic: ih(n): n = (n|0) ^ 0x9e3779b9; n = imul(n ^ (n>>>16), 0x85ebca6b); n = imul(n ^ (n>>>13), 0xc2b2ae35); n ^= n>>>16; return (n>>>0) / 2³². frame = round(T·30) mod 360. Hero foreground (identical in all six, drawn after the background): (1) a readability shade — radial gradient center (235, 104), radius 10 → 190, rgba(6,6,14,0.34) → transparent, over the whole stage; (2) badge: font 600 13px "Segoe UI Variable Display","Segoe UI",sans-serif, width bw = text width of "Now in beta" + 36, pill rr(235 − bw/2, 22, bw, 26, radius 13) filled rgba(255,255,255,0.09), stroked 1.5px rgba(255,255,255,0.22), a #3DDBB0 dot radius 3.5 at (235 − bw/2 + 14, 35), text "Now in beta" #E6E4F5 left at x 235 − bw/2 + 24, baseline 40; (3) headline "Build faster", 800 42px, white, centered at x 235, baseline 96, shadow rgba(0,0,0,0.45) blur 14; (4) sub line "Launch a polished site in minutes.", 500 15px, #D2CFEA, centered, baseline 122, shadow blur 8; (5) primary button: white pill rr(165, 140, 140, 40, radius 20) with shadow rgba(0,0,0,0.4) blur 14 offsetY 4, label "Get started" 700 15px #15132A centered at baseline 165. The button does not move: the taps land on the background. Tap indicator at TP[j] for each tap j (drawn last): a = seconds since that tap, wrapped to −2…+2; 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), under the circle (the ring's opacity is NOT multiplied by the circle's opacity). Easing (k clamped 0–1): ease = 1 − (1−k)³; easeIO = 4k³ for k < 0.5 else 1 − (−2k+2)³/2. seg(x, a, b) = clamp((x−a)/(b−a)). springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²). mix = per-channel RGB blend. radial(x, y, r, stops) = radial gradient from radius 0 to r at (x, y).

Four big soft color blobs blend like a mesh gradient; each tap glides them to a new layout.
- Base: fill #0B0A1A. Then 4 blobs with composite "screen", each a full-stage fill of radial(x, y, r) with stops 0: color at alpha a, 0.5: alpha 0.42a, 1: alpha 0. Colors / a / radius: #6E5BFF 0.78 210; #38C6FF 0.7 175; #FF5CA8 0.72 165; #3424B0 0.6 240.
- Layouts (blob 0–3) per state: 0 = (80,40) (410,60) (390,210) (130,215); 1 = (390,30) (100,185) (120,30) (350,215); 2 = (250,215) (430,110) (50,110) (230,0); 3 = (60,190) (250,15) (430,185) (300,110).
- Position of blob b = lerp(layout[from][b], layout[to][b], p) with p = easeIO(seg(dt, 0, 0.8)), plus drift (18·sin(2πT/6 + 1.7b), 12·cos(2πT/4 + 2.3b)). Radius × (1 + 0.08·surge(dt)).
- Last: fill rgba(8,7,18,0.10) over the stage.