Dot Pattern

An interactive dot pattern component that creates a grid of dots which respond to mouse movement, perfect for creating engaging backgrounds and decorative elements.

Hover Over Me!

Usage

import DotPattern from '@/components/DotPattern';

export default function MyPage() {
  return (
    <DotPattern 
      dotColor="#6366f1"
      backgroundColor="#e0e7ff"
      dotSize={5}
      gap={28}
      height={400}
      title="Interactive Dots"
    />
  );
}

Examples

Basic Dot Pattern

A simple dot pattern with default styling.

<DotPattern 
  height={300}
/>

Colorful Pattern with Title

A dot pattern with custom colors and title.

Interactive Pattern

<DotPattern 
  dotColor="#6366f1"
  backgroundColor="#e0e7ff"
  borderColor="#4338ca"
  height={300}
  title="Interactive Pattern"
/>

Dense Pattern

A pattern with smaller gap between dots and larger dot size.

<DotPattern 
  dotColor="#f97316"
  backgroundColor="#ffedd5"
  borderColor="#c2410c"
  dotSize={6}
  gap={16}
  height={300}
/>

Non-Interactive Pattern

A pattern that doesn't react to mouse movement.

Static Pattern

<DotPattern 
  dotColor="#10b981"
  backgroundColor="#d1fae5"
  borderColor="#047857"
  interactive={false}
  height={300}
  title="Static Pattern"
/>