Pricing
Pricing - Cursor spotlight
Three-tier comparison with a cursor-tracking spotlight washing across the cards.
- Cursor tracking
- Radial mask
- Highlighted tier
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
Three pricing tiers sit side by side, and a radial spotlight mask tracks the cursor so a wash of light moves across whichever cards the pointer passes over. One tier is visually highlighted as the recommended plan, and the moving spotlight draws the eye across the comparison as the visitor scans.
When to use it
- A three-tier pricing page where you want to steer attention to a recommended plan
- A pricing section that should feel interactive and premium rather than a static table
- Any comparison layout where a cursor-driven highlight encourages exploration
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 120-460px
glowSpotlight size
Related components
Using this block
Buy it, then copy components/blocks/pricing-spotlight/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.