Uilora Dither
A smooth fluid brightness simulation passed through an 8x8 Bayer matrix for ordered dithering, creating a sharp pixel-art look.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| color1 | string | #000000 | Background (Dark) |
| color2 | string | #ffffff | Foreground (Dots) |
| speed | number | 1.0 | Flow speed |
| blockSize | number | 2.0 | Pixel size (higher for chunkier) |
| intensity | number | 1.0 | Contrast of the dithering |
When to Use
Excellent for retro-themed sites, lo-fi aesthetic brands, or any project that wants a high-contrast, pixelated texture.
Best Practices
Adjust the `blockSize` to match your site's overall 'resolution'. A block size of 2.0 or 4.0 creates a great 'GameBoy' or 'Macintosh' dither feel.
Why This Component Matters
Dithering is a classic technique for simulating gradients with limited colors. Using a full 8x8 Bayer matrix in a shader allows for real-time high-performance dithering that looks infinitely more 'authentic' than simple CSS patterns.
FAQ
QDoes it look good in color?
Absolutely. Try using deep Blue/Cyan or Green/Black for a 'Cyberpunk Matrix' or 'Terminal' aesthetic.
QHow small can the blocks be?
Set `blockSize` to 1.0 for the finest possible dithering, but usually 2.0+ is better for the dithered 'texture' to be visible.
QIs it interactive?
Yes, the underlying fluid simulation reacts to the mouse, which in turn shifts the dither pattern dynamically.
Related Components
Interstellar Fluid Hero
Interactive fluid simulation creating cosmic nebula effects with mouse interaction. Deep space aesthetic with animated gas clouds and star trails.
Interstellar Background Hero
Warp tunnel effect simulating high-velocity travel through nebular clusters. Procedural WebGL engine with mouse-responsive space distortion.
Liquid Chrome Hero
Procedural simulation of molten chrome alloys with velocity-based distortion. Interactive liquid metal surface with specular highlights.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.