Plucked Strings

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add the string field to your <body>:

Code snippet omitted: it ships with the download.

3. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

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:

Code snippet omitted: it ships with the download.

See the Sound section below. Omit the button and the effect is simply silent.

Using It With Your Own Design

What the effect needs from your markup: one element carrying the data-strings attribute, plus (only if you want sound) a button carrying data-strings-sound-toggle. Those attributes are the entire structural contract; the script never reads any class name, so the demo's toggle styling (.showcase-sound) is yours to replace. The container must have a real height (the strings are laid out as a fraction of it) and position: relative, because the generated SVG is absolutely positioned to fill it. Give the container tabindex="0" if you want the keyboard plucking to work.

Colours are CSS. The script reads two custom properties off the container once at init: --strings-rest (the hairline every string shows at rest) and --strings-hot (the colour a string takes under tension). The demo sets them on .strings-field to a translucent chalk and the page accent. Change either there and the strings follow; data-strings-color overrides the tension colour for one field without touching CSS.

What is only the demo's styling: the prompt line and the bottom bar (.venue__bar) are the page the demo is pretending to be. Delete or replace them freely; the strings render over any content and any background you supply, and the demo's .venue grid padding is layout for that copy, not something the effect needs.

CSS the effect depends on:

• .ps-svg (the generated SVG) must stay position: absolute; inset: 0; pointer-events: none; so the container, not the SVG, receives pointer events. Keep that rule when porting the stylesheet.
• touch-action: pan-y on the container. A vertical swipe that lands on the field scrolls the page as normal, so the section never traps a visitor mid-scroll; a tap plucks the nearest string and a sideways strum bends the strings it passes. Set touch-action: none instead only if the field fills a page that has nowhere to scroll and you want vertical whips on touch as well. The demo restores touch-action: auto under reduced motion, where the strings are inert.
• overflow: clip (or hidden) on the container if you do not want a fully bent string drawing past its edges.
• Content inside the container that should not take the pointer (the demo's copy) gets pointer-events: none, otherwise a sweep over your headline stops plucking. Anything that must stay clickable (the demo's sound toggle) gets pointer-events: auto and a z-index above the SVG.
• There are no pre-hidden reveal states: with JavaScript disabled the container simply renders without strings, and everything inside it stays visible.

Options

All options are data attributes on the [data-strings] container.

The sound toggle is its own attribute, data-strings-sound-toggle, on a <button> anywhere in the page rather than on the container — see Sound below.

How the Interaction Feels

• Slow drag: the string under the cursor bends and follows, clamped to the sag limit, with the bend centred on the pointer.
• Release or slip: past the sag limit the string slips off the cursor and rings down from wherever it was, a damped sine, never a linear snap.
• Whip: a fast vertical swipe crosses several strings in one move; each snaps immediately in the direction of travel, and the field rings as a chord before settling.
• Hard release: anything past about half the sag limit passes a 20% amplitude, phase-offset shimmer to the two neighbouring strings.
• Tension colour: stroke width and the accent stroke's opacity scale with the current deflection, so a hard pluck flashes to full colour and fades back to the resting hairline as the ring decays.
• Touch: a tap plucks the nearest string at the point you touched, and a sideways strum bends what it passes. Vertical swipes scroll the page.

Sound

With the toggle on, every pluck also plays a synthesized string note — Karplus-Strong synthesis through the Web Audio API, generated at runtime with no audio files to load.

• Opt-in by design. Sound is off until the visitor presses a [data-strings-sound-toggle] button. The AudioContext is created inside that click, which is exactly what browser autoplay policies require, so there is never a blocked-audio warning. Toggling off suspends the context (no idle battery cost); toggling back on resumes it.
• Tuning. By default the strings are a standard-tuned guitar's open strings — E2 A2 D3 G3 B3 E4, low E at the bottom — so a six-string field is literally a guitar and a whip across it strums the open strings. Fields with more strings repeat the tuning an octave up. data-strings-tuning="pentatonic" switches to a minor pentatonic over E3, which suits ambient fields of arbitrary string counts (every combination of notes is consonant).
• Expression. Pluck strength drives the note's volume and its brightness (a lowpass opens with harder plucks), stereo pan follows where along the string you plucked, and a few cents of random detune keep repeated notes from sounding sampled. Sympathetic neighbour shimmers play quietly; the keyboard and idle auto-pluck are voiced like any other pluck. Wake plucks fire before the toggle can have been pressed, so they are always silent.
• The toggle button. Any <button> with data-strings-sound-toggle works, anywhere in the page; every such button controls the one shared engine and stays in sync. The script updates aria-pressed, toggles an is-on class for your styling, and rewrites the text of an optional inner [data-sound-label] element to "Sound on"/"Sound off". A field with no toggle button on the page never creates any audio object at all.
• Headroom. Notes route through a shared compressor, so a nine-string whip chord does not clip.
• iPhone silent switch. iOS mutes plain Web Audio whenever the hardware ring/silent switch is on silent, which most phones are. The engine handles this two ways: on iOS 17+ it requests a media-playback audio session (navigator.audioSession.type = 'playback'), and on older versions it loops a 50ms silent <audio> element while sound is on, which holds the session in the playback category — the same one a video player uses. Both mean the plucks stay audible with the phone on silent, and the silent loop starts inside the toggle tap so it is never blocked by autoplay rules. The engine also resumes the context from iOS's 'interrupted' state when the tab returns to the foreground.

Accessibility

• Reduced motion: under prefers-reduced-motion: reduce the strings render as static straight lines. No oscillation, no auto-pluck, no wake, and the pointer does nothing; all text in the container stays fully visible. The sound engine is never wired up (nothing can be plucked), and the demo hides its toggle button.
• Sound: strictly opt-in via an explicit button press, never autoplayed, and the toggle reflects its state through aria-pressed. Browsers without Web Audio simply leave the toggle in the off state.
• Keyboard: with the container focused, ArrowUp and ArrowDown pluck each string in turn and Enter (or Space) plucks the current string hard. :focus-visible shows a visible outline on the field.
• No JavaScript: the container renders without strings; nothing is hidden behind a script.
• Screen readers: the generated SVG is aria-hidden="true". Give the container a short aria-label describing the keyboard interaction, as in Quick Start.

Performance Notes

• Strings at rest cost zero work per frame. The gsap.ticker callback is only attached while at least one string is bending or ringing, and removes itself when the field is still.
• Each active string writes one path d (shared by the hairline and its tension twin) plus two stroke attributes per frame; there is no layout work in the loop.
• No SVG filters: the tension colour is a second plain stroke, so a bent string costs the same to paint as a straight one.
• On resize the field re-measures and redraws at rest after a 150ms debounce.

Dependencies

Required:

• GSAP 3.12+ (core only, no plugins)