Signature / Moleculestable

Animated Gradient

Animated color-shifting gradient background with warm, cool, aurora, and glass presets.

@glinui/uiComponent: animated-gradient

Installation$

pnpm add @glinui/ui @glinui/tokens

Usage$

Use as a background container. The gradient shifts colors smoothly via CSS background-position animation.

Basic$

Animated Gradient

TSX

1import { AnimatedGradient } from "@glinui/ui"
2
3export function AnimatedGradientDemo() {
4return (
5  <AnimatedGradient className="flex h-48 w-full items-center justify-center rounded-xl">
6    <span className="text-sm font-medium">Animated Gradient</span>
7  </AnimatedGradient>
8)
9}

Examples$

Variants$

Warm

Cool

Aurora

Glass

TSX

1import { AnimatedGradient } from "@glinui/ui"
2
3export function AnimatedGradientVariantsDemo() {
4return (
5  <div className="grid grid-cols-2 gap-4">
6    <AnimatedGradient variant="warm" className="flex h-32 items-center justify-center rounded-xl">
7      <span className="text-sm font-medium">Warm</span>
8    </AnimatedGradient>
9    <AnimatedGradient variant="cool" className="flex h-32 items-center justify-center rounded-xl">
10      <span className="text-sm font-medium">Cool</span>
11    </AnimatedGradient>
12    <AnimatedGradient variant="aurora" className="flex h-32 items-center justify-center rounded-xl">
13      <span className="text-sm font-medium text-white">Aurora</span>
14    </AnimatedGradient>
15    <AnimatedGradient variant="glass" className="flex h-32 items-center justify-center rounded-xl">
16      <span className="text-sm font-medium">Glass</span>
17    </AnimatedGradient>
18  </div>
19)
20}

Accessibility$

Decorative background container — content inside remains accessible.
No interactive elements in the gradient itself.

Reduced Motion$

Animation uses motion-reduce:animate-none. Under prefers-reduced-motion, the gradient renders as a static background.

API Reference$

Prop	Type	Required	Default	Description
`duration`	`number`	No	`6`	Auto-generated from TypeScript source.
`variant`	`"default" \| "glass" \| "warm" \| "cool" \| "aurora"`	No	`"default"`	Variant option from gradientVariants.

Source$

TSX

1import { AnimatedGradient } from "@glinui/ui"

packages/ui/src/components/animated-gradient.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/animated-gradient.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

AnimatedGradientProps

`AnimatedGradientProps`

Prop	Type	Required	Default	Description
`duration`	`number`	No	`6`	-
`variant`	`"default" \| "glass" \| "warm" \| "cool" \| "aurora"`	No	`"default"`	Variant option from gradientVariants.