Aurora
Free
Soft blurred color blobs that drift slowly in two layers, like warm northern lights.
After the storm
Customize
1
70px
0.6
#ff784f
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/aurora.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/aurora.tsx.
Usage
import { Aurora } from "@/components/ui/aurora";
<section className="relative h-[600px] bg-ink-950">
<Aurora colors={["#ff784f", "#ffc24a", "#e2552b"]} speed={1} blur={70} />
</section>Props
5 properties| Property | Type | Default | Description |
|---|---|---|---|
| colors | [string, string, string] | ["#ff784f", "#ffc24a", "#e2552b"] | Three hex colors, used from the back layer to the front. |
| speed | number | 1 | Drift speed multiplier. |
| blur | number | 70 | Blur radius of the back layer in pixels. The front layer uses a little less. |
| opacity | number | 0.6 | Overall opacity, from 0 to 1. |
| className | string | — | Extra classes for the wrapper. It fills its nearest positioned parent. |
Dependencies: motion