Scrub
Labels you drag to change the number.
- Client
- Gridline
- Year
- 2024
- Role
- Interaction design, front end
The brief
Gridline is a motion tool for designers who think in curves, not code. Its inspector was a stack of number fields, and tuning a spring meant typing, checking, typing again.
Every label became a handle. Drag it sideways and the value moves with your hand; the preview plays as you go, so you tune by feel and read the number afterwards.
Spring
Stiffness
Damping
What took longest
The rate. A pixel of drag can't mean the same thing for stiffness, which runs to the hundreds, and damping, which lives between 10 and 60. Each field scales the drag to its own range so a full sweep of the hand covers it.
The field stays a field. Click it and you can type; the drag only starts once the pointer has moved a few pixels, so a click never nudges the value.
Details
- Dead zone
- 3px before a drag starts
- Modifiers
- Shift for fine, Option for coarse
- Pointer
- Locked while dragging, wraps at the screen edge