Aurora
auroraRenders softly moving layered aurora gradients as a background.
Usage
Basic usage
Put it into the relative + overflow-hidden container, Aurora is layered with absolute inset-0, and children is automatically layered on top of Aurora.
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<Aurora className="absolute inset-0 opacity-80">
<div className="flex h-full items-center justify-center text-sm font-medium text-white/80">
Aurora
</div>
</Aurora>
</div>Custom ribbon
Pass any CSS color via colors (supports chart token / oklch) and switch to warm orange tone.
<Aurora
colors={["var(--color-chart-3)", "var(--color-chart-1)", "oklch(0.72 0.22 30)"]}
blur={40}
speed={25}
className="absolute inset-0 opacity-75"
/>Blur and speed
blur The larger the ribbon, the softer it is. The larger speed is, the slower the animation is. The combination creates a wallpaper-level delicate flow.
Hulian component library
Enterprise-grade · High quality · Native-ready
<Aurora blur={60} speed={45} className="absolute inset-0 opacity-90">
<div className="flex h-full flex-col items-center justify-center gap-2">
<p className="text-lg font-semibold text-white">Hulian Component Library</p>
<p className="text-xs text-white/60">Enterprise level · High quality · Native adaptation </p>
</div>
</Aurora>Close Radial mask
When showRadialMask={false}, the aurora covers the entire container and no longer fades toward the four corners.
<Aurora showRadialMask={false} className="absolute inset-0 opacity-70" />When to Use
Use it for a soft, flowing color backdrop behind a hero, landing page, or marketing section. Its pure CSS implementation renders as an RSC without Canvas or WebGL overhead. Use Particles for individual particles or pointer interaction, and Silk or Iridescence for a more textured WebGL sheen.
Import
import { Aurora } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["var(--color-chart-1)","var(--color-chart-2)","var(--color-chart-4)"] | Ribbon colors; accepts any CSS color and defaults to theme-aware chart tokens |
| blur | number | 30 | Layer blur radius in pixels; 10–80 is recommended, since low values create hard edges and high values diffuse the effect |
| speed | number | 20 | Duration of one animation cycle in seconds; higher values move more slowly |
| showRadialMask | boolean | true | Fade the effect radially toward the corners; disable it to fill the container uniformly |
| className | string | — | Class name forwarded to the Aurora layer for opacity or blend-mode adjustments |
| style | CSSProperties | — | Inline styles passed through to the root container |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Content layered above the Aurora effect |
Usage Guidelines
- Give the parent
relativeandoverflow-hidden, or the oversized moving gradient will escape its bounds. - Adjust Aurora's own opacity through
className(the showcases useopacity-60throughopacity-90). Applying opacity to a wrapper also fades its content.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<Aurora
blur={30}
speed={20}
showRadialMask={true}
className="absolute inset-0 opacity-80"
/>
</div>