Lab/21
Rope Physics
Each point remembers where it was a step ago, so velocity comes for free. Links are relaxed back to length a few times per step, and fewer passes make the rope stretchier.
- Canvas
- Physics
- Interaction
Grab a rope and swing it
lab/rope-physics1.00g
80%
Installation
Add Rope Physics to your project with the shadcn CLI. The files land in components/lab, ready to edit.
$ pnpm dlx shadcn@latest add @soultel/lab-rope-physicsOr by URL: https://asafefe.dev/r/lab-rope-physics.json
Brings along
- utils
- @soultel/lab-canvas
Usage
import { RopePhysics } from "@/components/lab/rope-physics"
export function Example() {
return (
<div className="h-[420px] touch-none">
<RopePhysics ropes={4} gravity={1.2} />
</div>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| anchor | "pinned" | "pointer" | "pinned" | Pins along the top, or one rope hanging from the pointer. |
| ropes | number | 5 | Pinned ropes. Fewer fit on narrow screens. |
| segments | number | 22 | Links per rope. |
| gravity | number | 1 | Gravity multiplier, 0 to 2. |
| stiffness | number | 0.8 | 0 is stretchy, 1 is a stiff chain. |
| damping | number | 0.99 | Velocity kept per step. |
| collide | boolean | true | The pointer pushes ropes aside. |
| color / accentColor | string | "var(--foreground)", "var(--primary)" | Rope color, and the weights and grab ring. |
| lineWidth | number | 1.5 | Rope thickness in px. |
| ref | Ref<RopePhysicsHandle> | - | reset() rebuilds the ropes. |