Skip to content

Noir AuroraMotion

Horizon Sweep

The hairline between two default sections, fading at both ends.

Live, interactive React component · dark themeResponsive

About the Noir Aurora Horizon Sweep

The hairline between two default sections, fading at both ends. When it comes into view a short light of aurora runs along it once (the view's travelling light while it runs; under reduced motion the line stays still). Place it between Sections, not inside one, and keep it out of the viewport of another travelling light (LiveSync, a beam lap). Decorative: hidden from screen readers.

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.

The pieces that sit beside this one in the same style.