Uilora Liquid Chrome
A molten metal simulation using procedural height-maps to calculate real-time chrome reflections and specular peaks.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| baseColor | string | #020202 | Deep shadow tint |
| chromeColor | string | #ffffff | Highlight/Metal color |
| speed | number | 0.5 | Rate of flow |
| viscosity | number | 0.4 | Liquid 'Thickness' |
| distortion | number | 0.8 | Mouse wake intensity |
When to Use
Perfect for high-tech product pages, gaming websites, and 3D-heavy UI designs that want a 'Liquid Mercury' look.
Best Practices
The effect relies on normals, so use a pure white `chromeColor` to get the most realistic 'Studio Lighting' reflection.
Why This Component Matters
Achieving high-quality chrome usually requires heavy textures; this component does it entirely with math in a few kilobytes.
FAQ
QHow are the reflections calculated?
It uses a central-difference algorithm to find the surface slope from the noise height-map, then applies a virtual studio light dot product.
QIs it responsive?
Yes, the normals automatically adjust to maintain their 3D shape across any screen resolution.
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.