Add to Cart Part 2

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. Hold indicator (for a press that is held or dragged from T0 to T1): before T0 it behaves exactly like the tap indicator (appears, presses to 80%, ripple at T0); while held it eases from 80% to 86% over the first 0.2s (easeOut) and stays at opacity 1, following the finger position; at release T1 it grows from 86% back to 100% in 0.2s (easeOut) and its opacity stays 1 until 0.12s after T1, then goes linearly to 0 by 0.37s after T1. The shadow is on the fill only. "heavy" means weight 800; a bare "violet"/"cyan" means the solid color.

A product row; tapping Add slides up a small "Added to cart" toast. 
- Photo: 107.5px rounded square (corner 21.5px, diagonal gradient #2E2A5A → #1A1830, 2px border white 8%) centered at (67, 56.5). Inside, a small potted plant (size 86px; drawn about 79px tall, leaf tips 44.5px above its center, pot bottom 34.5px below) centered 8.5px below the photo center. Draw the leaves first (left, right, center), then the pot, then the rim: pot = trapezoid (top 41px wide at 3.5px above the plant center, bottom 31px wide at 34.5px below), vertical gradient #FF7DBA → #E8478F, rim = rounded rect 46.5×8.5px (corner 2.5px) #FF9CCB from 8.5px above the center to the center; three mint leaves (ellipses with radii 8.5×17px) at (−14.5, −17) rotated −0.7 rad, (14.5, −19) rotated 0.7 rad and (0, −27.5), each with a midrib line rgba(0,60,50,0.35), 1.7px, along its long axis from 14px below to 12px above its own center.
- Text: "Desk Plant" (bold 21.5px, #F4F4F8) at x = 140.5, baseline 50; "$12.34" (600, 19px, #9D9BBB) at x = 140.5, baseline 78 (placeholder price).
- Add button: 99×41px pill centered at (394, 56.5), violet→cyan, "Add" (bold 20px, white), idle shine. Tap it at 0.5s (press 92%). done = easeOut(seg(1.0, 1.2)), back 1 − easeOut(seg(3.4, 3.6)): "Add" fades by done and a white check (size 34px, 5.6px stroke) draws itself by done.
- Toast: 421×86px, corner 23.5px, fill #262439, shadow black 50% (canvas shadowBlur 20, 6px down), 2px border white 10%, centered at x = 235. Its center y moves from 275.5 (hidden below the stage) up to 170.5 with back(seg(0.55, 0.95)), stays, then goes down to 275.5 with easeIn(seg(3.3, 3.6)). Content (relative to the toast's left edge x0 = 24.5 and its center y):
  - mini photo: a 58px version of the photo (corner 11.5px, same gradient and 2px border, the plant scaled to 46.5px) centered at (x0 + 43, y), popping in with scale back(seg(0.8, 1.05));
  - a cyan check (size 23.5px, 4.3px stroke) at (x0 + 92.5, y − 9.5) drawing itself by seg(0.95, 1.15), and "Added to cart" (bold 19.5px, #F4F4F8) at x0 + 107.5, baseline y − 3;
  - "1 item" (500, 16px, #9D9BBB) at x0 + 86, baseline y + 21.5;
  - "View" (bold 19.5px, cyan) right-aligned at x0 + 393, baseline y + 6.5;
  - timer bar: a violet→cyan bar 4.7px tall along the toast's bottom edge (clipped to the toast's rounded shape), full width until 1.0s, then its width shrinks linearly to 0 by 3.3s (seg(1.0, 3.3)), anchored at the left, when the toast leaves.
  - Toast layer order: shadowed fill, border, mini photo, check, texts, timer bar. In the Add button the shine is under the text and the check.
- Draw order: photo, text, Add button, toast, tap indicator (on the Add button).