Uilora Vector Grid
A responsive grid of vector needles that react both to global noise 'wind' and local mouse magnetic pulls.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| gridSize | number | 35 | Density of the needle grid |
| color | string | #333333 | Idle needle color |
| accentColor | string | #ffffff | Magnetic needle color |
| mouseRadius | number | 0.25 | Magnet attraction radius |
When to Use
Perfect for data visualization tools, system-monitoring dashboards, and AI-themed websites where 'Flow' and 'Direction' are key concepts.
Best Practices
Use a high `gridSize` (40+) for a 'Field' effect, or a low size (15-20) for a more 'Structural' or 'Compass' look.
Why This Component Matters
The needles follow a simplex noise 'Wind' by default, creating a calm natural movement that instantly reacts with mechanical precision to mouse input.
FAQ
QDo the needles rotate?
Yes, they calculate a 360-degree orientation based on the combined influence of noise vector and mouse vector.
QIs it GPU intensive?
It is highly optimized to run as a single draw-call on the GPU, making it suitable for low-power devices.
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.
Enjoying Uilora? Unlock the full library.
56+ premium components, unlimited CLI, unlimited MCP, v0 + Claude prompts — one payment, forever.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.