All studies

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.

17 / 74

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.