Uilora Dither
A smooth fluid brightness simulation passed through an 8x8 Bayer matrix for ordered dithering, creating a sharp pixel-art look.
Main Features of Uilora Dither
How to Use Uilora Dither in Next.js
Installation Guide for Uilora Dither
Props
Customize the component with these 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 |
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.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
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.