cursor-wave-pattern v2.0.0

Cursor Wave Pattern

A React component that creates an interactive wave pattern that follows and responds to cursor movement. The pattern creates a dynamic, fluid animation that responds to both cursor position and time.

Features

• 🌊 Smooth wave animations that follow cursor movement
• ⚡ Highly performant with requestAnimationFrame
• 🎨 Fully customizable colors, sizes, and wave parameters
• 📱 Responsive design that works on any screen size
• 💪 Written in TypeScript with full type support
• 🎯 Zero dependencies (except React)

Installation

# Using npm
npm install cursor-wave-pattern

# Using yarn
yarn add cursor-wave-pattern

# Using pnpm
pnpm add cursor-wave-pattern

Basic Usage

import { CursorWavePattern } from 'cursor-wave-pattern';

function App() {
  return (
    <CursorWavePattern />
  );
}

Advanced Usage

The component accepts several props for customization:

import { CursorWavePattern } from 'cursor-wave-pattern';

function App() {
  return (
    <CursorWavePattern 
      // Customize the grid
      gridSize={20}
      spacing={40}
      
      // Adjust wave behavior
      waveSpeed={0.05}
      primaryWaveFrequency={0.05}
      secondaryWaveFrequency={0.02}
      cursorInfluenceRadius={200}
      
      // Customize appearance
      backgroundColor="rgb(17, 24, 39)"
      dotColor="rgb(96, 165, 250)"
    />
  );
}

Props

Examples

Basic Wave Pattern

import { CursorWavePattern } from 'cursor-wave-pattern';

function BasicExample() {
  return (
    <CursorWavePattern />
  );
}

Custom Colors

function CustomColorExample() {
  return (
    <CursorWavePattern 
      backgroundColor="rgb(0, 0, 0)"
      dotColor="rgb(255, 99, 71)"
    />
  );
}

Fast Waves

function FastWaveExample() {
  return (
    <CursorWavePattern 
      waveSpeed={0.1}
      primaryWaveFrequency={0.08}
      secondaryWaveFrequency={0.04}
    />
  );
}

Dense Pattern

function DensePatternExample() {
  return (
    <CursorWavePattern 
      gridSize={30}
      spacing={20}
      cursorInfluenceRadius={150}
    />
  );
}

Full Screen Background

function BackgroundExample() {
  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <CursorWavePattern />
      <div style={{ position: 'relative', zIndex: 1 }}>
        Your content here
      </div>
    </div>
  );
}

Development

To modify the package locally:

# Clone the repository
git clone https://github.com/Abhivera/cursor-wave-pattern.git

# Install dependencies
cd cursor-wave-pattern
npm install

# Start development
npm run dev

# Build the package
npm run build

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

MIT © Abhivera

Support

If you need help or have any questions:

1. Check the Issues page
2. Create a new issue
3. Reach out on Twitter

Made with ❤️ by Your Name