---
title: "Kinetic Line — Framer component · Best of Framer"
description: "$5.00 · Framer component · by BuiltByKern · Effects. Kinetic line/divider physics—bend"
canonical: "https://framer.elliotli.dev/component/kinetic-line"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Kinetic Line

# Kinetic Line

Divider that bends

[View on Framer](https://framer.com/marketplace/components/kinetic-line/?via=elliot-li)

![Kinetic Line preview image 1](https://framer.elliotli.dev/og/component/kinetic-line/d1db736613d57fcb/1600x1180.jpg)

## Summary

Kinetic line/divider physics—bend

## Description

## About this Component

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.

## Full Description

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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #2557

## Details

- **Author**: BuiltByKern
- **Price**: $5.00
- **Published**: 2026-05-30
- **Updated**: 2026-10-08
- **Added**: 2026-05-19
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows