All projects · SaaS Product Tools
LimitLens — Plan Usage at a Glance
A SaaS plan-usage dashboard that renders per-metric consumption cards (AI credits, seats, storage, automations) with animated progress bars,…
A SaaS plan-usage dashboard that renders per-metric consumption cards (AI credits, seats, storage, automations) with animated progress bars, deriving percentage and ok/warning/critical states from used-vs-limit data. A summary banner and upgrade CTA are driven by the worst metric state, escalating copy and color as limits approach.
- Threshold-driven state engine (80% warn / 90% critical) computed purely from used/limit values
- Worst-metric aggregation that escalates the banner message, CTA label, icon, and color scheme
- Animated usage bars with per-state gradient and glow treatments
- Debug preset controls (low usage / near limits / at cap) to demo state transitions instantly
Built with: HTML, CSS, Vanilla JavaScript, CSS custom properties, Inline SVG icons, Google Fonts (Sora/Outfit)