Button Part 1

A 3D "Continue" button that sinks into its base when pressed, on a 470×240 stage with a dark #13131C background. Point C = (235, 108) from the stage's top-left is the center reference. 4s loop that plays by itself: it is tapped at 0.35s and again at 2.35s (times are seconds from the loop start). The loop is seamless: the spring from the 2.35s tap has fully settled before the loop restarts.
- Press depth d (always driven by the most recent tap, except during the 0.1s before the next tap): from 0.1s before each tap it goes 0 → 1 (ease-out cubic, 1 − (1 − k)³), and at the tap moment the finger lifts, so after the tap d = 1 − x(time since the tap) with a damped spring x(t) = 1 − e^(−ζω₀t)·(cos ω_d t + (ζω₀/ω_d)·sin ω_d t), ω_d = ω₀√(1−ζ²), ω₀ = 20 rad/s, ζ = 0.42. It overshoots a little, so it pops slightly above rest; clamp d to −0.3…1. d⁺ = d clamped to 0…1.
- Layout: the button is 300×84px, fully rounded (radius 42), centered on C horizontally. Its resting top edge is 58px above C (top0 = C.y − 58).
- Floor shadow (drawn first): a black ellipse centered at (C.x, top0 + 110), radius X = 144 × (1 − 0.06·d), radius Y = 14 − 6·d⁺, opacity 0.45 + 0.15·d, blurred with filter blur((14 − 8·d⁺)px).
- Base: the same 300×84px rounded rectangle (radius 42), 18px lower than the resting face (its top at top0 + 18, bottom at top0 + 102), vertical gradient #3B2DA8 (at its top) → #251B78 (at its bottom). It never moves; it shows as an 18px dark lip under the face, and nothing of it shows above the face.
- Face: a 300×84px rounded rectangle (radius 42) at y = top0 + 15.3·d (it slides down into the base, so the lip shrinks). Vertical gradient from mix(#9384FF, #7C6CF5, d⁺) at the top to mix(#6E5BFF, #5B49E8, d⁺) at the bottom (it darkens a little when pressed). A 2px inner highlight line (a stroke, not a fill): rounded rect outline inset 3px left/right and 2px at the top, 294×78, radius 39, white at opacity 0.28 − 0.12·d⁺.
- Label: "Continue", bold (700) 34px, white, centered on the face (it moves with the face).
- Tap indicator (draw it on top), 40px right of the face center (it moves down with the face): a 23px-radius circle, fill white 38%, 3.5px white border, soft dark shadow (black 35%, canvas shadowBlur 10). Time a = seconds relative to each tap (negative = before). From a = −0.42 to −0.1 it scales 125% → 100% (ease-out cubic) while fading in over the first 0.18s; from −0.1 to 0 it presses down to 80% (linear); from 0 to 0.2 it grows back to 100% (ease-out cubic); its opacity stays 1 until a = 0.12 and fades to 0 by a = 0.37. Ripple: from a = 0 to 0.4 a 3px white ring grows from radius 23px to 52px, opacity 0.7 → 0. All these changes are linear unless an easing is named; the 3.5px border scales with the circle; the ring's opacity is separate from the circle's; the indicator itself is never scaled by the button's press. Because the first tap is at 0.35s, the indicator is already fading in at 0s.