Docs/Animated Gradient

Animated Gradient

A beautiful, animated, and customizable WebGL gradient with noise capabilities.

Installation

$pnpm dlx shadcn@latest add @componentry/animated-gradient

Import

Usage

API Reference

PropTypeDefault
configPreset or custom configuration for the gradient pattern.
GradientConfig—
noiseOptions to apply a noise overlay.
NoiseConfig—
radiusBorder radius applied to the container.
string"0px"
classNameAdditional CSS classes for styling.
string—
styleAdditional inline CSS styles.
CSSProperties—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@harshjdhv

Animated

Gradient

import { AnimatedGradient } from "@/components/ui/animated-gradient"
<AnimatedGradient config={{ preset: "Aurora" }} />