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.
Coordinate-mapped pluck: interaction follows pointer position along the line (not just on/off hover).
Unified Physics panel: eight parameters in one group—no hidden preset modes, no code branching for buyers.
Layout control: horizontal or vertical orientation, min height, padding, optional clip vs visible overflow for bends outside the frame.
Stroke system: color, width, opacity with round caps for editorial surfaces.
Production guardrails: useIsOnFramerCanvas (static preview in editor), useReducedMotion (capped motion), pointer capture for touch drag, SSR-safe patterns.
Marketplace-ready: one file delivery, Framer + Framer Motion only, nested property controls with descriptions, optimized defaults.
Add a line that visitors want to touch—without building custom physics from scratch. Built brutally well by KERN.
BuiltByKern
