import * as React from "react";

import { cn } from "@/lib/utils";

type DotPatternBackgroundProps = React.HTMLAttributes<HTMLDivElement> & {
  size?: number;
  dotSize?: number;
};

export function DotPatternBackground({
  size = 22,
  dotSize = 1.5,
  className,
  children,
  ...props
}: DotPatternBackgroundProps) {
  return (
    <div
      className={cn(
        "relative overflow-hidden rounded-2xl border border-border bg-card p-6",
        className
      )}
      {...props}
    >
      <div
        className="pointer-events-none absolute inset-0 text-muted-foreground"
        style={{
          backgroundImage: `radial-gradient(circle, hsl(var(--muted-foreground) / 0.45) ${dotSize}px, transparent ${dotSize}px)`,
          backgroundSize: `${size}px ${size}px`,
          animation: "dot-wave 9s ease-in-out infinite",
        }}
        aria-hidden="true"
      />
      <div className="relative z-10">{children}</div>
      <style jsx>{`
        @keyframes dot-wave {
          0% {
            transform: translate3d(0, 0, 0) scale(1);
            opacity: 0.5;
          }
          50% {
            transform: translate3d(12px, -8px, 0) scale(1.05);
            opacity: 0.85;
          }
          100% {
            transform: translate3d(0, 0, 0) scale(1);
            opacity: 0.5;
          }
        }
      `}</style>
    </div>
  );
}
Dot Pattern Background

Dot Wave

Dependencies

Files

Installation
