Liquid Metal - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/liquid-metal

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { LiquidMetal } from "@/components/ui/liquid-metal"

<LiquidMetal className="h-[400px] w-full">
  <p className="z-10 text-4xl font-semibold">Hello</p>
</LiquidMetal>

Examples

Variations

Calm, default, and energetic presets with different blob counts, speeds, and hue settings.

API Reference

Prop	Type	Default	Description
`speed`	`number`	`1`	Animation speed multiplier.
`blobCount`	`number`	`5`	Number of metaball blobs (1–8).
`blobSize`	`number`	`1`	Metaball radius scale.
`colorCycleSpeed`	`number`	`1`	Hue cycle speed. Set to 0 to freeze.
`hueOffset`	`number`	`0.6`	Starting hue 0–1 (0 red, 0.33 green, 0.6 blue).
`blur`	`number`	`0`	CSS blur applied over the canvas in pixels.
`maxDpr`	`number`	`1.5`	Max device pixel ratio for performance.

Liquid Metal

speed

1.3

blobCount

blobSize

1.0

colorCycle

2.0

blur

hue

Installation

pnpm dlx shadcn@latest add @saturation-ui/liquid-metal

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { LiquidMetal } from "@/components/ui/liquid-metal"

<LiquidMetal className="h-[400px] w-full">
  <p className="z-10 text-4xl font-semibold">Hello</p>
</LiquidMetal>

Examples

Variations

Calm

Slow, fewer blobs, fixed blue

Default

Standard metallic effect

Energetic

Fast, many blobs, cycling hue

Calm, default, and energetic presets with different blob counts, speeds, and hue settings.

API Reference

Prop	Type	Default	Description
`speed`	`number`	`1`	Animation speed multiplier.
`blobCount`	`number`	`5`	Number of metaball blobs (1–8).
`blobSize`	`number`	`1`	Metaball radius scale.
`colorCycleSpeed`	`number`	`1`	Hue cycle speed. Set to 0 to freeze.
`hueOffset`	`number`	`0.6`	Starting hue 0–1 (0 red, 0.33 green, 0.6 blue).
`blur`	`number`	`0`	CSS blur applied over the canvas in pixels.
`maxDpr`	`number`	`1.5`	Max device pixel ratio for performance.