Browse components
Dither Veil
A flowing 1-bit ordered-dither veil that dissolves around the cursor to reveal what is underneath.
Installation
npx shadcn@latest add @glint-ui/dither-veilFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/dither-veil.json
Usage
import { DitherVeil } from "@/components/ui/dither-veil";
<DitherVeil className="h-96 rounded-2xl">
<img src="/secret.jpg" alt="" className="size-full object-cover" />
</DitherVeil>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content hidden under the veil. |
| pixelSize | number | 4 | Size of one dither pixel in px. |
| color | string | "#0d0d0f" | Veil base color. |
| accent | string | "#c6ff3d" | Dithered highlight color. |
| density | number | 0.4 | How much of the veil is highlight. |
| radius | number | 150 | Px radius the cursor dissolves. |
| heal | number | 1400 | Ms for a revealed patch to close again. |
| speed | number | 1 | Flow speed of the veil pattern. |
| className | string | — | Extra classes for the root element. |