Sequin Wave
Grid of metallic sequin discs catching sweeping light with specular reflections and warm shimmer.
What is Sequin Wave?
Sequin Wave fills the frame with thousands of small metallic discs and sweeps a light across them. Each disc is shaded as a tiny curved reflector, so instead of a flat twinkle you get specular highlights that snap on and off as the light passes, and the driving wave is offset per row so the shimmer travels diagonally rather than in one straight band. Wave speed and sparkle intensity are the live parameters. Because every disc is evaluated inside a single fragment shader, the cost does not rise with the number of discs, it rises with pixels, so the effect scales to any viewport. DPR is capped at 2 and it honours prefers-reduced-motion. Strong on fashion, beauty and event pages.
Sequin Wave is a free WebGL web effect in the TappyPrism library. Grid of metallic sequin discs catching sweeping light with specular reflections and warm shimmer. 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 (sequin-wave.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Wave Speed, Sparkle — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Wave Speed | WAVE_SPEED | 0.1 – 2 | 0.8 |
| Sparkle | SPARKLE_INTENSITY | 0.3 – 2 | 1 |
How to add Sequin Wave to your page
- Download the standalone file sequin-wave.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/sequin-wave.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Sequin Wave"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'WAVE_SPEED', value: 0.8 }, '*');
Frequently asked questions
What is Sequin Wave?
Sequin Wave fills the frame with thousands of small metallic discs and sweeps a light across them. Each disc is shaded as a tiny curved reflector, so instead of a flat twinkle you get specular highlights that snap on and off as the light passes, and the driving wave is offset per row so the shimmer travels diagonally rather than in one straight band. Wave speed and sparkle intensity are the live parameters. Because every disc is evaluated inside a single fragment shader, the cost does not rise with the number of discs, it rises with pixels, so the effect scales to any viewport. DPR is capped at 2 and it honours prefers-reduced-motion. Strong on fashion, beauty and event pages. Sequin Wave is a free WebGL web effect in the TappyPrism library. Grid of metallic sequin discs catching sweeping light with specular reflections and warm shimmer. 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 (sequin-wave.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Wave Speed, Sparkle — adjustable in the browser or at runtime.
How do I add Sequin Wave to my website?
Download the standalone file at https://prism.tappypotato.com/fx/sequin-wave.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/sequin-wave.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Sequin Wave"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'WAVE_SPEED', value: 0.8 }, '*').