Dither Spotlight
A WebGL cursor spotlight rendered as ordered halftone dots instead of a soft glow.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/dither-spotlight.json▸ Or install manually
- Copy the source from the Code tab above.
- Place it at
components/mellow/dither-spotlight.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| radius | number | 220 | Spotlight radius in pixels. |
| softness | number | 0.25 | How quickly the spotlight falls off near its edge. |
| dotScale | number | 5 | Halftone dot cell size in pixels. |
| intensity | number | 0.92 | Maximum strength of the printed spotlight. |
| followSpeed | number | 0.14 | Cursor smoothing speed; higher values follow faster. |
| className | string | — | Additional CSS classes. |
| children | React.ReactNode | — | Content rendered above the shader canvas. |