Jazz Chaos
Syncopated particle groups moving in rhythm with swing timing and solos.
What is Jazz Chaos?
Jazz Chaos is built around a timing engine rather than a physics one. Tempo, from 60 to 200 BPM, sets the beat length, and a swing parameter pushes the off-beats later, which is the small rhythmic lie that makes a groove feel played instead of metronomic. Particle groups fire on syncopated subdivisions, and every so often one group breaks away into a solo before rejoining the rhythm. Everything is drawn with additive blending and radial gradients over a canvas that fades rather than clears, so trails read as motion blur. Tempo and swing are the two live parameters, the file accepts ?p= to render at reduced resolution, and it honours prefers-reduced-motion.
Jazz Chaos is a free Canvas 2D web effect in the TappyPrism library. Syncopated particle groups moving in rhythm with swing timing and solos. 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 (jazz-chaos.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Tempo, Swing — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Tempo | TEMPO | 60 – 200 | 120 |
| Swing | SWING | 0 – 1 | 0.6 |
How to add Jazz Chaos to your page
- Download the standalone file jazz-chaos.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/jazz-chaos.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Jazz Chaos"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'TEMPO', value: 120 }, '*');
Frequently asked questions
What is Jazz Chaos?
Jazz Chaos is built around a timing engine rather than a physics one. Tempo, from 60 to 200 BPM, sets the beat length, and a swing parameter pushes the off-beats later, which is the small rhythmic lie that makes a groove feel played instead of metronomic. Particle groups fire on syncopated subdivisions, and every so often one group breaks away into a solo before rejoining the rhythm. Everything is drawn with additive blending and radial gradients over a canvas that fades rather than clears, so trails read as motion blur. Tempo and swing are the two live parameters, the file accepts ?p= to render at reduced resolution, and it honours prefers-reduced-motion. Jazz Chaos is a free Canvas 2D web effect in the TappyPrism library. Syncopated particle groups moving in rhythm with swing timing and solos. 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 (jazz-chaos.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Tempo, Swing — adjustable in the browser or at runtime.
How do I add Jazz Chaos to my website?
Download the standalone file at https://prism.tappypotato.com/fx/jazz-chaos.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/jazz-chaos.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Jazz Chaos"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'TEMPO', value: 120 }, '*').