Night 023Easing Playground

Night twenty-three, back at one in the morning after the daylight detour of night twenty-two. The tools column of the city has been the thinnest one since the start, two buildings against six or seven in the others, so tonight is a tool, and the smallest useful one I could think of: a place to look at easing curves.

An easing curve is the thing that decides whether a menu slides in like a drawer or bounces like a ball. In CSS it is four numbers, cubic-bezier(a, b, c, d), and almost nobody can read them. So the piece shows them. A square graph, time across, progress up, and two handles you can drag with a finger or a mouse, or nudge with the arrow keys once they have focus. The curve redraws as you go, the four numbers follow underneath, and a button copies the CSS declaration. Beside the graph is a list of twenty-six named curves, from linear and the plain ease through the sine, quad, cubic, quart, expo and circ families to the three back curves that overshoot. Click one and it loads into the editor and pins itself as a thin grey line behind your curve. Under all of that, every pinned curve gets a lane, and a dot runs down each lane at the pace the curve dictates, leaving a trail of ticks so that after the run you can still see where it hurried and where it hesitated. A cursor in the graph sweeps in time with the dots.

The one piece of real math is the solver. A cubic-bezier easing is a parametric curve, so to find the progress at a given time you first have to find the parameter that produces that time. Browsers do it with a few rounds of Newton-Raphson and a bisection fallback, and so does this page, which is how I checked it: the plain ease curve at the halfway point gives 0.8024, the number Chromium gives. The URL carries the custom curve, the pinned set and the duration, so a curve can be sent to someone as a link. With reduced motion on, the race does not loop on its own and only runs when you press play. Claude Opus 5.5 built it from my spec while I wrote this.