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 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.
Live, interactive React component · dark themeResponsive
About the 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. Fine pointers only; nothing happens on touch. Give it the card's own classes (keep ring-lit so the resting card has its glint). Tilt exists for the shared API, but Noir pages never tilt. 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.
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.
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.