Chrome Liquid
Liquid chrome effect landing page with metallic reflections and fluid animations.
Main Features of Chrome Liquid
How to Use Chrome Liquid in Next.js
Installation Guide for Chrome Liquid
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
chromeColor | string | #c0c0c0 | Chrome metallic color (silver). |
reflectionIntensity | number | 1 | Intensity of metallic reflections (0-2). |
liquidSpeed | number | 1 | Speed of liquid animations (0.5-2). |
enableReflections | boolean | true | Enable metallic reflection effects. |
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QHow were the reflections made?
The background uses layered, animated CSS mask-images and high-contrast gradients (`chromeColor`) to simulate physical metallic surfaces.
QIs the liquid speed adjustable?
Yes, the `liquidSpeed` prop allows you to control the rotational frequency of the metallic waves, from slow/calm to high-energy.
QCan it be any color?
While optimized for silver/chrome, you can adjust the `chromeColor` to create 'Liquid Gold', 'Liquid Copper', or 'Anodized' effects.