Product UI morph — one shape, many states

<direction> A 10-second UI motion piece for a habit tracker app. One rounded shape, never cut: it morphs through button, loader, music player, slider, toggle, chart, toast, changing size, radius and fill while its inner marks swap with a short blur. Light warm-grey canvas, black and white components, one accent: orange. One spring-like curve everywhere, tiny overshoot at most. The last frame equals the first, so it loops. Banned: bouncy easing, particle bursts, glows, gradients on chrome, mismatched strokes, dead time. </direction> <structure> One change per beat at 120 BPM. A simple cursor dot drives each change with a click pulse. The chart state draws itself left to right; the final morph returns to the starting button. </structure> <build> One HyperFrames composition, 1080x1080 square, every frame computed from time. Morphs are width/height/radius tweens on a single element — no cuts, no hidden swaps except the blurred content change. Render at 30fps. </build> <gotchas> If the shape's radius animates on a different spring than its size, corners wobble — drive both from the same tween. Keep the cursor ahead of the morph, never inside it. </gotchas>