Docs / Components / Dither Image
Dither Image
A high-performance dithering component for images and videos with multiple algorithms (Bayer, Floyd-Steinberg, Halftone, etc.) and real-time color palette mapping.
Installation
Run the following command in your terminal to add the component to your project:
1npx rankflow-ui@latest add dither
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | 'https://images.unsplash.com/photo-1550684848-fac1c5b4e853?q=80&w=1470&auto=format&fit=crop' | Source image URL. |
| alt | string | '' | Accessibility text. |
| fit | 'cover' | 'contain' | 'fill' | 'none' | 'cover' | CSS object-fit behavior. |
| gridSize | number | 4 | Pixelation/grid size. |
| ditherMode | DitheringMode | 'bayer' | Dithering algorithm: 'bayer', 'bayer8', 'floyd', 'halftone', 'noise', 'crosshatch'. |
| threshold | number | 0.5 | Dither threshold bias (0-1). |
| colorMode | 'grayscale' | 'duotone' | 'original' | 'custom' | 'grayscale' | Color mapping mode. |
| primaryColor | string | '#000000' | Dark color for duotone modes (hex). |
| secondaryColor | string | '#ffffff' | Light color for duotone modes (hex). |
| invert | boolean | false | Invert final colors. |
| brightness | number | 0 | Brightness offset (-1 to 1). |
| contrast | number | 1 | Contrast multiplier (0 to 2). |
| animated | boolean | false | Animate the dither pattern (works with noise mode). |
| animationSpeed | number | 0.02 | Speed of animation increment. |