Chromatic Bloom
Luminous color orbs drifting on pure black with Gaussian glow, additive blending, film grain, and cinematic vignette.
What is Chromatic Bloom?
Chromatic Bloom is a free WebGL web effect in the TappyPrism library. Luminous color orbs drifting on pure black with Gaussian glow, additive blending, film grain, and cinematic vignette. It is rendered on the GPU by a fragment shader, so it costs almost nothing on the CPU and works well as a full-screen background. It ships as a single self-contained HTML file (chromatic-bloom.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Drift Speed, Film Grain — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Drift Speed | DRIFT_SPEED | 0.1 – 2 | 0.5 |
| Film Grain | GRAIN_AMOUNT | 0 – 1 | 0.5 |
How to add Chromatic Bloom to your page
- Download the standalone file chromatic-bloom.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/chromatic-bloom.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Chromatic Bloom"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'DRIFT_SPEED', value: 0.5 }, '*');
Frequently asked questions
What is Chromatic Bloom?
Chromatic Bloom is a free WebGL web effect in the TappyPrism library. Luminous color orbs drifting on pure black with Gaussian glow, additive blending, film grain, and cinematic vignette. It is rendered on the GPU by a fragment shader, so it costs almost nothing on the CPU and works well as a full-screen background. It ships as a single self-contained HTML file (chromatic-bloom.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Drift Speed, Film Grain — adjustable in the browser or at runtime.
How do I add Chromatic Bloom to my website?
Download the standalone file at https://prism.tappypotato.com/fx/chromatic-bloom.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/chromatic-bloom.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Chromatic Bloom"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'DRIFT_SPEED', value: 0.5 }, '*').