← Gallery № 38 · webgl

Stardust Veil

Dense cosmic stardust with parallax depth layers, aurora ribbons, constellation threads, and brightness waves.

What is Stardust Veil?

Stardust Veil is a free WebGL web effect in the TappyPrism library. Dense cosmic stardust with parallax depth layers, aurora ribbons, constellation threads, and brightness waves. 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 (stardust-veil.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Drift Speed, Star Density — adjustable in the browser or at runtime.

Parameters

ParameterKeyRangeDefault
Drift SpeedDRIFT_SPEED0.1 – 1.50.4
Star DensitySTAR_DENSITY0.3 – 21

How to add Stardust Veil to your page

  1. Download the standalone file stardust-veil.html and copy its source into your project.
  2. Or embed it as a background iframe:
    <iframe src="https://prism.tappypotato.com/fx/stardust-veil.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Stardust Veil"></iframe>
  3. Tune it at runtime with postMessage:
    iframe.contentWindow.postMessage({ type: 'param', name: 'DRIFT_SPEED', value: 0.4 }, '*');

Frequently asked questions

What is Stardust Veil?

Stardust Veil is a free WebGL web effect in the TappyPrism library. Dense cosmic stardust with parallax depth layers, aurora ribbons, constellation threads, and brightness waves. 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 (stardust-veil.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Drift Speed, Star Density — adjustable in the browser or at runtime.

How do I add Stardust Veil to my website?

Download the standalone file at https://prism.tappypotato.com/fx/stardust-veil.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/stardust-veil.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Stardust Veil"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'DRIFT_SPEED', value: 0.4 }, '*').