Skip to content

Noir AuroraMotion

Live Sync

The live-sync diagram for a bento tile: source chips on the left (an icon chip, the name and a status dot), a glowing hub in the middle with a mono caption, and output cards on the right (a Metric-like value with a delta, a badge or a mono meta line).

Live, interactive React component · dark themeResponsive

About the Noir Aurora Live Sync

The live-sync diagram for a bento tile: source chips on the left (an icon chip, the name and a status dot), a glowing hub in the middle with a mono caption, and output cards on the right (a Metric-like value with a delta, a badge or a mono meta line). Hairline wires are measured from the real chips; light pulses run in along the source wires, the hub flashes, pulses run out and the outputs flash, on one 5 s clock (the view's travelling light; a data-loop that pauses offscreen and with MotionToggle, still under reduced motion). The whole diagram is one image to screen readers (label). Phones show four sources, no hub caption and no meta. 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.

See it on a full page

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

All 27 in Stats & Charts