Laser Precision
Laser beams tracing geometric patterns with spark particles and intersection flares.
What is Laser Precision?
Laser Precision is a free Canvas 2D web effect in the TappyPrism library. Laser beams tracing geometric patterns with spark particles and intersection flares. 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 (laser-precision.html) with zero dependencies — no npm package, no framework, no build step. It exposes 3 live parameters — Draw Speed, Brightness, Shape — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Draw Speed | DRAW_SPEED | 0.3 – 3 | 1 |
| Brightness | LINE_BRIGHTNESS | 0.3 – 2 | 1 |
| Shape | SHAPE | 1 – 7 | 1 |
How to add Laser Precision to your page
- Download the standalone file laser-precision.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/laser-precision.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Laser Precision"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'DRAW_SPEED', value: 1 }, '*');
Frequently asked questions
What is Laser Precision?
Laser Precision is a free Canvas 2D web effect in the TappyPrism library. Laser beams tracing geometric patterns with spark particles and intersection flares. 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 (laser-precision.html) with zero dependencies — no npm package, no framework, no build step. It exposes 3 live parameters — Draw Speed, Brightness, Shape — adjustable in the browser or at runtime.
How do I add Laser Precision to my website?
Download the standalone file at https://prism.tappypotato.com/fx/laser-precision.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/laser-precision.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Laser Precision"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'DRAW_SPEED', value: 1 }, '*').