proNew180 lines · framer-motion

Pricing Credits Calculator

Type a number, or tap a preset, watch the bill recompute. A credits-based pricing calculator: a stepper and a real number input for the exact amount, quick preset chips for common volumes, and a live total that applies the right volume-discount tier as the number crosses a threshold.

Use it for: Usage- or credit-based products where the per-unit price drops in bands at volume, and visitors want to type their own number rather than drag a slider to it.
Themes: Light + dark
License: Commercial use

Live

Usage-based pricing

Pay for what you call

Credits per month

RateVolume

500 credits × $0.060

$30.00/mo

tsx

"use client";

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

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

export interface CreditTier {
  minCredits: number;
  pricePerCredit: number;
  label: string;
}

export interface PricingCreditsCalculatorProps {
  eyebrow?: string;
  title?: string;

The rest is in Pro.

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

Get Pro

How it behaves

→A plus/minus stepper and a real <input type="number"> both drive the same credits value, clamped to min/max.
→Preset chips (e.g. 100 / 500 / 1,000 / 5,000) jump straight to a common volume; the active preset is visually marked when the count matches exactly.
→Crossing a tier's threshold swaps the per-credit rate and its label badge (Standard / Volume / Bulk) immediately.
→The total price counts up or down with an eased animation between old and new value; under prefers-reduced-motion it jumps straight to the new total.

Accessibility

✓The credits field is a native number input with a visible label, not a custom div — screen readers and keyboards get stepping for free.
✓Preset chips are toggle buttons with `aria-pressed` reflecting an exact match.
✓Honours prefers-reduced-motion.