Aurora Dots

A captivating background effect featuring softly glowing, animated dots that mimic the ethereal beauty of the aurora borealis.

AuroraDots,
Background.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/aurora-dots.json 

Usage

import { AuroraDots } from "@/components/ui/aurora-dots";
<AuroraDots className="relative h-[400px] w-full flex flex-col items-center justify-center">
      <h2 className="bg-clip-text text-transparent text-center bg-gradient-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white text-2xl md:text-4xl lg:text-7xl font-sans py-2 md:py-10 relative z-20 font-bold tracking-tight">
        AuroraDots, <br /> Background.
      </h2>
    </AuroraDots>

API Reference

Aurora Dots

A captivating background effect featuring softly glowing, animated dots that mimic the ethereal beauty of the aurora borealis.

Props

PropertyTypeDefaultDescription
particleColorstring"34, 211, 238"
RGB color used for the particles.
particleSizenumber2
Base size of each particle.
glowIntensitynumber0.3
Default glow strength.
hoverGlowIntensitynumber0.5
Glow strength when hovered.
animationSpeednumber3
Speed of the particle wave animation.
hoverRadiusnumber10
Area around cursor that boosts glow.
interactivebooleantrue
Enables mouse hover interaction.
clustersCluster[]preset clusters
Particle cluster layout settings.
classNamestring
Extra class names for the container.
childrenReact.ReactNode
Content displayed above the canvas.

Built withby Ahdeetai.