Aurora Dots

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

Installation

npx shadcn@latest add @scrollxui/aurora-dots

Usage

import { AuroraDots } from '@/components/ui/aurora-dots';

<AuroraDots className='relative h-100 w-full flex flex-col items-center justify-center'>
  <h2 className='bg-clip-text text-transparent text-center bg-linear-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

Property	Type	Default	Description
`particleColor`	string	`"34, 211, 238"`	RGB color used for the particles.
`particleSize`	number	`2`	Base size of each particle.
`glowIntensity`	number	`0.3`	Default glow strength.
`hoverGlowIntensity`	number	`0.5`	Glow strength when hovered.
`animationSpeed`	number	`3`	Speed of the particle wave animation.
`hoverRadius`	number	`10`	Area around cursor that boosts glow.
`interactive`	boolean	`true`	Enables mouse hover interaction.
`clusters`	Cluster[]	`preset clusters`	Particle cluster layout settings.
`className`	string	`—`	Extra class names for the container.
`children`	React.ReactNode	`—`	Content displayed above the canvas.