Champagne Fizz
Effervescent bubbles rising with wobble physics, refractive highlights, and sparkle bursts.
What is Champagne Fizz?
Champagne Fizz simulates rising bubbles with a few cheats that hold up visually. Bubbles are not spawned at random positions: they nucleate at fixed sites along the bottom, the way real carbonation does, then rise with a wobble that grows with speed. Each one is drawn as a radial gradient with an offset specular highlight and a refractive rim, and short-lived sparkles fire as bubbles reach the surface. The pools are capped at 1,200 bubbles and 200 sparkles and reused rather than reallocated, so the cost stays flat once the glass fills up. Bubble rate and rise speed are the live parameters, the file accepts ?p= to render at reduced resolution, and it honours prefers-reduced-motion. A natural fit for celebration and drinks pages.
Champagne Fizz is a free Canvas 2D web effect in the TappyPrism library. Effervescent bubbles rising with wobble physics, refractive highlights, and sparkle bursts. 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 (champagne-fizz.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Bubble Rate, Rise Speed — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Bubble Rate | BUBBLE_RATE | 1 – 10 | 3 |
| Rise Speed | RISE_SPEED | 0.5 – 4 | 1.5 |
How to add Champagne Fizz to your page
- Download the standalone file champagne-fizz.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/champagne-fizz.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Champagne Fizz"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'BUBBLE_RATE', value: 3 }, '*');
Frequently asked questions
What is Champagne Fizz?
Champagne Fizz simulates rising bubbles with a few cheats that hold up visually. Bubbles are not spawned at random positions: they nucleate at fixed sites along the bottom, the way real carbonation does, then rise with a wobble that grows with speed. Each one is drawn as a radial gradient with an offset specular highlight and a refractive rim, and short-lived sparkles fire as bubbles reach the surface. The pools are capped at 1,200 bubbles and 200 sparkles and reused rather than reallocated, so the cost stays flat once the glass fills up. Bubble rate and rise speed are the live parameters, the file accepts ?p= to render at reduced resolution, and it honours prefers-reduced-motion. A natural fit for celebration and drinks pages. Champagne Fizz is a free Canvas 2D web effect in the TappyPrism library. Effervescent bubbles rising with wobble physics, refractive highlights, and sparkle bursts. 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 (champagne-fizz.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Bubble Rate, Rise Speed — adjustable in the browser or at runtime.
How do I add Champagne Fizz to my website?
Download the standalone file at https://prism.tappypotato.com/fx/champagne-fizz.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/champagne-fizz.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Champagne Fizz"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'BUBBLE_RATE', value: 3 }, '*').