background

AuroraBackground

Soft aurora blobs with slow motion.

Playground

modecolor 1color 2color 3backgroundLabel

Scroll-based previews need you to scroll into view.

Live preview

Aurora

Code

<AuroraBackground
  mode="always"
  colors={["#10b981", "#3b82f6", "#8b5cf6"]}
  background="#0a0a0f"
  className="h-48 rounded-xl"
>
  <div className="relative z-10 flex h-full items-center justify-center text-sm text-white/80">
    Aurora
  </div>
</AuroraBackground>

Props

Prop	Type	Default	Description
mode	always \| hover \| click	always	When blob motion runs
colors	[string, string, string]	#10b981, #3b82f6, #8b5cf6	Three aurora blob colors (hex or rgb)
blobOpacity	number \| [number, number, number]	0.3, 0.3, 0.2	Blob fill opacity per color
background	string	#0a0a0f	Canvas background color