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).
Soft BentoMotion
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.
Live, interactive React component · light themeResponsive
About the 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. Put it first inside a relative isolate parent (a Hero, a CTA panel): it sits behind the content, clipped to the parent, and never takes pointer events. One per view.
It is part of Soft Bento. 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.
See it on a full page
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.
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.