Dynamic Flow Curve

Dynamic Flow Curve A physics-based interactive divider that bends and oscillates in response to your cursor.

Dynamic Flow Curve A physics-based interactive divider that bends and oscillates in response to your cursor. Hover over the line to deform it — move away and it springs back with a natural, satisfying wobble. Built entirely with SVG and requestAnimationFrame, no external libraries needed. Features Mouse-reactive — The curve bends toward your cursor's vertical movement in real time. Spring physics — Releases with a smooth oscillation that decays naturally back to rest. 5 controls — Tune color, thickness, sensitivity, return speed, and oscillation — all from the Framer panel. Zero dependencies — Pure SVG and vanilla animation. No extra packages, no performance overhead. Property controls strokeColor — Color of the curve line strokeWidth — Thickness of the line (0.5–8px) sensitivity — How strongly the curve reacts to mouse movement returnSpeed — How fast the curve settles back to rest oscillation — Wobble frequency as the curve returns hideCursor — Hides the cursor on hover for a cleaner look Good for Section dividers between page blocks that feel alive instead of static Hero or landing page accents that reward visitors who explore with the cursor Portfolio and agency sites looking for subtle, memorable micro-interactions Any place a plain hr feels too boring How to use Drop the component onto your canvas and set the layout to Fixed width. Stretch it to the full width of your section. Adjust the controls in the right panel to match your design. Works on both light and dark backgrounds — just change the stroke color.

Physics-based curve, alive with motion