Aurora Dots

A dot matrix lit by drifting aurora ribbons; each dot takes its color from the moving light field and glows near the cursor. WebGL.

Aurora Dots

Open

colors

baseColor

gap18

dotSize2.5

speed1

scale1

Installation

npx shadcn@latest add @glint-ui/aurora-dots

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/aurora-dots.json

Usage

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

<div className="relative h-96">
  <AuroraDots colors={["#34d399", "#22d3ee", "#a78bfa"]} />
</div>

Props

Prop	Type	Default	Description
colors	string[]	["#34d399","#22d3ee","#a78bfa"]	Three aurora colors.
baseColor	string	"#3f3f46"	Color of unlit dots.
gap	number	18	Px between dots.
dotSize	number	2.5	Dot radius in px at full light.
speed	number	1	Drift speed multiplier.
scale	number	1	Size of the aurora bands.
className	string	—	Extra classes for the root element.