DitheringShader — Animated dithering shader with 8 pattern

The Dithering Shader component leverages WebGL2 shaders to render smooth, animated dithered patterns directly on the canvas. Designed for performance and creativity, it enables designers to add nostalgic 8-bit/16-bit aesthetics or modern artistic overlays to their projects.

Features:

• 🎨 8 animated patterns: warp, wave, ripple, swirl, flow, glitch, kaleidoscope, liquid

• 🧩 4 dithering algorithms: random noise, 2×2, 4×4, 8×8 Bayer matrices

• 🎛 Customizable foreground/background colors with alpha support

• 🔍 Adjustable pixel size for varying detail levels

• ⏱ Variable animation speed (pause at 0 to save resources)

• 📐 Responsive sizing with ResizeObserver

• ⚡ Hardware-accelerated rendering for smooth performance

Use Cases:

• Retro-style hero sections or backgrounds

• Artistic overlays and visual effects

• Animated loading screens

• Creative section dividers

• Nostalgic 8-bit/16-bit inspired designs

Technical Notes:

• Requires WebGL2 support (available in all modern browsers)

• Uses simplex noise and procedural generation for organic animation

• Optimized for responsiveness and resource efficiency