Analog Drift
Morphing Lissajous figures with phosphor persistence trails, harmonic overtones, and oscilloscope grid.
What is Analog Drift?
Analog Drift is a free Canvas 2D web effect in the TappyPrism library. Morphing Lissajous figures with phosphor persistence trails, harmonic overtones, and oscilloscope grid. 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 (analog-drift.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Drift Speed, Trail Length — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Drift Speed | DRIFT_SPEED | 0.1 – 2 | 0.5 |
| Trail Length | TRAIL_LENGTH | 0.3 – 2 | 1 |
How to add Analog Drift to your page
- Download the standalone file analog-drift.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/analog-drift.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Analog Drift"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'DRIFT_SPEED', value: 0.5 }, '*');
Frequently asked questions
What is Analog Drift?
Analog Drift is a free Canvas 2D web effect in the TappyPrism library. Morphing Lissajous figures with phosphor persistence trails, harmonic overtones, and oscilloscope grid. 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 (analog-drift.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Drift Speed, Trail Length — adjustable in the browser or at runtime.
How do I add Analog Drift to my website?
Download the standalone file at https://prism.tappypotato.com/fx/analog-drift.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/analog-drift.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Analog Drift"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'DRIFT_SPEED', value: 0.5 }, '*').