Skip to content

Neo-BrutalMotion

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).

Live, interactive React component · light themeResponsive

About the 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). No glow, no shapes, no drift. Hero backdrop and the CTA panel render it for you; elsewhere put it first inside a relative isolate parent: it sits behind the content, clipped to the parent, never takes pointer events, and hides under md. One per view.

It is part of Neo-Brutal. The style’s 92 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 same piece, drawn for a different look. Open one to compare it live.

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.

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.