# 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.
Canonical: https://gsapvault.com/effects/plucked-strings
Live demo: https://gsapvault.com/demos/plucked-strings/index.html
| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | advanced |
| Plugins | Core GSAP only |
| Techniques | pointer-effects, physics, svg-animation, elastic, micro-interaction, web-audio |
| Uses Lenis | No |
## Overview
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.
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.
## Features
- 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
## Use Cases
- 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
## Vibe-Code Ready Setup
This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.
[How AI-assisted setup works](https://gsapvault.com/vibe-coding)
## 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.
## Integration Preview
How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.
### Quick Start
**1. Add to your HTML ``:**
```html
```
**2. Add the string field to your ``:**
```html
Your headline
```
**3. Add before the closing `` tag:**
```html
```
The script finds every `[data-strings]` container, builds an SVG of evenly spaced horizontal strings sized to the container, and wires up pointer, touch, and keyboard plucking. No other markup is required.
**4. Optional — add a sound toggle** (anywhere on the page) to voice each pluck with a synthesized string note:
```html
```
See the Sound section below. Omit the button and the effect is simply silent.
### Options
All options are data attributes on the `[data-strings]` container.
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| `data-strings` | marker | required | Identifies a string field container |
| `data-strings-count` | integer | `8` | Number of strings, spread evenly through the middle band of the container |
| `data-strings-color` | any CSS color | `#22d3ee` | Stroke and glow color for every string |
| `data-strings-sag` | pixels | `110` | Maximum deflection. The pointer bends a string this far before it slips off and snaps back; keep it under half the gap to the container edge or the glow will clip |
| `data-strings-damping` | number | `3.4` | Exponential decay rate of the ring. Higher dies faster; at `3.4` a full pluck settles in roughly 1.2 seconds |
| `data-strings-idle` | `true`, `false` | `true` | Ambient auto-pluck: a random string gets a gentle pluck every 3 to 4 seconds of pointer inactivity |
| `data-strings-volume` | `0` to `1` | `0.5` | Master gain of the pluck sound (read from the first `[data-strings]` container; the engine is shared) |
| `data-strings-tuning` | `guitar`, `pentatonic` | `guitar` | What the strings play. `guitar` is a standard-tuned guitar's open strings (E2 A2 D3 G3 B3 E4, low E at the bottom) — pair it with `data-strings-count="6"` for the real thing. `pentatonic` is a minor pentatonic over E3 for an ambient field of any string count |
The sound toggle is its own attribute, `data-strings-sound-toggle`, on a `