Like Part 1

A heart "like" button that bursts when tapped, 4s loop that plays by itself, on a 470×230 stage with a dark #13131C background. Times are seconds from the loop start; positions are from the stage center (+x right, +y down).
- Basics: draw on a <canvas> as a pure function of time. ease-out = 1−(1−k)³, ease-in = k³, ease-in-out = cubic in-out, back ease = 1 + 2.9(k−1)³ + 1.9(k−1)² (about 112% at its peak). "Pop" and "press" mean half a sine wave (1 → peak → 1). Glow sizes are canvas shadowBlur values; "the glow drops to 40%" means its blur shrinks linearly to 40%. Gradients span the shape's bounding box and move, rotate and scale with it. Sizes are stage pixels: on a 2× canvas, double shadowBlur too. Text is a bold system sans-serif (Segoe UI, SF Pro or system-ui). Line fades without a stated curve are linear.
- Heart shape: x = 16·sin³θ, y = −(13cosθ − 5cos2θ − 2cos3θ − cos4θ), θ from 0 to 2π (θ = 0 is the dip at the top, θ = π the bottom tip); subtract 2.5 from y and divide both by 32. That gives a heart 1 unit wide and 0.9 tall, centered on (0, 0); multiply by the width you want.
- Draw order: ring, then mini hearts and dots, then the heart, then the finger.
- Idle: an outline heart 133px wide (path width), 9px gray #8B89A8 stroke, round joins, at the center.
- Fake finger at (+13, +22): a white circle, radius 30px, 26% white fill, 2.5px border at 60% white, drawn on top of everything. It presses at 2.2s. It fades in over 0.12s starting 0.32s before the (first) press and fades out over 0.16s starting 0.06s after the (last) press. Each press: it shrinks to 24px and back (half sine from 0.14s before to 0.04s after) while its fill rises to 40% on the same curve, and a 3px white ring grows from radius 30 to 76px in 0.42s (ease-out) while fading from 55% to 0.
- 2.06–2.22s: the outline heart presses in to 90%.
- 2.2s: the outline is replaced by a filled heart (gradient pink #FF5CA8 top-left → violet #6E5BFF bottom-right) with a pink glow (rgba(255,92,168,0.85), blur 47px, full strength at once, dropping to 40% between 2.4 and 3.2s). It grows from 20% to 100% in 0.35s with the back ease.
- 2.2–2.6s: a ring (stroke gradient violet top-left → pink bottom-right, 90% opacity) grows from radius 22 to 90px (ease-out) while its stroke thins linearly from 34px to 0.
- 2.24–2.95s: 8 mini hearts fly out, 45° apart, the first at 11.5° clockwise from straight up. Distance from the center goes from 58px to 101px (ease-out); multiply the horizontal offset by 1.35 (for the dots too). Each heart is 18px wide at full size, rotated so its top points outward; colors in turn pink, cyan #38C6FF, gold #FFD166, violet. Next to each one, 19.5° further clockwise and at 86% of the distance, is a dot of radius 4.7px whose color is two steps further along that list. Hearts and dots start at full size and shrink to 0 (scale = 1 − ease-in), no fading.
- 3.6–3.95s: the filled heart fades out while the gray outline fades back in.