Aurora

Veils of light that drift slowly across the top of a section.

Aurora

Installation#

pnpm dlx shadcn@latest add @balick/aurora

Or pass the full URL: https://ui.balick.me/r/aurora.json

Usage#

import { Aurora } from "@/components/ui/aurora"

export function Hero() {
  return (
    <section className="relative overflow-hidden">
      <Aurora className="text-sky-500" />
      <h1 className="relative">Northern lights</h1>
    </section>
  )
}

Props#

Prop	Type	Default	Description
`duration` Duration of one drift of the veils, as a CSS time.	`string`	"60s"	Duration of one drift of the veils, as a CSS time.
`className` A text-* class tints the light; opacity-* sets its strength.	`string`	—	A text-* class tints the light; opacity-* sets its strength.