Swiss Tech Mono Crosshair
The hover readout for a tile, figure or chart: 1 px crosshair lines, a lime cell snapped to the grid under the pointer, crop marks and the live mono "X 471 · Y 302" tag (it flips to the left near the right edge).
Crosshair
The forecast readout over a Chart: a 2 px ink vertical line, a 16 px volt dot and an ink tip ("Nov 14 · €31.2k") that snap to the nearest point under a fine pointer and return to rest when the pointer leaves.
Live, interactive React component · light themeResponsive
About the Neo-Brutal Crosshair
The forecast readout over a Chart: a 2 px ink vertical line, a 16 px volt dot and an ink tip ("Nov 14 · €31.2k") that snap to the nearest point under a fine pointer and return to rest when the pointer leaves. Past the last value the tip reads the forecast range ("Nov 27 · €58–63k"); past 55 % of the width it flips to the left. Wrap exactly one Chart and pass it the same min and max. Decoration only: the Chart keeps its accessible name and summary. On touch it shows resting; under reduced motion it snaps without easing. It counts as the tile's second hover effect, with the lens. Client component.
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.