Neo-Brutal Backdrop
The kit's signature background: the twelve column guides of the page grid, drawn as faint 2 px rules that draw down once, 60 ms apart, when they first come into view (with a dot field at high).
Noir AuroraMotion
Backdrop
Noir's signature: the northern-lights curtain (a sky glow, three curtains of noise-masked rays with a violet fringe, and a bright hem) that lowers into place on load, then sways and breathes slowly.
Live, interactive React component · dark themeResponsive
About the Noir Aurora Backdrop
Noir's signature: the northern-lights curtain (a sky glow, three curtains of noise-masked rays with a violet fringe, and a bright hem) that lowers into place on load, then sways and breathes slowly. In Day it prints as ink rays at 30 %. Put it first inside a relative isolate overflow-clip parent (a Hero, a CTA panel): it sits behind the content, clipped to the parent, and never takes pointer events. One per view. The Aurora extra is the same curtain with more knobs (side, curtains, pointer wind); prefer it in pages.
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.
Soft Bento Backdrop
Soft Bento's background: soft candy blobs (peach behind the copy, butter low in the middle, lilac top right) drifting slowly; on the blue block they turn into warm white glows and wind grooves drift across.
Swiss Tech Mono Backdrop
The Mono grid: the page's column guides (4 on phones, 12 from md) on the Container's columns, drawing down 45 ms apart when the band comes into view.