Waves

Overview

Waves creates an interactive grid of vertical lines that undulate with Perlin noise and respond to mouse movement. Built entirely with Canvas 2D and a custom Perlin noise implementation — no external animation libraries needed.

Features

• Perlin noise distortion — organic, natural wave movement
• Mouse interaction — lines react to cursor velocity and position
• Touch support — works on mobile devices
• Configurable grid — control line density and spacing
• Physics simulation — friction and tension for smooth cursor response

Usage

import Waves from '@/components/waves'

<div className="relative h-[500px]">
  <Waves
    lineColor="rgba(255,255,255,0.3)"
    waveSpeedX={0.02}
    waveAmpX={40}
  />
</div>