Skip to content

Elastic Snap Line

A divider that snaps like a string

Elastic Snap Line preview image 1

Summary

A divider that snaps like a string

Description

A thin line stretches toward your cursor as you approach, and when you let go it snaps back and vibrates — a real underdamped spring that oscillates a few visible times before settling. The release keeps the exact velocity of your gesture, which is what makes it feel like a plucked string instead of an animation.

The bow is bounded so it never escapes its frame, whatever size you give it. Optional end dots, optional label above the line — it works as a section divider with a title, or as a pure interactive accent.

The loop only runs while the line is deformed or vibrating; at rest it costs nothing.

SVG and requestAnimationFrame, no dependencies, nothing loaded from outside. Honours prefers-reduced-motion, and renders as a clean straight line on the Framer canvas.

Rank history How rankings work →

125015001750191518/149/49/2610/1811/9
  • All · #8921

Details

More like this