Getting Started
Components
- Animated Beam
- Animated Circular Progress Bar
- Animated Gradient Text
- Animated Grid Pattern
- Animated List
- Animated Shiny Text
- Animated Theme Toggler
- Aurora Text
- Avatar Circles
- Bento Grid New
- Blur Fade
- Border Beam
- Cool Mode
- Dither Shader New
- Dock New
- Dot Pattern
- Dotted Map New
- File Tree
- Flickering Grid
- Grid Pattern
- Hero Video Dialog
- Hyper Text New
- Icon Cloud New
- Interactive Hover Button
- Lens New
- Light Rays New
- Line Shadow Text New
- Magic Card New
- Marquee
- Meteors New
- Morphing Text New
- Motion Grid New
- Neon Gradient Card New
- Number Ticker
- Orbiting Circles New
- Pixel Image New
- Pointer New
- Progressive Blur New
- Pulsating Button
- Rainbow Button
- Retro Grid New
- Ripple
- Ripple Button
- Scroll Progress
- Shimmer Button
- Shine Border New
- Smooth Cursor New
- Striped Pattern New
- Text Animate
- Typing Animation
- Video Text
- Warp Background
- Word Rotate Beta
Dither Shader
A real-time ordered dithering effect for images, perfect for pixel art and retro aesthetics.
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/dither-shader.json
Copy the Source Code
Copy and paste the following code into your project:
dither-shader.svelte
index.ts
Folder Structure
Folder Structure
Examples
Dither Shader Demo Simple
Dither Shader Demo Duotone
Props
DitherShader
A component for Dither Shader.
| Name | Type | Default | Description |
|---|---|---|---|
src | string | | Source image URL (required). |
gridSize | number | 4 | Size of the dithering grid cells. |
ditherMode | "bayer" | "halftone" | "noise" | "crosshatch" | "bayer" | Type of dithering pattern to use. |
colorMode | "original" | "grayscale" | "duotone" | "custom" | "original" | Color processing mode for the output. |
invert | boolean | false | Invert the dithered output colors. |
pixelRatio | number | 1 | Pixelation multiplier (1 = no pixelation, higher = more pixelated). |
primaryColor | string | "#000000" | Primary color for duotone mode. |
secondaryColor | string | "#ffffff" | Secondary color for duotone mode. |
customPalette | string[] | ["#000000", "#ffffff"] | Custom color palette array for custom mode. |
brightness | number | 0 | Brightness adjustment (-1 to 1). |
contrast | number | 1 | Contrast adjustment (0 to 2, 1 = normal). |
backgroundColor | string | "transparent" | Background color behind the dithered image. |
objectFit | "cover" | "contain" | "fill" | "none" | "cover" | Object fit behavior for the source image. |
threshold | number | 0.5 | Threshold bias for dithering (0 to 1). |
animated | boolean | false | Enable animation effect. |
animationSpeed | number | 0.02 | Animation speed (lower = slower). |
class | string | "" | Additional CSS classes for the container (use this to set size via Tailwind). |