Gradient Wave

PreviousNext

Example showing a simple gradient wave.

Docs
aliimamexample

Preview

Loading preview…
registry/default/example/backgrounds/gradient-wave/gradient-wave-03.tsx
"use client";

import { GradientWave } from "@/registry/default/components/gradient-wave";

export default function HeroSection() {
  return (
    <div className="h-[600px] w-5xl flex items-center justify-center relative">
      <GradientWave
        colors={["#ffffff", "#000000", "#ffffff", "#000000", "#ffffff", "#000000"]}
        shadowPower={10}  
        noiseSpeed={0.000005} 
        noiseFrequency={[0.00005, 0.0005]}
        deform={{ incline: 2.5, noiseAmp: 50, noiseFlow: 5 }}
      />

      <h1 className="text-white tracking-tighter text-7xl font-bold text-center z-10">
        Gradient Wave
      </h1>
    </div>
  );
}

Installation

npx shadcn@latest add @aliimam/gradient-wave-03

Usage

import { GradientWave03 } from "@/components/gradient-wave-03"
<GradientWave03 />