pro133 lines · framer-motion

Budget Guard

Rate limits and spend caps you can see. A token-bucket rate limiter and daily spend cap in one panel: bucket cells drain and refill, a load histogram, and a clear Flowing / Throttling / Stopped state.

Use it for: Agent ops, API gateways, cost controls.
Themes: Light + dark
License: Commercial use (draft)

Live

Guard

60 req/min · soft throttle

Flowing

42 tokens left in bucket0 held back

Today's spend$17.40 / $25

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

export type GuardState = "ok" | "throttled" | "stopped";

export interface BudgetGuardProps {
  /** Requests allowed per minute (bucket size). */
  limit?: number;
  /** Simulated incoming requests per second. */
  load?: number;
  /** Stop the agent outright when the bucket is empty. */
  hardStop?: boolean;
  /** Daily spend cap in dollars, and spent so far. */
  dailyCap?: number;
  spent?: number;
  autoplay?: boolean;
  onStateChange?: (s: GuardState) => void;
  className?: string;
}

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→24 cells show how full the bucket is; colour follows state.
→Histogram of recent load with a dashed burst line.
→Daily spend bar; at the cap, or empty bucket with hard stop, the state becomes Stopped with an explanation.
→Pause and Reset controls. onStateChange fires on transitions.

Accessibility

✓Bucket is role=meter.
✓State chip is role=status.
✓Honours prefers-reduced-motion.