Like Part 2

A heart like button that squashes while pressed and jiggles like jelly when released, 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.
- Heart: 133px wide, centered. Scale it (the whole drawing, so the stroke squashes too) around its bottom tip (60px below the center) with sx = 1 + 0.2·q and sy = 1 − 0.22·q, where q = ease-in-out from 0 to 1 over 1.95–2.2s (squashing while pressed), and after 2.2s q = e^(−4.5τ)·cos(15τ), τ = seconds since 2.2s (it springs tall, then wobbles and settles).
- Floor shadow: an ellipse at (0, +71), radii 64·sx × 6.5px, black 35%, drawn first.
- Before 2.2s: gray #8B89A8 outline, 9px, round joins. From 2.2s: filled with a gradient pink #FF5CA8 top-left → violet #6E5BFF bottom-right, pink glow (rgba(255,92,168,0.85), blur 47px, dropping to 40% between 2.4 and 3.2s), and a glossy highlight: a white 35% ellipse at (−27, −27) from the heart center, radii 13×7px, rotated −34°, squashing with the heart.
- Fake finger at (+9, +4): a white circle, radius 30px, 26% white fill, 2.5px border at 60% white, on top. It fades in over 1.65–1.77s, shrinks to 24px over 1.81–1.95s while its fill rises to 40%, holds until 2.2s, then grows back over 0.08s and fades out over 2.26–2.42s. At 2.2s (the release) a 3px white ring grows from radius 30 to 76px in 0.42s (ease-out) and fades from 55% to 0.
- 3.6–3.95s: the filled heart fades out while the gray outline fades back in.