Kern_KineticLine replaces flat SVG strokes with a responsive string you can actually play. Move the cursor along the line and the component reads your position as a normalized coordinate, applies a localized impulse, and runs a lightweight spring solver so the stroke bends and settles with physical weight—not a generic hover wiggle.
The interaction is built for real layouts: horizontal dividers, vertical accent lines, hero separators, and editorial section breaks. Bend amount, pluck strength, and pointer reach are tuned from the properties panel without touching TypeScript.
Physics panel (all controls always visible):
Bend Amount: caps how far the line can deform (% of container).
Pluck Intensity: how strongly the pointer pulls the string.
Pointer Reach: widens the hit area without increasing bend.
Tension / Damping / Spread: spring stiffness, oscillation decay, and pluck propagation along the line.
Sensitivity + Segments: pointer response and curve resolution.
Layout & polish: orientation (horizontal/vertical), min height, line padding, optional clip for overflow, stroke color/width/opacity, entrance fade, decorative ARIA mode, touch capture.
Defaults are tuned for subtle editorial use out of the box. Single self-contained .tsx file—paste once in Framer Code, no helper imports.
Decorative lines in no-code sites rarely respond with real physical nuance. Native hover effects shift or fade elements—they do not simulate where on a line you touched or how hard you pulled.
Runs a segmented string simulation in real time. Each pointer move maps to a position along the line axis; impulse spreads to neighboring segments with configurable Gaussian spread; damped springs integrate every frame until the stroke returns to rest. The result reads as intentional motion design, not a CSS trick.
Kern_KineticLine replaces flat SVG strokes with a responsive string you can actually play. Move the cursor along the line and the component reads your position as a normalized coordinate, applies a localized impulse, and runs a lightweight spring solver so the stroke bends and settles with physical weight—not a generic hover wiggle.
The interaction is built for real layouts: horizontal dividers, vertical accent lines, hero separators, and editorial section breaks. Bend amount, pluck strength, and pointer reach are tuned from the properties panel without touching TypeScript.
Physics panel (all controls always visible):
Bend Amount: caps how far the line can deform (% of container).
Pluck Intensity: how strongly the pointer pulls the string.
Pointer Reach: widens the hit area without increasing bend.
Tension / Damping / Spread: spring stiffness, oscillation decay, and pluck propagation along the line.
Sensitivity + Segments: pointer response and curve resolution.
Layout & polish: orientation (horizontal/vertical), min height, line padding, optional clip for overflow, stroke color/width/opacity, entrance fade, decorative ARIA mode, touch capture.
Defaults are tuned for subtle editorial use out of the box. Single self-contained .tsx file—paste once in Framer Code, no helper imports.
Decorative lines in no-code sites rarely respond with real physical nuance. Native hover effects shift or fade elements—they do not simulate where on a line you touched or how hard you pulled.
Runs a segmented string simulation in real time. Each pointer move maps to a position along the line axis; impulse spreads to neighboring segments with configurable Gaussian spread; damped springs integrate every frame until the stroke returns to rest. The result reads as intentional motion design, not a CSS trick.
BuiltByKern
