"use client"; import { useEffect, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Check, Zap } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE = [0.16, 1, 0.3, 1] as const; /* -------------------------------------------------------------------------- */ /* Rolling number */ /* -------------------------------------------------------------------------- */ function RollingDigit({ digit, delay }: { digit: number; delay: number }) { return ( {Array.from({ length: 10 }, (_, i) => ( {i} ))} ); } /** * An odometer-style number where each digit column rolls vertically to its * new value. Integer values only. Deterministic (no random, no float writes). */ export function RollingNumber({ value, className, }: { value: number; className?: string; }) { const rounded = Math.round(value); const digits = String(rounded).split(""); return ( {digits.map((d, i) => ( ))} ); } /* -------------------------------------------------------------------------- */ /* Pricing toggle */ /* -------------------------------------------------------------------------- */ const OPT_W = 108; // px per option const PAD = 4; // px inset around the thumb const THUMB_SPRING = { type: "spring", stiffness: 360, damping: 32, mass: 0.85, } as const; /** * A monthly / annual billing toggle with a sliding thumb and a savings chip. * Controlled via `annual` + `onChange`. Fixed track geometry keeps the thumb * pixel-aligned to each option. */ export function PricingToggle({ annual, onChange, savingsLabel = "Save 20%", className, }: { annual: boolean; onChange: (annual: boolean) => void; savingsLabel?: string; className?: string; }) { return (

{/* Sliding thumb */} {(["monthly", "annual"] as const).map((key) => { const isAnnual = key === "annual"; const active = isAnnual === annual; return ( ); })}

{/* Savings chip */} {savingsLabel}

); } /* -------------------------------------------------------------------------- */ /* Demo */ /* -------------------------------------------------------------------------- */ const PLAN = { name: "Pro", tagline: "For teams shipping every day.", monthly: 40, annual: 32, // per month, billed annually features: [ "Unlimited projects and seats", "Advanced usage analytics", "Priority support, 4h response", ], }; const ANNUAL_TOTAL = PLAN.annual * 12; // 384 const SAVED_PER_YEAR = (PLAN.monthly - PLAN.annual) * 12; // 96 const SAVINGS_PCT = Math.round((1 - PLAN.annual / PLAN.monthly) * 100); // 20 export default function Demo() { const [annual, setAnnual] = useState(false); const [nonce, setNonce] = useState(0); // Idle loop: gently flip the toggle so a static preview looks alive. // `nonce` restarts the timer after a manual interaction so it does not // snap back immediately. useEffect(() => { const id = setInterval(() => setAnnual((a) => !a), 2900); return () => clearInterval(id); }, [nonce]); function handleChange(next: boolean) { setAnnual(next); setNonce((n) => n + 1); } const price = annual ? PLAN.annual : PLAN.monthly; return (

{/* Top edge highlight */} {/* Ambient glow behind the price */} {/* Header */}

{PLAN.name}

{PLAN.tagline}

{/* Price */}

$ /mo

{/* Billing detail */}

{annual ? `Billed $${ANNUAL_TOTAL} yearly, you save $${SAVED_PER_YEAR}` : "Billed monthly, cancel anytime"}

{/* Toggle */}

{/* Divider */}

{/* Features */}

{feat}

{/* CTA */} Start 14-day trial

); }

Pricing Toggle

Pro