A WebGL aurora field for heroes and quiet backdrops. Tune the color stops, speed, amplitude, and blend.
Soft light, still in motion
A quiet aurora field for heroes and product moments.
Color 1
Color 2
Color 3
1
1
0.5
tsx
import { Aurora } from "@/components/motion/aurora"import { Button } from "@/components/ui/button"export function Example() { return ( <Aurora colors={["#3a29ff", "#ff94b4", "#ff3232"]} speed={1} amplitude={1} blend={0.5} className="flex min-h-72 items-center justify-center" > <div className="flex max-w-sm flex-col items-center gap-3 px-6 py-10 text-center"> <h3 className="text-2xl font-medium tracking-wide text-white"> Soft light, still in motion </h3> <p className="text-sm tracking-wide text-white/70"> A quiet aurora field for heroes and product moments. </p> <Button variant="secondary" size="sm"> Explore Motion </Button> </div> </Aurora> )}Installation
npx @arctis-sh/@arctis-sh/ui@latest add auroraUsage
import { Aurora } from "@/components/motion/aurora"<Aurora className="min-h-72" />API Reference
Aurora
| Prop | Type | Default |
|---|---|---|
| colors | [string, string, string] | ["#3a29ff", "#ff94b4", "#ff3232"] |
| speed | number | 1 |
| amplitude | number | 1 |
| blend | number | 0.5 |
| className | string | — |
| children | ReactNode | — |
Also accepts the other native div attributes. Uses ogl for the WebGL field.