Modules/ PricingFree

Framer Motion Animated Billing Toggle

Premium billing page with buttery-smooth Framer Motion layout animations. Monthly/yearly toggle with animated price calculations, sliding highlight, staggered feature reveals, and magnetic button effects.

Install

npm install framer-motion @stripe/stripe-js stripe

Usage guide

## Usage Guide\n\n### Billing Toggle\nThe `annual` state controls the monthly/yearly toggle. Prices animate smoothly via Framer Motion `layout` animations and `AnimatePresence` key switching.\n\n### Customization\n- Edit `MONTHLY` array for plan names, prices, and features\n- Toggle colors via the `color` prop on each tier\n- The `popular` flag adds the "Best Value" badge\n\n### Trial Period\nThe backend configures a 14-day trial via `trial_period_days`. Adjust this in the Stripe session creation.\n\n### Customer Portal\nThe PUT endpoint creates a Stripe Billing Portal session for subscription management.