All studies17 / 74
Interaction
Elastic divider
Section hairlines that catch the cursor as it passes through, bend under it and ring back to straight when it pulls away.
Where it earns its place
Long editorial or studio pages where section rules are the only ornament: a small reward for the cursor that costs nothing in layout or load.
What we changed
- Set between the Services, Process and Work sections of a Kinetiq page, the place a divider actually lives, instead of on its own.
- Kept the quadratic curve whose control point follows the cursor and the underdamped spring home; damping raised from 5 to 8 so the line rings a few times rather than humming.
- The control point now sits at twice the cursor's offset, since a quadratic only travels half way to it: the line passes under the pointer instead of lagging behind it.
- The release hands the pointer's speed to the spring, and the line warms from a faint hairline toward champagne with tension instead of staying one colour.
- The path is rewritten only when the control point moves, where the original redrew it on every animation frame forever; touch gets a tap-to-pluck, and reduced motion keeps a still, straight rule.