AnimatedGradient

v1.1.0

Pro

bash

npm install @hua-labs/hua

tsx

import { AnimatedGradient } from "@hua-labs/ui/advanced";

Select a gradient type to preview

Pro

MESH

Custom color combinations

Blue → Purple → Pink

Emerald → Cyan → Indigo

Conic Rainbow

Radial Sunset

Animation speed comparison


`colors`	`string[]`	`["#ff0080", "#7928ca", "#0070f3", "#00dfd8"]`	Array of gradient colors
`speed`	`number`	`3`	Animation speed in seconds
`blur`	`boolean`	`true`	Enable blur effect
`blurAmount`	`number`	`100`	Blur amount in pixels
`type`	`"linear" \| "radial" \| "conic" \| "mesh"`	`"mesh"`	Gradient type
`animate`	`boolean`	`true`	Enable animation

docs:common.basicUsagetsx

import { AnimatedGradient } from '@hua-labs/ui/advanced';

<AnimatedGradient
  type="mesh"
  className="absolute inset-0 -z-10"
/>

docs:components.animatedGradient.examples.customColorstsx

<AnimatedGradient
  colors={["#667eea", "#764ba2", "#f093fb"]}
  speed={5}
  type="conic"
/>

docs:components.animatedGradient.examples.heroBackgroundtsx

<section className="relative min-h-screen">
  <AnimatedGradient
    type="mesh"
    colors={["#3b82f6", "#8b5cf6", "#ec4899"]}
    className="absolute inset-0 -z-10"
  />
  <div className="relative z-10 p-12">
    <h1>Welcome</h1>
  </div>
</section>

•Reduced Motion: Respects prefers-reduced-motion setting
•Decorative Only: Purely decorative, doesn't affect content accessibility

GlowCardPro TextRevealPro