Velvet Spotlight
Theatrical dust particles caught in sweeping spotlight cones with volumetric rays and warm scattering haze.
What is Velvet Spotlight?
Velvet Spotlight is a free Canvas 2D web effect in the TappyPrism library. Theatrical dust particles caught in sweeping spotlight cones with volumetric rays and warm scattering haze. 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 (velvet-spotlight.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Dust Density, Sweep Speed — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Dust Density | DUST_DENSITY | 0.3 – 2 | 1 |
| Sweep Speed | SWEEP_SPEED | 0.1 – 1.5 | 0.5 |
How to add Velvet Spotlight to your page
- Download the standalone file velvet-spotlight.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/velvet-spotlight.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Velvet Spotlight"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'DUST_DENSITY', value: 1 }, '*');
Frequently asked questions
What is Velvet Spotlight?
Velvet Spotlight is a free Canvas 2D web effect in the TappyPrism library. Theatrical dust particles caught in sweeping spotlight cones with volumetric rays and warm scattering haze. 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 (velvet-spotlight.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Dust Density, Sweep Speed — adjustable in the browser or at runtime.
How do I add Velvet Spotlight to my website?
Download the standalone file at https://prism.tappypotato.com/fx/velvet-spotlight.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/velvet-spotlight.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Velvet Spotlight"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'DUST_DENSITY', value: 1 }, '*').