140 new AI components just droppedon AI SDK Agents (opens in a new tab)
cult ui
GitHub (opens in a new tab)patternson AI SDK Agents (opens in a new tab)

Backgrounds & Effects

Previous: Grid BeamNext: Canvas Fractal Grid

Fractal Dot Grid

Interactive canvas dot grid background for React and shadcn/ui with a hover wave, optional noise, and a mouse-following glow.

Updated

Configuration

FractalDotGrid is a canvas-rendered React background component for shadcn/ui. Use it behind landing page heroes or feature sections to add motion without loading images or video.

Installation

pnpm dlx shadcn@latest add @cult-ui/bg-animated-fractal-dot-grid

Usage

function FractalDotGridExample() {
  return (
    <div className="h-screen w-screen relative">
      <FractalDotGrid
        dotSize={4}
        dotSpacing={20}
        dotOpacity={0.3}
        waveIntensity={30}
        waveRadius={200}
        dotColor="rgba(100, 100, 255, 1)"
        glowColor="rgba(100, 100, 255, 1)"
        enableNoise={true}
        noiseOpacity={0.03}
        enableMouseGlow={true}
        initialPerformance="medium"
      />
    </div>
  );
}
 
export default FractalDotGridExample;