Magma Core
Volcanic eruption with thermal lava particles, cooling physics, and magma pool.
What is Magma Core?
Magma Core renders a lava lake in a single fragment shader. Voronoi cells give the crust its plates, domain-warped fbm makes the molten channels between them crawl, and an eruption cycle drives heat through a cooling term: material brightens as it wells up, then darkens and crusts over, so the surface never settles into an obvious loop. Eruption force and eruption interval are the live parameters, and the file accepts ?p= to render below native resolution when the GPU is the bottleneck. DPR is capped at 2 and it honours prefers-reduced-motion. The palette is dominated by black-body reds and oranges, which makes it a natural fit for gaming, energy and anything that needs to read as hot.
Magma Core is a free WebGL web effect in the TappyPrism library. Volcanic eruption with thermal lava particles, cooling physics, and magma pool. It is rendered on the GPU by a fragment shader, so it costs almost nothing on the CPU and works well as a full-screen background. It ships as a single self-contained HTML file (magma-core.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Eruption Force, Eruption Interval — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Eruption Force | ERUPTION_FORCE | 0.3 – 2.5 | 1 |
| Eruption Interval | ERUPTION_INTERVAL | 2 – 15 | 6 |
How to add Magma Core to your page
- Download the standalone file magma-core.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/magma-core.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Magma Core"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'ERUPTION_FORCE', value: 1 }, '*');
Frequently asked questions
What is Magma Core?
Magma Core renders a lava lake in a single fragment shader. Voronoi cells give the crust its plates, domain-warped fbm makes the molten channels between them crawl, and an eruption cycle drives heat through a cooling term: material brightens as it wells up, then darkens and crusts over, so the surface never settles into an obvious loop. Eruption force and eruption interval are the live parameters, and the file accepts ?p= to render below native resolution when the GPU is the bottleneck. DPR is capped at 2 and it honours prefers-reduced-motion. The palette is dominated by black-body reds and oranges, which makes it a natural fit for gaming, energy and anything that needs to read as hot. Magma Core is a free WebGL web effect in the TappyPrism library. Volcanic eruption with thermal lava particles, cooling physics, and magma pool. It is rendered on the GPU by a fragment shader, so it costs almost nothing on the CPU and works well as a full-screen background. It ships as a single self-contained HTML file (magma-core.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Eruption Force, Eruption Interval — adjustable in the browser or at runtime.
How do I add Magma Core to my website?
Download the standalone file at https://prism.tappypotato.com/fx/magma-core.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/magma-core.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Magma Core"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'ERUPTION_FORCE', value: 1 }, '*').