Rubber Band Pluck

A horizontal rubber band rendered on canvas, anchored at both ends. Grab any point along the band and drag it to stretch - the band thins as it stretches and glows when under tension. Release to watch it spring back with damping. Features verlet physics with spring constraints, per-segment stretch tracking, metallic anchor rivets, and an optional idle wobble.

rubber-band-pluck-preview

Why it helps: A rubber band is deeply tactile. The stretch-thinning, glow on tension, and spring-back all communicate material properties that users intuitively understand. It's playful and invites repeated interaction.

Also good to know:

-44 segments with 8 constraint iterations per frame is heavier than simpler springs
-The grab radius is fixed - on very high-DPI screens the hover indicator may feel small
-No haptic feedback on mobile, so the 'snap' feeling is purely visual

Source

components/live/RubberBandPluck.tsx

// Loading source...

Usage

example.tsx

import { RubberBandPluck } from "@/components/live/RubberBandPluck";

<RubberBandPluck
  color="#e8b878"
  segments={44}
  onPluck={(peak) => console.log("peak stretch:", peak)}
/>
import { RubberBandPluck } from "@/components/live/RubberBandPluck";

<RubberBandPluck
  color="#e8b878"
  segments={44}
  onPluck={(peak) => console.log("peak stretch:", peak)}
/>

Props

padding24

number

Horizontal inset from each edge to the anchor.

segments44

number

Number of points along the band.

stiffness0.42

number

Spring stiffness (0.3-0.7 recommended).

damping0.985

number

Velocity damping per frame (0.9-0.99).

gravity120

number

Downward pull on the band. 0 for horizontal.

thickness4

number

Band thickness at rest in px.

stretchThinning0.6

number

How much the band thins when stretched.

color"#e8b878"

string

Base band color.

highlight"#fef0d0"

string

Highlight color along the top edge.

glowColor"#ffd68a"

string

Glow color when stretched.

showAnchorstrue

boolean

Show metallic rivet anchors at each end.

grabRadius52

number

Radius around the band where grab activates.

releaseKick0.55

number

Extra velocity on release (0 = physics only).

idleWobble0

number

Idle sine wobble amplitude in px.

onPluck-

(peakStretch: number) => void

Called with peak stretch when released.

onGrab-

() => void

Called when a grab starts.

className-

string

Additional CSS classes.