---
title: "Plasma Storm Shader — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Abhrajit Ray · Backgrounds. WebGL hover interactive plasma arcs"
canonical: "https://framer.elliotli.dev/component/plasma-storm-shader"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Plasma Storm Shader

# Plasma Storm Shader

WebGL hover interactive plasma arcs

[View on Framer](https://framer.com/marketplace/components/plasma-storm-shader/?via=elliot-li)

![Plasma Storm Shader preview image 1](https://framer.elliotli.dev/og/component/plasma-storm-shader/3379def3340d8a12/1600x1200.jpg)

## Summary

WebGL hover interactive plasma arcs

## Description

**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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #10741

## Details

- **Author**: Abhrajit Ray
- **Price**: $10.00
- **Published**: 2026-05-12
- **Updated**: 2026-05-12
- **Added**: 2026-05-11
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background