TokenCounter

Live token count with spring-animated number and a color-coded fill bar that shifts green→yellow→red as tokens approach the limit.

Use and inspectUse this as a presentational interface around your own submit, stream, or state handlers. Reset preview only remounts the local example; it does not send a request or connect to a model.Next: inspect the source and wire its callback to a bounded backend action.

TokenCounterLive token count with spring-animated number and a color-coded fill bar that shifts green→yellow→red as tokens approach the limit.

"use client";
import { useEffect, useState } from "react";
import { motion, useSpring, useMotionValueEvent } from "framer-motion";

type TokenCounterProps = {
  value: number;
  max: number;
  className?: string;
};

export function TokenCounter({ value, max, className }: TokenCounterProps) {
  const spring = useSpring(value, { stiffness: 80, damping: 18 });
  const [count, setCount] = useState(value);

  useEffect(() => {
    spring.set(value);
  }, [value, spring]);

  useMotionValueEvent(spring, "change", (v) => setCount(Math.round(v)));

  const pct = Math.min(count / max, 1);
  const barColor = pct < 0.6 ? "#4ade80" : pct < 0.85 ? "#facc15" : "#f87171";

  return (
    <div className={className ? "pk-token-counter " + className : "pk-token-counter"}>
      <div className="pk-token-counter-row">
        <span className="pk-token-counter-label">Tokens</span>
        <span className="pk-token-counter-count">
          <motion.span className="pk-token-counter-value">
            {count.toLocaleString()}
          </motion.span>
          <span className="pk-token-counter-sep"> / </span>
          <span className="pk-token-counter-max">{max.toLocaleString()}</span>
        </span>
      </div>
      <div className="pk-token-counter-track">
        <motion.div
          className="pk-token-counter-fill"
          animate={{ width: pct * 100 + "%", backgroundColor: barColor }}
          transition={{ type: "spring", stiffness: 80, damping: 18 }}
        />
      </div>
    </div>
  );
}

Install

npm install framer-motion

This component requires framer-motion.

Props

Prop	Type	Default	Description
`value`*	`number`	—	Current token count
`max`*	`number`	—	Maximum token limit
`className`	`string`	—	Optional extra CSS class