Dot Wave

Dot-based waves ripple outward in symmetry, creating a subtle, motion-driven background layer

Dot Wave,
Background.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/dot-wave.json

Usage

import { DotWave } from "@/components/ui/dot-wave";
<DotWave
      dotGap={20}
      dotRadiusMax={3}
      expansionSpeed={250}
      lightIntensity={0.4}
      fadeIntensity={0.08}
      className="w-full h-[350px] flex items-center justify-center"
    >
      <h2 className="bg-clip-text text-transparent text-center bg-gradient-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>

API Reference

Dot Wave

Dot-based waves ripple outward in symmetry, creating a subtle, motion-driven background layer

Props

PropertyTypeDefaultDescription
dotGapnumber20
Distance (in pixels) between each dot in the grid. Smaller values create denser dot patterns.
sphereRadiusnumber200
Defines the virtual radius of influence for the wave effect, controlling overall spread.
dotRadiusMaxnumber3
Maximum radius (in pixels) of each rendered dot.
speednumber0.15
Controls the easing speed when the wave center moves automatically.
expansionSpeednumber150
Speed at which the wave expands outward from the center (pixels per second).
repeatAnimationbooleantrue
Determines whether the wave animation restarts after reaching the screen edges.
lightIntensitynumber0.5
Base brightness of the dots after the wave passes through.
fadeIntensitynumber0.15
Controls how much dots fade after the wave has moved past them.
followMousebooleanfalse
When enabled, the wave center follows the mouse cursor for interactive effects.
bgColorstring"#000000"
Fallback background color for the canvas when container styles are transparent.
dotColorstring"#ffffff"
Fallback color used to render dots when no text color is detected.
classNamestring—
Custom classes applied to the outer container element.
dotClassNamestring—
Custom classes applied directly to the canvas element.
childrenReact.ReactNode—
Content rendered above the animated dot wave, useful for hero sections or overlays.

Built withby Ahdeetai.