wavy

An interactive wave fifxeld visualization built with Next.js and Canvas. Move your mouse to create mesmerizing wave patterns and explore different presets.

Features

• Interactive wave field that responds to mouse movement
• Multiple preset configurations (Ocean Waves, Electric Grid, Sunset Ripples)
• Real-time parameter controls for customization
• Smooth animations using Canvas API
• Responsive design that works on all screen sizes
• Built with Next.js 16 and React 19

Getting Started

Prerequisites

• Node.js 18+ or Bun
• pnpm, npm, or yarn

Installation

1. Clone the repository:

2. Install dependencies: ```bash pnpm install

or

npm install

or

yarn install ```

3. Run the development server: ```bash pnpm dev

or

npm run dev

or

yarn dev ```

4. Open http://localhost:3000 in your browser

Usage

• Move your mouse across the screen to interact with the wave field
• Click preset buttons to try different wave configurations
• Toggle "Show Controls" to adjust wave parameters in real-time
• Experiment with amplitude, speed, and grid spacing settings

Tech Stack

• Framework: Next.js 16 (App Router)
• UI Library: React 19
• Styling: Tailwind CSS
• Components: shadcn/ui
• Canvas: HTML5 Canvas API
• TypeScript: Full type safety

Deployment

Deploy easily to Vercel:

License

MIT License - feel free to use this project for your own purposes.

Links

• Live Demo
• GitHub Repository
• X/Twitter

---

Built with v0 by Vercel