Motion design · browser-local Bézier tuning · 2026 · Solo — product framing, test-first curve math, interaction design, accessibility, responsive verification, production deployment
Ease Loom
A direct-manipulation workbench that turns cubic Bézier numbers into motion you can feel, inspect, and ship.
The problem
Interface designers and frontend developers tuning a micro-interaction often bounce between raw cubic-bezier numbers, a devtools preview, and a code note. The curve's character is difficult to infer from four values, and the tuned result can drift between visual comparison and final CSS. Ease Loom keeps that bounded workflow causal: drag either control point, replay the same distance and duration against linear motion, inspect a sampled velocity profile, then copy the exact curve shown on screen. The tool models CSS cubic Bézier timing only; its velocity trace is a finite-difference visual aid rather than a physical simulation, and direct manipulation intentionally keeps y within the graph's visible -0.5 to 1.5 range. Curve state remains ephemeral in the browser; there is no upload, account, persistence, paid API, tracking SDK, outbound email, advertising, payment, or destructive operation. Production deployment dpl_9kTYHY2F6Arg6jusWE55x3gvG51v reached READY before independent Foundry HTTPS marker and five-step behavior checks passed at the stable alias.
Architecture
Key decisions
Make tuning direct and causal
The control points, animated race, velocity trace, numeric readout, and exported declaration all derive from one curve state. Nothing on the workbench is a decorative approximation of another value.
Compare character on equal terms
Custom and linear runners travel the same rail for the same selected duration. The only changing variable is easing, so acceleration and settling differences remain legible.
Separate visual size from touch size
Amber handles remain visually precise at 22 SVG units while transparent 48-unit targets provide mobile pointer space. The same targets expose slider semantics and arrow-key nudging, with Shift for larger steps.
Use a drafting bench, not a generic dashboard
Near-black luminance layers, signal amber, narrow operational labels, dense edge-to-edge columns, and one large curve field establish a Configure surface without indigo gradients, glass, feature tiles, icon toppers, or ornamental metrics.
Treat reduced motion as a complete state
When reduced motion is requested, runners render at their final positions rather than playing a gratuitous animation. Editing, profile inspection, and CSS export remain fully available.