Moving Dots Background

An animated background component featuring moving dots that create a dynamic visual effect. Customizable speed and dot density for a unique experience.

Overview

Moving Dots Background is a captivating React component that features animated dots moving across the screen, creating an engaging background effect. This component allows customization of dot density and animation speed, making it suitable for various UI designs.

Perfect for adding visual interest to landing pages, dashboards, or any interface where subtle motion can enhance user experience, it utilizes motion/react for smooth animations and Tailwind CSS for easy styling.

Preview

Usage

'use client'
 
import { MovingDotsBackground } from '@/components/background/moving-dots-background'
 
<div className="relative h-[496px] w-full overflow-hidden rounded-lg border bg-background">
  <MovingDotsBackground />
</div>

Code

'use client'
 
import { useMemo } from 'react'
 
import { motion } from 'motion/react'
 
import { cn } from '@/lib/utils'
 
interface MovingDotsBackgroundProps {
  numDots?: number
  minSize?: number
  maxSize?: number
  className?: string
}
 
export const MovingDotsBackground = ({
  numDots = 50,
  minSize = 2,
  maxSize = 6,
  className,
}: MovingDotsBackgroundProps) => {
  const dots = useMemo(() => {
    return Array.from({ length: numDots }).map(() => ({
      id: crypto.randomUUID(),
      x: Math.random() * 100,
      y: Math.random() * 100,
      size: Math.random() * (maxSize - minSize) + minSize,
      duration: 5 + Math.random() * 3,
    }))
  }, [numDots, minSize, maxSize])
 
  return (
    <div
      className={cn('absolute inset-0 overflow-hidden bg-slate-900', className)}
      aria-hidden="true"
    >
      {dots.map((dot) => (
        <motion.div
          key={dot.id}
          className="absolute rounded-full bg-white/20"
          style={{
            width: dot.size,
            height: dot.size,
            left: `${dot.x}%`,
            top: `${dot.y}%`,
          }}
          animate={{
            x: [-20, 20, -20],
            y: [-20, 20, -20],
          }}
          transition={{
            duration: dot.duration,
            repeat: Infinity,
            repeatType: 'reverse',
            ease: 'linear',
          }}
        />
      ))}
    </div>
  )
}

Props

Prop	Type	Default
`numDots`	`number`	`50`
`minSize`	`number`	`2`
`maxSize`	`number`	`6`
`className`	`string`	-