Dynamic fog and light beam cursor follow effect.
Unlock the source code and CLI installation with a one-time license.
Add the WebglProvider once at the root of your app. See the installation guide for details.
import { WebglProvider } from "@/components/webgl-provider";
export default function RootLayout({ children }) {
return <WebglProvider>{children}</WebglProvider>;
}Then use it anywhere in your app:
<GlowingFog />| Name | Type | Default | Description |
|---|---|---|---|
| speed | number | 18 | Animation speed of the effect. |
| beamColor | string | "#6031ff" | Color of the central light beam. |
| beamX | number | 0.5 | Horizontal position of the beam. |
| beamY | number | 0.5 | Vertical position of the beam. |
| beamScale | number | 0.5 | Intensity / size of the beam glow. |
| fogDensity | number | 1 | Density of the fog. |
| grainIntensity | number | 0.1 | Amount of grain. |
| mouseFollow | number | 0.2 | Strength of mouse-based parallax follow on the beam. |
| onTextureReady | (texture) => void | undefined | Returns the rendered result as a texture. |