Twang Lanyard
A two-leg SVG lanyard simulation that lets a weighted event pass fall, whip, twist, and settle through damped rope constraints.
About This Effect
A tactile event-pass effect that couples two independently simulated SVG strap chains to one weighted rigid badge using GSAP core. Grab the pass and release a hard sideways whip to send delayed S-curves through both legs, kick the connector, twist the pass through centre, and resolve into decreasing pendulum swings.
What's Included
- Dual rope chains — independent Verlet points feed one shared connector
- Weighted badge dynamics — translation, rotation, gravity, and angular release velocity
- Layered velocity response — perspective, highlight direction, shadow travel, and connector tension
- Real touch dragging — the same grab-and-whip simulation runs on coarse pointers with stronger damping
- Keyboard tugs — arrow keys apply directional impulses while Enter and Space trigger a full twang
- Configurable physics — tune gravity, damping, stiffness, solver iterations, swing strength, and strap copy
- Static fallback — polished hanging SVG and pass remain visible without JavaScript or with reduced motion
- Lifecycle-safe setup — per-instance listeners, visibility observer, ticker, resize timer, matchMedia, and GSAP context all revert cleanly
Perfect For
- Conference landing pages with a tactile attendee-pass hero
- Festival and culture sites with a branded interaction visitors can immediately understand
- Speaker announcements with a memorable portrait-led identity treatment
- Event registration confirmations with a playful reward moment
- Portfolio experiments demonstrating DOM and SVG constraint physics without canvas
How It Works
Each strap is a chain of Verlet points joined by fixed-distance constraints. The two lower endpoints repeatedly solve against a shared attachment point on a rigid badge body, so a fast release travels through the legs with a visible delay before pulling the connector taut.
GSAP's ticker advances the fixed-step simulation and core setters render the SVG path geometry, badge translation and rotation, perspective tilt, moving light, shadow, and connector scale. The return motion comes from gravity, damping, and constraint relaxation rather than an elastic easing preset.