Docs / Components / Dither Effect Loader
Dither Effect Loader
An AI agent dither effect loader featuring an animated Bayer 4x4 dither canvas pulse with organic wave dynamics and smooth pill transition for modern agent interfaces.
Synthesizing graph pathways...
Dependencies
Install the following dependencies to use this component:
1npm install framer-motion clsx tailwind-merge
Installation
Run the following command in your terminal to add the component to your project:
1npx rankflow-ui@latest add dither-loader
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | undefined | Optional status label. When provided, renders inside an AI agent pill badge. When omitted, renders as a compact dither icon. |
| className | string | '' | Additional container CSS classes. |
| boxClassName | string | '' | Additional CSS classes for the canvas icon box. |
| size | number | 32 | Canvas resolution in pixels. |
| speed | number | 1 | Animation speed multiplier. |