Skip to content

component

Elastic Snap Line

By Lucas

Details

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.

Introduction

A divider that snaps like a string

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600170898/148/228/309/79/15
  • All · #6906