Spark Chamber
Charged particles spiraling through a magnetic field, leaving curved trails like cloud chamber photography.
What is Spark Chamber?
Spark Chamber is a free Canvas 2D web effect in the TappyPrism library. Charged particles spiraling through a magnetic field, leaving curved trails like cloud chamber photography. 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 (spark-chamber.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Emission Rate, Field Strength — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Emission Rate | EMISSION_RATE | 0.2 – 3 | 1 |
| Field Strength | FIELD_STRENGTH | 0.3 – 2 | 1 |
How to add Spark Chamber to your page
- Download the standalone file spark-chamber.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/spark-chamber.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Spark Chamber"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'EMISSION_RATE', value: 1 }, '*');
Frequently asked questions
What is Spark Chamber?
Spark Chamber is a free Canvas 2D web effect in the TappyPrism library. Charged particles spiraling through a magnetic field, leaving curved trails like cloud chamber photography. 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 (spark-chamber.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Emission Rate, Field Strength — adjustable in the browser or at runtime.
How do I add Spark Chamber to my website?
Download the standalone file at https://prism.tappypotato.com/fx/spark-chamber.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/spark-chamber.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Spark Chamber"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'EMISSION_RATE', value: 1 }, '*').