Soft pastel clouds that drift on a slow current and get swept along by the speed and direction of the pointer, leaving a colored wake.
Colors that move
Shop the palette
npx shadcn@latest add https://hyperblur.dev/r/bg-liquid-ether.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-liquid-ether.tsx.
import { BgLiquidEther } from "@/components/hyperblur/bg-liquid-ether"
<div className="relative h-96"><BgLiquidEther /><h1 className="relative">...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#ff9ecf", "#9ec5ff", "#b9a6ff", "#8ff0d6", "#ffd59e"] | Hex colors of the clouds. Each color is used twice. |
| background | string | "#0b0a12" | Base color under the clouds. |
| blobSize | number | 0.42 | Cloud radius as a fraction of the shorter side. |
| intensity | number | 0.8 | Opacity of each cloud from 0 to 1. |
| force | number | 1 | How strongly pointer movement pushes the clouds and how visible its wake is. |
| speed | number | 1 | Speed of the ambient current. |
| seed | number | 5 | Seed for the starting positions. |