Aurora

hot

Northern-lights curtains with drifting vertical rays and a twinkling sky. The nearest curtain leans toward the pointer and glows brighter where you hover.

webglpointernoise6 files · 661 locdeps: clsx, tailwind-merge

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/aurora.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs aurora

Usage

import { Aurora } from "@/components/opus/backgrounds/aurora";

<section className="relative h-[80vh]">
  <Aurora className="absolute inset-0" />
  <div className="relative z-10">…your content</div>
</section>

Examples

Hero section

Content layered on top — the pointer still bends the curtains.

Live shader · move your cursor

Ship interfaces that feel alive.

A WebGL aurora in one component. No three.js, no textures — just a fragment shader that listens to you.

API

Prop	Type	Default	Description
colorA	string	"#2af5a4"	Lower edge of the curtains (hex).
colorB	string	"#7c5cff"	Upper glow of the curtains (hex).
colorC	string	"#22d3ee"	Third curtain + pointer glow (hex).
background	string	"#050510"	Sky colour (hex).
intensity	number	1	Overall brightness, 0.2–2.
height	number	1	How tall the curtains reach, 0.4–2.
stars	boolean	true	Twinkling stars behind the aurora.
speed	number	1	Time multiplier. 0 freezes the animation; the pointer stays live.
interactive	boolean	true	React to the pointer (tracked on window, so overlaid content never blocks it).
className	string	—	Classes for the wrapper. Use `absolute inset-0` to fill a relative parent.
children	ReactNode	—	Optional content rendered above the canvas.

Notes

Renders with WebGL2 into a single full-screen triangle — no three.js, no textures, no dependencies.
Pauses automatically when scrolled off-screen or when the tab is hidden; resumes on return.
prefers-reduced-motion: reduce renders one still frame and ignores the pointer.
A CSS gradient fallback paints instantly and stays if WebGL2 is unavailable.

Next →Mesh Gradient