Plumbline
A physics ID badge on a lanyard: a verlet-simulated strap hangs from above, the charcoal card sways with gravity and an ambient breeze, and you can grab, drag, and fling it — it swings and settles with real momentum. Hand-rolled rope physics, offscreen-paused, reduced-motion-safe.
r3fpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/plumblineManual — install dependencies, then copy the source
npm install three @react-three/fiberProps
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "Avery Quinn" | Name printed on the badge face. |
| role | string | "Staff Engineer" | Role/subtitle printed under the name. |
| cardColor | string | Card slab color (hex). Matte charcoal by default. | |
| strapColor | string | Lanyard strap color (hex). The strap is the composition's single accent — deep crimson by default. | |
| gravity | number | 1 | Gravity multiplier. 1 = natural badge weight, lower floats dreamily. |
| sway | number | 1 | Idle sway intensity (0 disables the ambient breeze). |
| interactive | boolean | true | Enable grab-and-fling dragging. |
| paused | boolean | false | Freeze the badge at its rest pose. Also forced visually static when the user prefers reduced motion (drag stays available but critically damped). |
| className | string | Extra classes for the wrapper (fills its container: relative h-full w-full). |
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.