Elastic Snap Line

Elastic Snap Line
Elastic Snap Line

About Elastic Snap Line

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.

From Lucas

Ocean Hero 3D
Ember Button
Particle Image PNG
Mesh Gradient

Related Components

3D Image Stack Scrol
Storytelling Hero
Hero Load Animation
Black Hole Galaxy