"use client"; import React from "react"; import { cn } from "@/lib/utils"; interface DotPatternProps { size?: number; radius?: number; className?: string; fade?: boolean; } export const DotPattern: React.FC = ({ size = 24, radius = 1, className, fade = true, }) => { const id = React.useId(); return ( ); }; // Animated Dot Pattern interface AnimatedDotPatternProps { size?: number; radius?: number; className?: string; } export const AnimatedDotPattern: React.FC = ({ size = 30, radius = 1.5, className, }) => { const [mousePosition, setMousePosition] = React.useState({ x: 0, y: 0 }); const containerRef = React.useRef(null); React.useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); setMousePosition({ x: e.clientX - rect.left, y: e.clientY - rect.top, }); }; const container = containerRef.current; if (container) { container.addEventListener("mousemove", handleMouseMove); } return () => { if (container) { container.removeEventListener("mousemove", handleMouseMove); } }; }, []); const cols = Math.ceil(1920 / size); const rows = Math.ceil(1080 / size); return (

); };

Name	Type	Default	Description
`size`	`number`	`24`	Spacing between dots.
`radius`	`number`	`1`	Dot radius.
`fade`	`boolean`	`true`	Apply radial fade.

DotPattern

Preview

Installation

Usage

Dot Background

Props