Skip to content
All 6 kits from $99 · Everything Bundle $149

Animated Gradient

BackgroundsMIT
View in Storybook

Slow-drifting animated gradient mesh for ambient hero backgrounds.

bun add @otfdashkit/ui

Preview

Animated Gradient
Loading Storybook preview…

Code

import { AnimatedGradient } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="space-y-0">
      {(['mesh', 'shift', 'pulse'] as const).map((variant) => (
        <div key={variant} className="relative h-[250px]">
          <AnimatedGradient variant={variant} />
          <div className="relative z-10 flex items-center justify-center h-full">
            <span className="text-white/80 text-lg font-semibold capitalize">{variant}</span>
          </div>
        </div>
      ))}
    </div>
  )
}

Free with the SDK. This pattern ships in @otfdashkit/ui under the MIT license.

Props

Props declared in the AnimatedGradient source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
blurbooleantrueWhether to blur the gradient blobs (mesh only)
colorsstring[]Gradient color stops — at least 2 required
speednumber1Speed multiplier (default 1)
variant'mesh' | 'shift' | 'pulse''mesh'Animation style