← All components
Atmospheres / background
Liquid Chrome
Reflective liquid folds with a pointer-driven ripple and nine-sample surface rendering.
Open in studio ↗PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Give the background an explicitly sized parent. Demo.tsx contains the full example composition.
- The original shader equations are preserved. Reduced motion renders a still frame; hidden/offscreen instances stop requesting frames.
- A CSS fallback remains without WebGL. Canvas dimensions are bounded at 2048 pixels. Pointer response is decorative and has no essential content.
React 19WebGL2OGL 1.0.11
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
baseColor | string | [number, number, number] | [0.1, 0.1, 0.1] | Metal tint |
amplitude | number | 0.3 | Fold amplitude |
frequencyX | number | 3 | Horizontal frequency |
frequencyY | number | 3 | Vertical frequency |
interactive | boolean | true | Pointer ripple |
speed | number | 0.2 | Motion speed |
time | number | undefined | Explicit shader time in seconds before speed scaling; stops automatic frames. |
paused | boolean | false | Freeze time and pointer response. |
replayToken | number | 0 | Change to restart the animation. |
className | string | '' | Additional outer classes. |