Vintage Static
Retro TV color bars melting with VHS glitches and CRT scan lines.
What is Vintage Static?
Vintage Static is a free Canvas 2D web effect in the TappyPrism library. Retro TV color bars melting with VHS glitches and CRT scan lines. 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 (vintage-static.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Glitch Intensity, Melt Speed — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Glitch Intensity | GLITCH_INTENSITY | 0.1 – 1 | 0.5 |
| Melt Speed | MELT_SPEED | 0.1 – 1.5 | 0.5 |
How to add Vintage Static to your page
- Download the standalone file vintage-static.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/vintage-static.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Vintage Static"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'GLITCH_INTENSITY', value: 0.5 }, '*');
Frequently asked questions
What is Vintage Static?
Vintage Static is a free Canvas 2D web effect in the TappyPrism library. Retro TV color bars melting with VHS glitches and CRT scan lines. 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 (vintage-static.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Glitch Intensity, Melt Speed — adjustable in the browser or at runtime.
How do I add Vintage Static to my website?
Download the standalone file at https://prism.tappypotato.com/fx/vintage-static.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/vintage-static.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Vintage Static"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'GLITCH_INTENSITY', value: 0.5 }, '*').