Dot Wave

Heroes 15

About

An animated canvas background of dots that ripple outward in expanding waves, used behind hero text or section headers to add subtle motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dot Wave to your project and fits it to your theme.

Code

How Dot Wave is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { DotWave } from "@/components/ui/dot-wave";

export default function DotWaveDemo() {
  return (
    <DotWave
      dotGap={20}
      dotRadiusMax={3}
      expansionSpeed={250}
      lightIntensity={0.4}
      fadeIntensity={0.08}
      className="w-full h-screen flex items-center justify-center"
    >
      <h2 className="bg-clip-text text-transparent text-center bg-linear-to-b from-neutral-600 to-white text-2xl md:text-4xl lg:text-7xl font-sans font-bold tracking-tight relative z-20">
        Dot Wave, <br /> Background.
      </h2>
    </DotWave>
  );
}