A WebGL pulsing glow effect with halftone rendering.
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:
<HalftoneGlow />| Name | Type | Default | Description |
|---|---|---|---|
| speed | number | 16 | Pulse speed. |
| blurAmount | number | 0.2 | Amount of blur. |
| edgeSize | number | 10 | Thickness of the edge glow. |
| edgeDistortion | number | 0.02 | How much noise warps the edge glow. |
| ringDistortion | number | 0.1 | How much noise warps the ring pulse. |
| edgeColor | string | "#1d334e" | Color of the edge glow. |
| ringColor | string | "#4599ff" | Color of the ring pulse. |
| onTextureReady | (texture) => void | undefined | Returns the rendered effect as a texture. |