Animated Gradient

Animated gradient background with presets and customizable swirl effects using WebGL.

Animated

Gradient

Installation

pnpm dlx shadcn@latest add @spell/animated-gradient

Examples

Presets

Open in

Lava

Usage

import AnimatedGradient from "@/components/animated-gradient";

<div className="relative h-[300px] w-full">
  <AnimatedGradient config={{ preset: "Prism" }} />
  <div className="relative z-10">Your content here</div>
</div>

Custom Configuration

<AnimatedGradient
  config={{
    preset: "custom",
    color1: "#1a1a2e",
    color2: "#16213e",
    color3: "#0f3460",
    rotation: 45,
    speed: 25,
    swirl: 60,
  }}
/>

Props

Prop	Type	Default
`config`	`{ preset: PresetName } \| { preset: "custom"; color1: string; color2: string; color3: string; ... }`	`{ preset: "Prism" }`
`noise`	`{ opacity: number; scale?: number }`	-
`radius`	`string`	`"0px"`
`className`	`string`	-
`style`	`CSSProperties`	-

Custom Config Options

When using preset: "custom", these options are available:

Prop	Type	Default
`color1`	`string`	`required`
`color2`	`string`	`required`
`color3`	`string`	`required`
`rotation`	`number`	`0`
`proportion`	`number`	`35`
`scale`	`number`	`1`
`speed`	`number`	`25`
`distortion`	`number`	`12`
`swirl`	`number`	`80`
`swirlIterations`	`number`	`10`
`softness`	`number`	`100`
`offset`	`number`	`0`
`shape`	`"Checks" \| "Stripes" \| "Edge"`	`"Checks"`
`shapeSize`	`number`	`10`