Elastic Rope Divider: Free React + Tailwind Component

A pluckable rubber-band divider that bounces and oscillates when pulled and released.

Like a taut rubber band stretched between sections: the pointer coming close snaps it into a V that follows the cursor, and releasing (or pulling past the limit so it slips out of your grip) sends it oscillating back on a damped spring, carrying the momentum from the instant of release. The physics is a hand-written rAF damped spring driving the control point of a quadratic bezier, and the loop stops itself once it settles at rest.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add elastic-rope-divider.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Cord colorcolor

Line weightthickness

Natural droopsag

Stretch limitmaxStretch

110

Snap radiusgrabRadius

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<ElasticRopeDivider/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/elastic-rope-divider.en.json

Or, once registries are configured in components.json, install it as @webberui/elastic-rope-divider.

Usage

import { ElasticRopeDivider } from "@/components/ui/elastic-rope-divider";

<section>Previous section</section>
<ElasticRopeDivider className="text-neutral-300 dark:text-neutral-700" />
<section>Next section</section>

{/* Customized: a thicker colored rope with a natural sag */}
<ElasticRopeDivider color="#f43f5e" thickness={3} sag={12} />

Props

Prop	Type	Default	Description
`color`	`string`	`"currentColor"`	Rope color; inherits the text color by default, so an outer `text-*` class can control it
`thickness`	`number`	`2`	Line thickness (px)
`sag`	`number`	`0`	Natural sag at rest (px); `0` is a perfectly straight line
`height`	`number`	`64`	Height of the interactive hit area (px), with the rope vertically centered inside it
`maxStretch`	`number`	`110`	Stretch limit (px); pulling past it makes the rope slip out of your grip and snap back
`grabRadius`	`number`	`28`	How close (px) the pointer must come for the rope to snap to it and follow
`className`	`string`	—	Forwarded to the outer container

Accessibility

Marked with role="separator" plus aria-orientation="horizontal", so assistive technology treats it as an ordinary horizontal divider
The SVG itself is marked aria-hidden; the plucking interaction is purely decorative and carries no content or operation
When the user has "reduce motion" enabled at the system level, snapping, dragging, and bouncing are disabled and only a static rope line is rendered
The component is not focusable and does not intercept Tab order, so keyboard navigation is entirely unaffected

Elastic Rope Divider