Liquid Chrome Hero
Procedural simulation of molten chrome alloys with velocity-based distortion. Interactive liquid metal surface with specular highlights.
Main Features of Liquid Chrome Hero
How to Use Liquid Chrome Hero in Next.js
Installation Guide for Liquid Chrome Hero
Props
Customize the component with these 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. |
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.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
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.