ComponentsPixel
Dither text
Ordered dither and halftone dots form the type.
Installation
$ npx shadcn@latest add @textlab/dither-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { DitherText } from "@/components/textlab/dither-text/dither-text";
<DitherText as="h1" text="Print" variant="halftone" />Variants
ditherhalftoneProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "dither" | "halftone" | "dither" | Square Bayer pixels, or dots on an offset screen. |
| pitch | number | 0.035 | Pixel or dot pitch as a share of the font size. |
| shade | number | 0.55 | How much lighter the bottom of the letters gets, 0 to 1. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Editorial, zine and print-inspired brands.
- Heavy display type with room to show texture.
Skip it
- Small or thin text.
- Busy photographic backgrounds behind it.
Accessibility and motion
Accessibility
- Decorative canvas; the text is read from a hidden copy.
Motion
- Dithers in over 1.1 s as it enters the viewport, in Bayer order.
- The pointer adds a soft spot of extra ink.
Reduced motion. Plain text instead of the canvas.
Performance
- Rasterises on resize; draws only during the reveal and while the pointer moves.