Elastic Rope Divider
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.
npx shadcn@latest add https://webberui.com/r/elastic-rope-divider.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<ElasticRopeDivider />
Installation
npx shadcn@latest add https://webberui.com/r/elastic-rope-divider.jsonOr, 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"plusaria-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
Overlap Collage Layout
A magazine collage composition of overlapping elements, each lifting on hover.
Paginated Wave Grid
A paginated grid layout — on a page change the outgoing items exit in distance-based waves toward the turn direction while the new page's items flood in from the opposite side, with the page number and total rolling and morphing in sync.