Inspiration
A named easing preset does not show how two interface transitions differ at the same instant. Motion Bench makes that comparison explicit: keep the duration and translation distance fixed, change only the timing curve, and inspect one shared moment.
What it does
Choose curve A or B, start from a preset, or enter four control-point values. Both previews share the same clock. Scrub to inspect a static moment, or play once and pause. The curve chart, movement readouts and CSS output are calculated from the same values. Y values from −1 to 2 allow visible overshoot; X values remain between 0 and 1. Download two CSS transition rules with a shared duration and a reduced-motion alternative.
How it was built
The frontend uses native HTML controls, responsive CSS and browser JavaScript modules. The model inverts the Bézier X coordinate before evaluating Y, so elapsed time is not confused with the parametric curve coordinate. High-precision entered values are preserved in the exported timing functions. The app has no package dependency, account, comparison upload or model API at runtime.
The code and interface were created with Codex under Kwon Jun's submission request. The implementation is new project code. No code or assets from Lantern Lines, Gridweave or another entry were reused. Kwon Jun is an individual participant; no team contributions, interviews or experiments with real people are claimed.
Design choices and challenges
A single timeline keeps the comparison interpretable. A/B labels accompany color. Playback starts on request and ends once. An OS reduced-motion preference enables static comparison, and the static control disables playback while keeping scrubbing available. Invalid coordinates show an error and preserve the last valid curve.
The numerical inverse is an approximation. A valid flat-X edge case showed a maximum tested progress error of about 0.00021 percentage points. The preview demonstrates translation; other CSS properties may clip overshoot differently. The exported rules specify timing functions and a transform transition, rather than inventing a target transform for the user's own layout.
Validation
Seven model tests passed, including analytically solvable degenerate curves, mirrored ease-in/out, overshoot, invalid input and high-precision export round trips. An independent reviewer exercised ten checks in a local DOM fixture. The producer separately verified native browser editing, invalid-value retention, presets, playback end/pause, static mode, keyboard scrubbing and exact downloaded CSS. Narrow views at 390 and 320 pixels had no measured horizontal overflow in the tested browser.
These checks do not establish measured usability improvement or an accessibility certification. No user study was conducted.
Next
Potential future work includes shareable comparison links, more transformed properties and a usability study. Those features are not implemented.
Source and running it
The reviewed six-file source is available at https://github.com/estona815/motion-bench-hyperbloom-october-2026 . Download or clone that repository and follow README.md to start the static app locally; it needs no dependencies, account or paid API. All six remotely retrieved files were byte-compared with the independently reviewed local files. There is no hosted live demo or video.
Log in or sign up for Devpost to join the conversation.