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.
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.
