Glitter Storm
Dense field of tumbling metallic glitter flakes catching rotating spotlights with specular flash physics.
What is Glitter Storm?
Glitter Storm is a free Canvas 2D web effect in the TappyPrism library. Dense field of tumbling metallic glitter flakes catching rotating spotlights with specular flash physics. 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 (glitter-storm.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Sparkle Rate, Density — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Sparkle Rate | SPARKLE_RATE | 0.3 – 2 | 1 |
| Density | DENSITY | 0.3 – 4 | 1 |
How to add Glitter Storm to your page
- Download the standalone file glitter-storm.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/glitter-storm.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Glitter Storm"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'SPARKLE_RATE', value: 1 }, '*');
Frequently asked questions
What is Glitter Storm?
Glitter Storm is a free Canvas 2D web effect in the TappyPrism library. Dense field of tumbling metallic glitter flakes catching rotating spotlights with specular flash physics. 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 (glitter-storm.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Sparkle Rate, Density — adjustable in the browser or at runtime.
How do I add Glitter Storm to my website?
Download the standalone file at https://prism.tappypotato.com/fx/glitter-storm.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/glitter-storm.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Glitter Storm"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'SPARKLE_RATE', value: 1 }, '*').