Dot Wave

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

Installation

npx shadcn@latest add @scrollxui/dot-wave

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-87.5 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>

API Reference

Dot Wave

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

Props

Property	Type	Default	Description
`dotGap`	number	`20`	Distance (in pixels) between each dot in the grid. Smaller values create denser dot patterns.
`sphereRadius`	number	`200`	Defines the virtual radius of influence for the wave effect, controlling overall spread.
`dotRadiusMax`	number	`3`	Maximum radius (in pixels) of each rendered dot.
`speed`	number	`0.15`	Controls the easing speed when the wave center moves automatically.
`expansionSpeed`	number	`150`	Speed at which the wave expands outward from the center (pixels per second).
`repeatAnimation`	boolean	`true`	Determines whether the wave animation restarts after reaching the screen edges.
`lightIntensity`	number	`0.5`	Base brightness of the dots after the wave passes through.
`fadeIntensity`	number	`0.15`	Controls how much dots fade after the wave has moved past them.
`followMouse`	boolean	`false`	When enabled, the wave center follows the mouse cursor for interactive effects.
`bgColor`	string	`"#000000"`	Fallback background color for the canvas when container styles are transparent.
`dotColor`	string	`"#ffffff"`	Fallback color used to render dots when no text color is detected.
`className`	string	`—`	Custom classes applied to the outer container element.
`dotClassName`	string	`—`	Custom classes applied directly to the canvas element.
`children`	React.ReactNode	`—`	Content rendered above the animated dot wave, useful for hero sections or overlays.