Strange Attractor (Lorenz)
Lorenz system with 3D projection, rotation, and glowing particle trails.
What is Strange Attractor (Lorenz)?
Strange Attractor (Lorenz) is a free Canvas 2D web effect in the TappyPrism library. Lorenz system with 3D projection, rotation, and glowing particle trails. 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 (strange-attractor.html) with zero dependencies — no npm package, no framework, no build step. It exposes 3 live parameters — Simulation Speed, Trail Length, Attractor Shape — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Simulation Speed | STEPS_PER_FRAME | 1 – 12 | 4 |
| Trail Length | TRAIL_LENGTH | 500 – 4000 | 2000 |
| Attractor Shape | RHO | 15 – 50 | 28 |
How to add Strange Attractor (Lorenz) to your page
- Download the standalone file strange-attractor.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/strange-attractor.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Strange Attractor (Lorenz)"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'STEPS_PER_FRAME', value: 4 }, '*');
Frequently asked questions
What is Strange Attractor (Lorenz)?
Strange Attractor (Lorenz) is a free Canvas 2D web effect in the TappyPrism library. Lorenz system with 3D projection, rotation, and glowing particle trails. 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 (strange-attractor.html) with zero dependencies — no npm package, no framework, no build step. It exposes 3 live parameters — Simulation Speed, Trail Length, Attractor Shape — adjustable in the browser or at runtime.
How do I add Strange Attractor (Lorenz) to my website?
Download the standalone file at https://prism.tappypotato.com/fx/strange-attractor.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/strange-attractor.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Strange Attractor (Lorenz)"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'STEPS_PER_FRAME', value: 4 }, '*').