Aurora

Installation

Usage

Copyimport { Aurora } from "@/components/dithercn/aurora";
 
export function Hero() {
  return (
    <section className="relative isolate min-h-[480px]">
      <Aurora className="absolute inset-0 -z-10" />
      <h1>Your headline</h1>
    </section>
  );
}

Each curtain has a bright lower edge that folds slowly, with rays that fade as they rise. Further curtains hang higher and dimmer. height sets where the lowest edge hangs, so you can keep the area under it clear for text.

The props group into three jobs:

• Shape: curtains, height, spread, sway, turbulence, rays, length.
• Light and colour: color for the edges, tipColor for the tops of the rays, background, glow, intensity, shimmer. Pass palette to set every tone yourself.
• Placement and motion: tilt, scale, drift, direction, mask, plus the engine's speed, cell and matrix.

Examples

Above a headline

Raising height lifts the curtains off the lower third, where the headline sits on clean paper. A tipColor of "blue" shifts the tops of the rays to a second, cooler hue, and mask="edges" fades the sides.

Northern lights

Your own colours turn it into the real thing: green edges, violet tips and a night-sky background. Four curtains, longer rays, a slight tilt and a little drift give it depth.

Hanging over a call to action

direction="down" flips the curtains so the rays fall from the top and the button sits on clear paper below. Few broad rays and 4px cells give it a coarser, poster-like grain.

Still, in a banner

With animate={false} it draws one frame. stillTime picks which moment, so you can choose a shape you like.

Props

Notes

• It is decorative and hidden from assistive technology. Put real text on top of it, not inside it.
• With reduced motion turned on, it draws one still frame and stops.
• It pauses when scrolled out of view or when the tab is hidden, and releases its WebGL context when far offscreen. Without WebGL it shows a CSS approximation in the same colours.
• It costs one small draw per frame at 30 fps, at one pixel per dither cell. More curtains cost a little more per pixel. See Performance.