Plasma Storm Shader

WebGL hover interactive plasma arcs

Why it works: A looping video would get you something like this, but it would weigh a few megabytes and never react to anyone. Plasma Storm runs as a single fragment shader. No assets, no decode cost, and it responds to every visitor's cursor. That mix of motion and interactivity is what makes a hero feel built rather than dressed. Under the hood: - Each arc is a line segment between two attractors, displaced by layered noise so it reads as a jagged bolt instead of a curve. - Brightness is stacked from three falloffs (a tight white core, a colored sheath, and a soft outer glow) and then flickered per arc. - Colors mix between your accent and secondary across arcs and saturate toward white at peak intensity. - Output is tone-mapped, so cranking Intensity brightens the storm without clipping to flat white. Best for: - Gaming, esports, and streaming brands - AI, ML, and developer tools - Crypto, fintech, and energy companies - Product launches, waitlists, and event pages - Music and creative-tool sites Controls: - Accent : primary arc color - Secondary : secondary arc color - Speed : animation pace (0–2) - Arc Count : bolts striking at once (1–5) - Intensity : brightness multiplier (0.1–3) - Hover effect : cursor as dominant attractor - Quality : render DPR (0.5–2) Built for production: WebGL2, ~99% browser coverage. Auto-pauses offscreen and in Framer's canvas. Respects. Resizes any aspect ratio. Set DPR according to device.

WebGL hover interactive plasma arcs