A slowly warping surface of polished chrome with sky, horizon and ground reflections banded across the folds, lightly tinted by an accent color.
Mercury 02
Reserve yours · $349
npx shadcn@latest add https://hyperblur.dev/r/bg-liquid-chrome.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-liquid-chrome.tsx.
import { BgLiquidChrome } from "@/components/hyperblur/bg-liquid-chrome"
<div className="relative h-96"><BgLiquidChrome><h1>Mercury</h1></BgLiquidChrome></div>| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#7fb3ff" | Tint mixed into the sky reflections. Hex color. |
| tint | number | 0.35 | Amount of accent tint, from 0 (pure chrome) to 1. |
| scale | number | 1 | Size of the folds. Higher means larger, calmer folds. |
| turbulence | number | 1 | Strength of the warping. |
| speed | number | 1 | Speed of the flow. |
| className | string | "" | Extra classes for the root. The root is absolutely positioned and fills its parent. |
| children | ReactNode | Content rendered on top of the background. |