Skip to content

Noir AuroraMotion

Aurora

The northern-lights curtain with the knobs the shared Backdrop lacks: which edge it hangs from, how many curtains, and the pointer "wind" (a gust that leans the curtains as the mouse crosses the section, then lets them settle).

Live, interactive React component · dark themeResponsive

About the Noir Aurora Aurora

The northern-lights curtain with the knobs the shared Backdrop lacks: which edge it hangs from, how many curtains, and the pointer "wind" (a gust that leans the curtains as the mouse crosses the section, then lets them settle). It renders Backdrop's curtain, so it is aria-hidden, takes no pointer events, sits behind the content (-z-10) and clips to a relative isolate parent; Hero and CTA are such parents, so pass it as their backdrop. One per view; it lowers into place on load, then sways and breathes (a data-loop: paused offscreen, with MotionToggle and under reduced motion, where the wind is off too). Day prints it as ink rays. Client component.

It is part of Noir Aurora. The style’s 91 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.

To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.