All illustrations

Cost meter

Spend climbs toward the budget, and a forecast mark shows where the month will end.

FreeHUD · spot

Copy

Download

Open in

ClaudeChatGPTPerplexityGrokCursorv0Lovable
Cost meter: spend climbs toward the budget, and a forecast mark shows where the month will end.

Not quite it? Ask for a variation

Install

Writes one React component into components/illos. Nothing else to install.

npx shadcn@latest add https://illos.dev/r/scifi/cost-meter.json

Or hand it to your agent

Claude Code, Cursor, Codex and any other coding agent can add it from the prompt.

CursorClaudeChatGPTv0Lovable

How it moves

  1. spend starts the month at zero.
  2. it climbs toward the budget day by day.
  3. a forecast mark shows where the month will end.

For developers

File size
5.3 KB gzipped
Motion
Plays once, 3.6 s, then holds
Reduced motion
Shows a still
File
cost-meter.svg

Next in this theme.

Event broadcast: one event goes out, and every subscriber receives it.HUD · spotFree
Latency heatmap: cells warm where requests are slow, and the hottest route is flagged with its p99.HUD · spotFree