What mass means in an interface
the argumentThree properties, and everything else on this page is a consequence of them.
Mass in an interface is not a polite word for sluggishness. It is a claim about where the energy goes. A dragged element with mass stores the energy of your gesture instead of discarding it, so letting go is not the end of the interaction but its second half. A released element that stops dead has thrown your effort away. One that overshoots and settles has handed it to a process you can watch, predict and eventually tune, which is the only kind of feedback a person can build an intuition about.
Three properties follow. Momentum: a drag carries velocity through to the release, so a flick arrives with the speed you gave it and not with the speed the author guessed. Overshoot: a restoring force that arrives with no velocity is a teleport, so the system is permitted to pass its target and come back, and the number of times it comes back is a dial rather than an accident. Friction: a system with neither damping nor friction rings forever, and infinite ringing is not liveliness, it is an unanswered question.
That is why the instrument is on the page at all. Damping ratio and settle time are the two numbers that decide whether a spring reads as expensive or cheap, and a page that claims a spring reads as expensive while hiding its damping ratio is asking to be believed rather than checked. Everything printed below was read out of the solver on the frame it was painted. None of it is a constant in this file.
A rose engine turned by a spring
the machineThe plate is rose-engine work: a flat disc turned by a cam geared to the feed of the cutter, so the shape left in it is the path the cutter took. Here the feed is a spring, so the rosette you cut is this spring’s own step response, recorded permanently in the material. Underdamp it and the rosette grows extra petals, because the carriage crossed the plate again on the way back. Damp it to critical and the petal count drops to one. That is the damping ratio, drawn by a machine instead of plotted by a chart.
Drag the plate · ←→ throws · Home returns plate 0.00 rev · cut 0 pts · 240 Hz fixed
The carriage follows your pointer through a stiff coupling spring, so it carries the velocity of your hand into the release. Arrow keys throw it, Home returns it to centre.
displacement x velocity v envelope ζ= 0.550 window 1.4 s · at rest
Four charactersset ζ and μ together
A recipe is a considered pair, not a default. Greased keeps a mild underdamped character and adds enough dry friction to kill the ring early, which is the difference between something that settles and something that stops. The table is the same integrator run offline for each pair, not a caption typed by hand; * marks a settle that ended on the stiction lock rather than on the datum.
recipeovershootsettlerings
Continuumoverride the recipe
Machineall engaged
Keep this setupit travels
Every number that makes this carriage, and the point in the
throw it was at. Paste one back to return to exactly this
frame.
Throwimpulse ±1400 px⁄s
Fling applies a real impulse and then arms the stopwatch. Settle time and overshoot are measured from the release, not predicted from a formula, and the two disagree slightly, which is the point of measuring.
The clock and the mass
why a curve cannot be retargetedTwo lanes, one 420 ms journey, one interruption each, one stopwatch each. The difference between the two arrival times is the whole argument, and it is measured rather than asserted.
A CSS transition is a sentence. It has a subject, a duration and an end, and
once the browser has started it the only question left is when it finishes. Retarget it
and the element does not change its mind. It lands wherever the old sentence was taking
it, and a brand new sentence begins from that landing. The clock restarts; the physics
never had any. A spring has no script at all. It is three numbers, and at every substep it
asks the same two questions: how far am I from where I want to be, and how fast am I
already going. The second answer does not depend on how long it has been travelling, so a
new destination changes the force on the next substep and nothing else. The velocity it
was carrying is still the velocity it has.
Springintegrated at 240 Hz
arrival, clean—
arrival, interrupted—
clock restarted—
Δv at retarget—
CSS transition420 ms · cubic-bezier(.2,.8,.2,1)
arrival, clean—
arrival, interrupted—
clock restarted—
Δv at retarget—
spring, painted velocity transition, painted velocity no run yet
Four feelings, all of them real
the dial is not a decorationEach of these is a different number in the same solver. Change it and the character of the motion changes within about five seconds, which is the only test that matters.
Slackζ 0.18
Passes the target by more than half its own travel and rings for the better part of two seconds. This is the character people mistake for responsiveness. It is not; it is a system that has not made up its mind, and the plate will show you the extra petals.
Trueζ 1.00
Arrives once, at the earliest moment an arriving thing is able to arrive, and stops. Almost every good transition in a shipping product has this shape. The difference is that this one is still holding your velocity when it gets there, so an interruption halfway through costs it nothing.
Deadζ 1.70
Never overshoots, and gets there late. The same throw that rings for two seconds at ζ 0.18 crosses its own peak in a quarter of the time here, but it travels a third as far, so the settle time printed in the instrument is the one that tells the story: the carriage is still creeping toward the datum long after the lively one has stopped. Overdamping is what happens when a designer reaches for safety, and it is the fastest available route from liveliness to filing cabinet.
Greasedμ 0.55
Dry friction against the ways, plus a stiction band that locks the carriage the moment the restoring force drops below the friction force. This is the snap. It feels like a detent because it is one, and the ring dies in a fraction of the time the damping alone would have taken.