Dot Uilora
Sophisticated interactive dot mesh background with fluid warping and halftone depth effects.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| dotColor | string | #50d8f7 | The color of the dots |
| backgroundColor | string | #020617 | Deep background color |
| density | number | 40.0 | Density of the grid (15-60) |
| speed | number | 0.4 | Speed of the movement |
| interactive | boolean | true | Responsive to mouse movement |
When to Use
Ideal for technical landing pages, dashboard backgrounds, and modern SaaS interfaces that require a subtle, high-tech texture without being distracting.
Best Practices
Keep the density moderate (around 40) for the best balance between detail and performance. Use contrasting colors between the dots and background for maximum 3D depth.
Why This Component Matters
Dot grids provide a sense of structure and precision. This WebGL-based implementation ensures smooth performance even with high densities, unlike SVG-based alternatives.
FAQ
QHow does the warping work?
It uses layered simplex noise in a GLSL shader to displace the UV coordinates of the dot grid.
QIs it mobile friendly?
Yes, it's highly optimized for GPU rendering and scales perfectly across all screen sizes.
QCan I change the dot shape?
The current shader renders circular dots using a length-based distance function, but the fragment shader can be modified for squares or custom shapes.
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.