AnimatedGradient

A background of slow-moving colour blobs, for hero sections and cards.

Installation

bash

npx @smicolon/cli add animated-gradient

Run init once per project before adding components. See Installation.

Preview

With content

The autumn edit is here

New pieces in linen, wool and leather, in store now.

Custom colours

colors takes up to four colours, one per blob. CSS variables such as var(--chart-1) follow light and dark mode.

Accessibility

The gradient is decoration: it has no role, and nothing in it for assistive tech to read.
With prefers-reduced-motion set, the blobs stay still.
Text on the gradient must keep enough contrast wherever the blobs move.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content on top of the gradient.
`colors`	`string[]`	`["var(--primary)", "var(--secondary)", …]`	Colours of the blobs, one each.
`speed`	`number`	`10`	Seconds for one cycle; higher is slower.
`blur`	`"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl"`	`"3xl"`	How soft the blobs are.
`AnimatedGradientText`	`{ colors, speed }`	—	Text filled with a moving gradient.
`className`	`string`	—	Extra classes for the component.

Usage

tsx

import { AnimatedGradient } from "@/components/ui/animated-gradient"

<AnimatedGradient
  className="flex h-56 items-center justify-center rounded-lg"
  speed={3}
  colors={["var(--chart-1)", "var(--chart-2)", "var(--chart-4)", "var(--chart-5)"]}
>
  <h3 className="text-2xl font-bold">The autumn edit is here</h3>
</AnimatedGradient>