Resonant Strings
Vibrating cello strings with standing wave harmonics, overtone interference, and rosin dust particles.
What is Resonant Strings?
Resonant Strings is a free Canvas 2D web effect in the TappyPrism library. Vibrating cello strings with standing wave harmonics, overtone interference, and rosin dust particles. It is drawn with the Canvas 2D API, which trades some GPU efficiency for the widest possible browser and device support. It ships as a single self-contained HTML file (resonant-strings.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Harmonics, Vibration Speed — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Harmonics | HARMONIC_COUNT | 1 – 12 | 5 |
| Vibration Speed | VIBRATION_SPEED | 0.2 – 3 | 1 |
How to add Resonant Strings to your page
- Download the standalone file resonant-strings.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/resonant-strings.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Resonant Strings"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'HARMONIC_COUNT', value: 5 }, '*');
Frequently asked questions
What is Resonant Strings?
Resonant Strings is a free Canvas 2D web effect in the TappyPrism library. Vibrating cello strings with standing wave harmonics, overtone interference, and rosin dust particles. It is drawn with the Canvas 2D API, which trades some GPU efficiency for the widest possible browser and device support. It ships as a single self-contained HTML file (resonant-strings.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Harmonics, Vibration Speed — adjustable in the browser or at runtime.
How do I add Resonant Strings to my website?
Download the standalone file at https://prism.tappypotato.com/fx/resonant-strings.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/resonant-strings.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Resonant Strings"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'HARMONIC_COUNT', value: 5 }, '*').