Liquid Chrome Hero
Procedural simulation of molten chrome alloys with velocity-based distortion. Interactive liquid metal surface with specular highlights.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| baseColor | [number, number, number] | [0.5, 0.5, 0.5] | RGB array for base chrome color (neutral silver). |
| speed | number | 1.0 | Animation speed. |
| amplitude | number | 0.6 | Distortion amplitude. |
| interactive | boolean | true | Enable mouse interaction. |
When to Use
Perfect for luxury tech brands, modern agency portfolios, and product reveals that want a tactile, high-end look. Use this React component to simulate molten chrome or liquid mercury surfaces that 'melt' and distort as the user interacts with them.
Best Practices
Maintain consistent spacing within your design system by ensuring high-contrast foreground elements. Follow React best practices by using a neutral `baseColor` to keep the chrome look authentic. Optimize for performance in large-scale applications by keeping the `amplitude` subtle for a more realistic metal feel.
Why This Component Matters
Specular highlights and liquid metal simulations are trending in high-performance modern UI development. This production-ready component helps you build an interface that feels heavy, expensive, and technically advanced.
FAQ
QCan I use colors other than silver?
Absolutely! By changing the `baseColor`, you can create liquid gold, molten copper, or even neon fluid metal effects.
QHow does the distortion work?
The component uses a procedural displacement map that is affected by both time (speed) and mouse velocity (interactivity).
QIs it mobile responsive?
Yes, the WebGL canvas scales to fill its container, ensuring a consistent liquid metal experience on all 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.
Ameoba Cyber Hero
Soft matte fluid motion background with subtle mouse lens effects. Modern Swiss-style aesthetic with frosted grain texture.