Waves Background

Backgrounds 362

About

An interactive wave animation background with cursor-based physics interactions creates a dynamic grid of connected points that respond to mouse or touch movement and generate wave-like patterns using Perlin noise. Features: • Smooth physics-based animations • Mouse and touch interaction with momentum • Perlin noise-based wave generation • Theme-aware styling • Responsive design • Customizable wave parameters • Performance optimized • Interactive cursor feedback

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Waves Background to your project and fits it to your theme.

Code

How Waves Background is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useTheme } from "next-themes"
import { Waves } from "@/components/ui/waves-background"

function WavesDemo() {
  const { theme } = useTheme()
  
  return (
    <div className="relative w-full h-[400px] bg-background/80 rounded-lg overflow-hidden">
      <div className="absolute inset-0">
        <Waves
          lineColor={theme === "dark" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"}
          backgroundColor="transparent"
          waveSpeedX={0.02}
          waveSpeedY={0.01}
          waveAmpX={40}
          waveAmpY={20}
          friction={0.9}
          tension={0.01}
          maxCursorMove={120}
          xGap={12}
          yGap={36}
        />
      </div>

      <div className="relative z-10 p-8">
        <h3 className="text-2xl font-bold">Interactive Waves</h3>
        <p className="text-muted-foreground">Move your mouse to interact with the waves</p>
      </div>
    </div>
  )
}

export { WavesDemo }