Neo-Brutal Spotlight
A box with the kit's dot-grid lens: a patch of ink dots that follows the pointer, and with ring a cobalt arc on its outline near the pointer.
Spotlight
A box with a warm peach light that follows the pointer, optionally a rim light along its edge (ring); while hovered it rises and, with tilt, leans toward the pointer, and a press sinks it back on the squish.
Live, interactive React component · light themeResponsive
About the Soft Bento Spotlight
A box with a warm peach light that follows the pointer, optionally a rim light along its edge (ring); while hovered it rises and, with tilt, leans toward the pointer, and a press sinks it back on the squish. Fine pointers only; nothing happens on touch. Give it the card's own classes. Tilt only visual tiles, never cards with buttons. Client component.
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.
Noir Aurora Spotlight
A box with the sky spotlight: a soft light that follows the pointer on the fill and, with ring, on the border, tinted ice at the left, aurora in the middle and iris at the right.
Swiss Tech Mono Spotlight
The crosshair hover: under the pointer a hard-edged lime cell (an ink edge on paper, none on ink) snaps to the box's 12-column grid behind the content, with a 1 px crosshair through it; ring adds crop marks that settle in, readout a live mono "X 471 · Y 302" tag.