---
title: FractalDotGrid
description: An interactive canvas fractal dot grid component to add dynamic visual interest to your UI.
component: true
links:
---

<ComponentPreview
  name="bg-animated-fractal-dot-grid-demo"
  className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
  description="All variations"
/>

## Installation

<Tabs defaultValue="manual">

<TabsList>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

<TabsContent value="manual">
  <Steps>
    <Step>Copy and paste the following code into your project.</Step>
    <ComponentSource name="bg-animated-fractal-dot-grid" />
    <Step>Update the import paths to match your project setup.</Step>
  </Steps>
</TabsContent>

</Tabs>

## Usage

```tsx
import { FractalDotGrid } from "@/components/ui/fractal-dot-grid"

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