Pendulum Wave
Physics-based pendulum wave creating emergent interference patterns.
What is Pendulum Wave?
Pendulum Wave is a free Canvas 2D web effect in the TappyPrism library. Physics-based pendulum wave creating emergent interference patterns. 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 (pendulum-wave.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Pendulum Count, Cycle Duration — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Pendulum Count | NUM_PENDULUMS | 6 – 40 | 20 |
| Cycle Duration | CYCLE_DURATION | 20 – 120 | 60 |
How to add Pendulum Wave to your page
- Download the standalone file pendulum-wave.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/pendulum-wave.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Pendulum Wave"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'NUM_PENDULUMS', value: 20 }, '*');
Frequently asked questions
What is Pendulum Wave?
Pendulum Wave is a free Canvas 2D web effect in the TappyPrism library. Physics-based pendulum wave creating emergent interference patterns. 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 (pendulum-wave.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Pendulum Count, Cycle Duration — adjustable in the browser or at runtime.
How do I add Pendulum Wave to my website?
Download the standalone file at https://prism.tappypotato.com/fx/pendulum-wave.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/pendulum-wave.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Pendulum Wave"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'NUM_PENDULUMS', value: 20 }, '*').