Notifications Part 1

A notification that grows out of a small black pill at the top of the screen, like an "island", on a 470×228 stage with a dark #13131C background (clip to the stage). 4s loop; a = seconds since the notification appears (0–4). The loop is seamless: at a = 3.3 it shrinks back, and at a = 0 (= 4) it opens again.
- Basics: font Segoe UI / Inter / system sans-serif (weights as given). Gradients run top-left → bottom-right unless stated. ease-out = 1 − (1 − k)³; easeOutBack(k) = 1 + 2.9·(k − 1)³ + 1.9·(k − 1)²; seg(a, a0, a1) = clamp((a − a0)/(a1 − a0), 0, 1). spring(ω₀, ζ) of t = 1 − e^(−ζω₀t)·(cos ω_d t + (ζω₀/ω_d)·sin ω_d t), ω_d = ω₀√(1−ζ²), and 0 for t ≤ 0 (it overshoots a little; that is intended). Avatar letters: bold white, font size = round(radius × 0.95), centered. Borders are drawn 1px inside the shape's edge unless stated. “Stage center” = the point 235px from the stage's left edge and 108px below its top (so the stage bottom is 120px below it).
- Background: three faint placeholder list rows (white 4.5%) whose row lines are 74, 136 and 198px below the stage top. Each row: a 17px-radius circle 185px left of the stage center on the row line, and two bars starting 155px left of center: 210×11 (radius 5.5) with its top 12px above the row line, and 130×9 (radius 4.5) with its top 5px below the row line.
- Pill/card: fill #000000, its top edge fixed 16px below the stage top, horizontally centered. (On closing, the spring dips a little below the resting size — a small squish — and the glow is cut off by the stage top; both are fine.) Openness p: for a < 3.3, p = spring(ω₀ = 13, ζ = 0.6) of a; for a ≥ 3.3, p = 1 − spring(ω₀ = 15, ζ = 0.62) of (a − 3.3). (spring x(t) = 1 − e^(−ζω₀t)·(cos ω_d t + (ζω₀/ω_d)·sin ω_d t), ω_d = ω₀√(1−ζ²); it overshoots a little.) Width = 128 + 282·p, height = 36 + 88·p, corner radius = 18 + 22·clamp(p, 0, 1) (never more than half the height). Violet glow: canvas shadow rgba(110,91,255, 0.5·clamp(p)), shadowBlur 34. 2px border, white 10%.
- When closed: a cyan #38C6FF dot (radius 5) whose center is 22px from the pill's right edge, vertically centered, opacity (1 − p/0.3, clamped) × (0.55 + 0.45·sin(2π·a/2)).
- Content (clipped to the card): opacity rises linearly 0→1 over a = 0.16–0.36 and falls 1→0 over 3.3–3.42. Avatar: circle radius 31, center 55px from the card's left edge, vertically centered, diagonal gradient #6E5BFF → #FF5CA8, white bold "M". Text starting 102px from the card's left edge (avatar letter: bold white, size = radius × 0.95): "Mika" (650, 24px, #F4F4F8, baseline 4px above the card's center) and "Voice message · 0:12" (500, 18px, #A3A1C0, baseline 20px below the center). Live waveform: 6 cyan bars, 5px wide, radius 2.5, left edges at (card right − 96) + 11·j, vertically centered, height = 8 + 24·(0.5 + 0.5·sin(2π·a + 1.1·j)) (j = 0…5; one wave per second, so it loops).