Magnetic Sand
Thousands of particles aligning along invisible magnetic field lines with warm golden glow.
What is Magnetic Sand?
Magnetic Sand is a free Canvas 2D web effect in the TappyPrism library. Thousands of particles aligning along invisible magnetic field lines with warm golden glow. 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 (magnetic-sand.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Field Strength, Particle Count — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Field Strength | FIELD_STRENGTH | 0.3 – 2 | 1 |
| Particle Count | PARTICLE_COUNT | 1000 – 5000 | 3000 |
How to add Magnetic Sand to your page
- Download the standalone file magnetic-sand.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/magnetic-sand.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Magnetic Sand"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'FIELD_STRENGTH', value: 1 }, '*');
Frequently asked questions
What is Magnetic Sand?
Magnetic Sand is a free Canvas 2D web effect in the TappyPrism library. Thousands of particles aligning along invisible magnetic field lines with warm golden glow. 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 (magnetic-sand.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Field Strength, Particle Count — adjustable in the browser or at runtime.
How do I add Magnetic Sand to my website?
Download the standalone file at https://prism.tappypotato.com/fx/magnetic-sand.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/magnetic-sand.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Magnetic Sand"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'FIELD_STRENGTH', value: 1 }, '*').