Plucked Strings
Interactive elastic strings that bend around your cursor and twang back with damped oscillation — with an opt-in sound toggle that voices every pluck as a synthesized, guitar-tuned string note.
About This Effect
A field of taut SVG strings stretched edge to edge across the stage, each one a live elastic instrument. Drag across a string and it bends around your cursor; let go, or whip straight through, and it snaps back with a damped oscillation that rings for about a second before settling dead straight. Deflection drives a cyan glow and stroke bloom, and a hard release passes a sympathetic shimmer to the neighbouring strings, so the whole field reacts like one instrument.
Read the full effect overview
Flip the sound toggle and every pluck is voiced too: a synthesized Karplus-Strong string note per pluck, no audio files, with the six strings tuned like a standard guitar's open strings (E A D G B E) so a whip across the field strums a real open-string chord. A pentatonic tuning is one attribute away for ambient fields with more strings. Sound is strictly opt-in and off by default.
Built on GSAP core alone with no plugins, and strings at rest cost zero work per frame.
What's Included
- Pointer-tracking elastic bend rendered as a single SVG quadratic bezier per string
- Damped-sine release: strings overshoot, ring, and converge to straight in about 1.2 seconds
- Deflection-driven glow and stroke width, from a thin dim line at rest to a bright cyan bloom at full sag
- Sympathetic vibration: hard releases excite neighbouring strings at 20% amplitude with a phase offset
- Whip detection: a fast vertical swipe snaps every string it crosses into a cascading chord
- Opt-in pluck audio: a sound toggle voices every pluck with Karplus-Strong synthesis (Web Audio, no samples), tuned to a standard guitar's open strings (E A D G B E) with strength driving volume, brightness, and stereo pan; a pentatonic tuning option covers non-guitar fields
- Ambient idle auto-pluck keeps the field alive before anyone interacts, and stops the moment the pointer moves
- Touch-drag plucking works identically on phones via pointer events
- Keyboard playable: arrow keys walk and pluck the strings, Enter plucks hard
Perfect For
- Hero sections for music, audio, and creative studio sites that want a playable centrepiece
- Portfolio and agency landing pages with an interactive signature moment above the fold
- Product pages for audio gear, plugins, and instruments where the metaphor sells itself
- Event and festival microsites that need the page itself to feel performative
- 404 or waiting pages that reward idle cursors with something tactile
How It Works
Each string is an SVG path whose quadratic bezier control point tracks the pointer, with deflection clamped to a configurable maximum sag. On release the string enters a free damped-sine oscillation, controlY = amplitude x sin(wt + phase) x e^(-kt), stepped on gsap.ticker until the envelope falls below a rest threshold. Active strings update their path with one attribute write per frame while resting strings do zero work, and the ticker callback removes itself entirely once the field is still. Deflection simultaneously drives stroke width and glow opacity, and releases past half the maximum sag hand a phase-offset fraction of their amplitude to the neighbouring strings.
With sound enabled, every ring start also plays a Karplus-Strong pluck: a noise burst circulated through a one-sample averaging filter, rendered once per pitch into an AudioBuffer and cached. Strings are pitched as a standard guitar's open strings from low E2 (or a minor pentatonic via an attribute), pluck strength scales both the note's gain and a lowpass cutoff, stereo pan follows the pluck position, and the AudioContext is only ever created inside the toggle click, which keeps it inert until the visitor opts in and satisfies browser autoplay policies.