Uilora Kinetic Raster
A dynamic Halftone-inspired grid featuring elastic mouse interaction and fluid noise-driven movement.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| dotColor | string | #222222 | Base color of the dots |
| accentColor | string | #ffffff | Color of dots near the mouse |
| density | number | 30 | Grid density (number of dots) |
| speed | number | 1.0 | Animation speed |
When to Use
Perfect for minimalist high-fidelity designs, technical portfolios, and premium SaaS backgrounds where you want a reactive, tactile feel without high GPU load.
Best Practices
Keep the `density` around 30-50 for optimal balance between detail and performance. Use high-contrast colors like deep grays and near-whites for a professional 'Blueprint' look.
Why This Component Matters
Unlike static patterns, the Kinetic Raster feels 'alive' due to the combination of noise-based drift and elastic mouse lerping, creating a deeper user connection.
FAQ
QIs it mobile responsive?
Yes, it uses internal aspect correction to maintain circular dots on any screen ratio.
QCan I use more than two colors?
The shader currently interpolates between base and accent, but you can wrap the component in a CSS backdrop-filter for more complexity.
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.