Skip to content

Noir AuroraMotion

Compare Bars

Before and after as mono capital rows with a bar each: past rows in quiet ticks, the current row filled with aurora light and its value in aurora.

Live, interactive React component · dark themeResponsive

About the Noir Aurora Compare Bars

Before and after as mono capital rows with a bar each: past rows in quiet ticks, the current row filled with aurora light and its value in aurora. The bars grow from the start when the rows come into view (final at once under reduced motion). A description list; the bars are decorative, so pass label as the sentence a screen reader should hear. Made for the featured testimonial's media; also fits a FeatureSplit or a bento tile.

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.

See it on a full page

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

All 27 in Stats & Charts