REFERENCE
- Gallery page: https://magpui.com/en/i/pluckable-kinetic-line-divider-074578
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/pluckable-kinetic-line-divider-074578/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/pluckable-kinetic-line-divider-074578/clip.mp4
- Original post: https://x.com/builtbykern/status/2115858654226166011 by @builtbykern
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD: Build a full-width section divider that behaves like a plucked string. At rest it is a perfectly straight hairline. When the pointer comes close it bends gently toward the pointer, following it along the line; when the pointer leaves, the bend is released and travels outward as a damped wave that ripples a few times and settles. It should feel quiet, tactile and physical.
DESIGN SYSTEM: Shown over a soft blurred photographic gradient card (sage and gray, #c8d3cf to #6f7a76) with 6px radius on a black page. Line: 1.5px, white at 85% opacity (#ffffff), slight 1px soft glow. Grab zone: about 40px above and below the line. Maximum bend about 12px. No other UI.
MOTION: Pointer within the grab zone: the line deforms toward the pointer y, with the peak at the pointer x and a smooth falloff of about 120px each side, following with a spring (stiffness 300, damping 20). Release (pointer leaves zone or moves faster than about 1.5px/ms): the deformation becomes free string motion, 3-5 visible oscillations, amplitude halving roughly every 150ms, fully straight within about 900ms. Repeated quick passes stack small ripples.
SECTIONS: Parts: the SVG path and an invisible hit area. States: idle (straight), grabbed (bent toward pointer), released (damped ripple), reduced motion (always straight).
IMPLEMENTATION: React + TypeScript, an SVG path spanning the container width updated each frame from a 1D spring-mass string of about 60 points integrated in requestAnimationFrame (verlet or semi-implicit Euler, fixed timestep), drawn as a smooth Catmull-Rom curve. Stop the loop when the string is at rest. Props: color, thickness, stiffness, damping, grabDistance, maxBend. Supports touch. aria-hidden since it is decoration. prefers-reduced-motion: stays straight. Transparent background so it sits over any content.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens; never copy logos, brand names, photos or illustrations from the original; use a placeholder background.
SUCCESS CHECK:
- The line is perfectly straight at rest and bends only when the pointer is within the grab zone.
- On release it ripples a few times and settles straight within about one second.
- The animation loop stops when idle and reduced motion keeps it static.
