Uilora SDF Pattern
A multi-layered shape-morphing grid using Signed Distance Fields (SDF) for ultra-sharp, anti-aliased geometry.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| gridSize | number | 20 | Number of cells across |
| color | string | #333333 | Base shape color |
| accentColor | string | #ffffff | Active shape color |
| mouseRadius | number | 0.25 | Radius of mouse influence |
| interactionStrength | number | 1.0 | Elastic warp amount |
When to Use
Best for grid-based UIs, dashboard backgrounds, and developer-centric landing pages that value mathematical precision and sharp visuals.
Best Practices
Leverage the `mouseRadius` to control how many shapes react simultaneously. Pair with mono-spaced fonts for a complete 'Technical' design language.
Why This Component Matters
Using SDFs allows for smooth morphing between different shapes (like circles to plus signs) that is impossible with standard SVG or CSS grids.
FAQ
QAre these SVG shapes?
No, they are rendered via Fragment Shaders, which means they are resolution-independent and perfectly sharp on Retina displays.
QCan I change the shapes?
The current implementation morphs between circles and plus signs, but the SDF logic can be extended to any closed geometry.
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.