A dithered WebGL flow field background.
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:
<DitherFlow />| Name | Type | Default | Description |
|---|---|---|---|
| speed | number | 1.5 | Animation speed of the flow field. |
| scale | number | 5 | Scale of the flow pattern. |
| ditherSize | number | 2.5 | Size of each dither cell in pixels. |
| tones | number | 3 | Number of levels. Higher values produce smoother gradients. |
| colorA | string | "#000000" | Dark tone color. |
| colorB | string | "#ff0000" | Light tone color. |
| onTextureReady | (texture) => void | undefined | Returns the rendered effect as a texture. |