Gradient Wave

An animated WebGL gradient of three colors folding into soft waves, with film grain, after gradflow's stripe gradient. Use it as a background: content goes inside, on top. Pauses offscreen; under reduced motion it draws one still frame.

Installation

npx nuecrea-ui add gradient-wave

Usage

import { GradientWave } from '@/components/ui/gradient-wave';

export default function GradientWaveStory() {
  return (
    <GradientWave
      className="flex h-[480px] items-center justify-center rounded-2xl"
    >
      <h1 className="text-4xl font-semibold tracking-tight text-white">Gradient Wave</h1>
    </GradientWave>
  );
}

API reference

GradientWave

The container. Give it a size; the gradient fills it on a decorative canvas behind the content. Renders <div>.

Prop	Type	Default	Description
`colors`	`[string, string, string]`	`"['#1dc9ac', '#075044', '#26312f']"`	Three hex colors.
`speed`	`number`	`1.15`	Animation speed; 0 holds still.
`scale`	`number`	`1.1`	Zoom of the pattern; higher packs in more waves.
`grain`	`number`	`0.5`	Film grain, from 0 to 1.