Notifications Part 2

A notification that drips out of the top of the screen as a liquid drop and spreads into a toast, on a 470×228 stage with a dark #13131C background (clip to the stage). 4s loop; a = seconds since the drop starts to fall (0–4). Coordinates are from the stage's top-left; the stage center x is 235.
- Basics: font Segoe UI / Inter / system sans-serif. ease-in = k³; 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; intended). “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 at x = 50 on the row line, and two bars starting at x = 80: 210×11 (radius 5.5) with its top 12px above the row line, and 130×9 (radius 4.5) with its top 5px below it.
- Goo layer: an offscreen canvas the size of the stage. Each frame, clear it and draw these white shapes with filter blur(8px):
  - The "spout" at the top: a rounded rectangle x 177–293, y −30 to 8, radius 19 (only its bottom 8px is inside the stage).
  - The drop/pill (always drawn): centered at x 235 and y, width w, height h, fully rounded (radius h/2). y = −20 + 116·k² with k = seg(a, 0, 0.36) for a < 3.36; after that y = 96 − 116·k² with k = seg(a, 3.36, 3.66) (it is pulled back up). So from about a = 3.66 to 4.0 it rests at y = −20, hidden inside the spout, which keeps the loop seamless. Openness o = spring(13, 0.55) of (a − 0.33) for a < 3.15, then 1 − (seg(a, 3.15, 3.36))³. w = 44 + 316·o, h = 44 + 22·clamp(o, 0, 1).
  - A trailing droplet (radius 11, only while a < 0.5 or a > 3.3) at x 235 and y2: for a < 3.36, y2 = −20 + 116·seg(a − 0.07, 0, 0.36)²; otherwise y2 = 96 − 116·seg(a + 0.07, 3.36, 3.66)².
  Then threshold the alpha (on a 0–1 scale: new alpha = clamp(alpha × 26 − 11, 0, 1)) so the blurred shapes melt together with crisp edges, and fill them (source-in) with a linear gradient #6E5BFF → #38C6FF from (55, 0) to (415, 228). Draw the layer onto the stage with a violet glow (canvas shadow rgba(110,91,255,0.45), shadowBlur 24).
- Content on the pill: opacity seg(a, 0.5, 0.7) for a < 3.0, then 1 − seg(a, 3.0, 3.12). Pill left edge x0 = 235 − w/2, middle y. A white circle (radius 20) centered at x0 + 33 with a bold violet #6E5BFF "M" (19px, centered, middle baseline); text from x0 + 67: "Mika" (650, 19px, white, baseline 4px above the middle) and "See you at 7?" (500, 16px, white 82%, baseline 18px below the middle); "now" (600, 15px, white 70%) right-aligned at x0 + w − 20, baseline 8px above the middle.