proNew171 lines · framer-motion

Pricing Tiers Toggle

Three tiers, one switch, prices that count up to meet you. Three pricing cards with a monthly/yearly segmented toggle; the highlighted tier gets a hard-shadow card treatment and prices animate between values with an odometer-style roll.

Use it for: The main pricing section of a SaaS landing page with a small, fixed set of plans and an annual discount to promote.
Themes: Light + dark
License: Commercial use

Live

Pricing

Simple pricing that scales with you

Starter

$19/ mo

For solo builders trying things out.

1 workspace
10k requests / mo
Community support

Growth

$49/ mo

For teams shipping to real customers.

5 workspaces
150k requests / mo
Priority support
Usage analytics

Scale

$129/ mo

For companies that need headroom.

Unlimited workspaces
2M requests / mo
Dedicated Slack
SSO & audit logs

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 PricingTier {
  name: string;
  monthly: number;
  yearly: number;
  blurb: string;
  features: string[];
  highlighted?: boolean;
  cta?: string;
}

The rest is in Pro.

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

Get Pro

How it behaves

→The Monthly/Yearly toggle is a segmented control, not a native checkbox or <select>; the yearly side carries a discount badge.
→Switching period animates each price with an eased count between the old and new value, driven by requestAnimationFrame, not layout jumps.
→The highlighted tier gets a bolder border, a hard offset shadow in the --signal colour, and a 'Most popular' badge.
→Cards spring into view on scroll with a staggered entrance; prefers-reduced-motion skips both the entrance and the price-roll animation.

Accessibility

✓The period toggle uses real buttons with `aria-pressed`, not a native checkbox styled as a switch.
✓Price changes are read out as plain updated text; the rolling animation is purely visual and marked `aria-live="off"` to avoid noisy announcements.
✓Every CTA button has a visible focus ring tuned for both the plain and highlighted card backgrounds.
✓Honours prefers-reduced-motion.