Add to Cart Part 1

Basics: stage 470×222px, background #13131C, all coordinates in px from the stage's top-left. The animation is a 4s loop that plays by itself and is seamless (the state at 4.0s equals the state at 0s; times are seconds from the loop start, and anything that "wraps" continues into the next loop). The tap happens at 0.5s, the item is "added" at 1.0s, and everything goes back to the start state from 3.4s on. Colors: violet #6E5BFF, cyan #38C6FF, pink #FF5CA8, mint #3DDBB0. "violet→cyan" is a horizontal linear gradient across the shape's own width. Easing: easeOut = 1−(1−k)³, easeIn = k³, easeInOut = cubic in-out, back = 1 + 2.9(k−1)³ + 1.9(k−1)²; seg(a,b) = (time−a)/(b−a) clamped to 0–1; bump(a,b) = sin(π·seg(a,b)). Spring x(t) = 1 − e^(−ζω₀t)·(cos ω_d t + (ζω₀/ω_d)·sin ω_d t), ω_d = ω₀√(1−ζ²). Press: the tapped element (around its own center) stays at 100% until 0.1s before the tap, scales to its press size linearly during that 0.1s, then returns with 1 − (1 − press size)·(1 − x(t)), spring ω₀ = 22, ζ = 0.45 (a small overshoot); after 0.6s it is 1 again. If one element is tapped twice, multiply the two press factors. Tap indicator (draw it on top of everything): a 22.5px-radius circle, fill rgba(215,215,230,0.38), 3.5px white border (92%), soft shadow (black 35%, canvas shadowBlur 10). With a = seconds relative to the tap: from a = −0.42 to −0.1 it scales 125% → 100% (easeOut) while fading in linearly over the first 0.18s; from −0.1 to 0 it presses to 80% (linear); from 0 to 0.2 it grows back to 100% (easeOut); opacity 1 until a = 0.12, then linearly to 0 at a = 0.37. Ripple (drawn under the circle): from a = 0 to 0.4 a 3px white ring grows linearly from radius 22.5 to 51px while its opacity goes linearly 0.7 → 0. The indicator is drawn at its target's current position. Idle shine (where a button has one): from 3.8s for 0.6s (so it wraps to 0.4s of the next loop) a soft white band (gradient transparent → 35% white → transparent, 1.2 × button height wide, sheared −0.4 horizontally around the band's own center) sweeps left to right with easeInOut: its center x goes from (button left − button height) to (button right + button height), vertically centered, clipped to the button. Cart icon (stroke only, round caps and joins; coordinates in units of the icon width s from its center): handle (−0.50, −0.38) → (−0.35, −0.38) → (−0.20, 0.20) → (0.36, 0.20); basket (−0.29, −0.20) → (0.46, −0.20) → (0.36, 0.14) → (−0.20, 0.14); two wheels, circles of radius 0.07 at (−0.12, 0.36) and (0.30, 0.36), each with one spoke from the wheel center to its rim (60% of the stroke width), pointing right at rest and turning with the wheel angle. Both polylines are open (not closed). Sizes written as "A×B" for an ellipse are its two radii. Button labels are vertically centered (text baseline "middle") unless a baseline is given. Check mark: a round polyline through (−0.30, 0.02) → (−0.09, 0.23) → (0.32, −0.20) × its size; "drawing" it means revealing that length from the start. seg(x, a, b) with three arguments means the same clamp((x − a)/(b − a), 0, 1) applied to the value x instead of time.

A product row whose photo flies into the cart. 
- Photo: 129px rounded square (corner 26px) centered at (102, 112), diagonal gradient #2E2A5A (top-left) → #1A1830, 2px border white 8%, content clipped to it. Inside, a simple violet mug centered 3px right and 15px below the photo center: body 64×66px (corner 11px), horizontal gradient #8F7BFF → #6E5BFF, a white 18% highlight strip (10×49px, corner 5px, 7px from the left edge, vertically centered); handle = an arc of radius 16px, 8.5px stroke #B7A9FF, from −1.2 to +1.2 rad, centered 32px right of the body center and 2.5px below it, drawn behind the body; rim = ellipse 32×6px #C9BFFF on the body's top edge, with an inner ellipse 26×4px #3A2F8A. Steam: two wavy 4.3px lines (white 55%, round caps) at x −12 and +10px from the mug center. For each line j (0, 1), phase ph = (T/2 + 0.5·j) mod 1 (T = seconds since the start, so one cycle is 2s); its opacity is 0.8·sin(π·ph); it is a polyline of 13 points, v = 0…1: x = (−12 or +10) + 4.3·sin(5v + 2π·ph), y = −37 − 37v − 10·ph (relative to the mug center, which is at (104.5, 127.5)). It may be cut by the photo's top edge (the photo clips its content).
- Text: "Ceramic Mug" (bold 700, 21.5px, #F4F4F8) at x = 192, baseline y = 86.5; "$12.34" (600, 19px, #9D9BBB) at x = 192, baseline y = 114.5. (The price is a placeholder.)
- Add button: 107.5×41px pill centered at (246, 151), violet→cyan, "Add" (bold 20px, white) in the middle, idle shine. Tap it at 0.5s (press 92%). done = easeOut(seg(1.0, 1.2)); from 3.4s done = 1 − easeOut(seg(3.4, 3.6)). "Add" opacity = 1 − done, and a white check (size 34px, 5.6px stroke, full opacity) draws itself by done (and un-draws when done falls).
- Cart: icon width 77px, 5.6px stroke #E8E6F5, centered at (403, 71.5). τ = seconds since 1.0s: the cart scales 1 + 0.22·sin(17τ)·e^(−6τ) and rotates 0.12·sin(13τ)·e^(−5τ) rad around its center (a bump that dies out).
- Badge (moves with the cart): pink circle radius 16px at 38.5px right and 34.5px above the cart center, pink glow (rgba(255,92,168,0.6), canvas shadowBlur 12), "1" (heavy 800, 19px, white). Scale: back(seg(1.0, 1.3)); from 3.4s, 1 − easeOut(seg(3.4, 3.6)); hidden before 1.0s.
- Flight: a copy of the photo (with mug, without steam) flies on a quadratic Bézier from the photo center (102, 112) through the control point (267, 0.5) to the cart center (403, 71.5) between 0.55s and 1.0s: e = easeInOut(seg(0.55, 1.0)), scale 1 → 0.14 linearly by e, rotation 0.5·e rad, violet glow (rgba(110,91,255,0.5), blur 18). Three ghost copies follow the same path 0.04s, 0.08s and 0.12s later with opacity 0.28, 0.14 and 0.09 (no glow). Each copy (and each ghost) is drawn only while its own progress is strictly between 0 and 1, so the copy disappears on arrival; the original photo stays. It passes over the product text; that is fine.
- Draw order: photo, text, button, cart and badge, ghosts (farthest behind first), flying copy, tap indicator (on the Add button).