The Animated Gradient component creates mesmerizing, high-performance animated backgrounds using WebGL shaders with domain warping for organic, silk-like flowing streams.
Preview
AnimatedGradient
Presets
lava
Usage
Installation
$ pnpm dlx shadcn add https://infinityui.vercel.app/r/animated-gradient.json
Basic Example
import { AnimatedGradient } from "@/components/animated-gradient";
export default function App() {
return (
<AnimatedGradient
variant="mist"
speed={1}
opacity={0.8}
className="h-screen w-full"
/>
);
}
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "mist" | "lava" | mist | Visual effect variant. mist creates a purple/indigo dynamic background, lava creates a rich warm blurry bonfire flow. |
speed | number | 1 | Animation speed multiplier. Higher values = faster animation. |
opacity | number | 0.8 | Canvas opacity (0-1). Use to blend with background layers. |
className | string | — | Additional CSS classes for the container. |
children | ReactNode | — | Overlay content to display on top of the gradient background. |