Modules/ PricingFree

Animated Gradient Pricing

Cinematic pricing page with Framer Motion animated gradient meshes that shift colors between plans. Features morphing background gradients, staggered card entrances, interactive hover spotlights, and micro-animations on every element.

Install

npm install framer-motion

Usage guide

## Usage Guide\n\n### Gradient Animation\nThe `GradientBackground` component animates between plan colors when hovering. The gradient is a radial ellipse that smoothly transitions.\n\n### Hover Spotlight\nEach card has a `HoverSpotlight` wrapper that creates a radial gradient following the cursor. This creates a localized lighting effect.\n\n### Price Animation\nWhen switching active plans, the price uses `AnimatePresence` with `popLayout` for smooth spring-based transitions.\n\n### Customization\n- Edit the `PLANS` array for tiers, prices, colors, and gradients\n- The `activePlan` state tracks the selected card\n- `hoveredPlan` drives the background gradient color