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
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.
Live, interactive React component · light themeResponsive
About the 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. Fine pointers only; nothing shows on touch or under reduced motion. Mono has no tilt and no soft light, so tilt and radius are accepted and ignored. Give it the tile's own classes. BentoGrid uses it on every tile; Crosshair is the same effect with the readout on. Client component.
It is part of Swiss Tech Mono. 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.
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.