Modules/ PricingFree

Magnetic CTA Pricing

Premium pricing cards with GSAP-powered magnetic button effects. Buttons attract the cursor with realistic physics, smooth snap-back, and ripple waves on click. Each tier has unique magnetic field strength.

Install

npm install gsap framer-motion

Usage guide

## Usage Guide\n\n### Magnetic Effect\nEach button has a `magStrength` property (0.1-0.5). Higher values = stronger magnetic pull. The elastic bounce-back uses `gsap elastic.out(1, 0.3)`.\n\n### Ripple Effect\nClick creates a ripple wave animation. The CSS `@keyframes ripple` scales and fades the ripple element over 0.6s.\n\n### Customization\nEdit `PLANS` array to add/remove plans. The `color` prop controls the plan accent color. `glow` controls the box shadow glow for popular plan.\n\n### Performance\nThe magnetic effect uses GSAP transforms which are GPU-composited.