Hero sections
Hero - Magnetic CTA
Asymmetric hero with a call-to-action that springs toward the cursor, plus slow orbital decoration.
- Cursor magnetics
- Spring physics
- Orbital decoration
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
The layout is deliberately asymmetric, and the primary call-to-action is wrapped in a field that tracks the cursor: as the pointer nears, the button springs toward it and settles back with spring physics when the cursor leaves. Slow orbital shapes circle in the decoration to give the composition gentle ambient life.
When to use it
- A homepage hero where you want the main action to feel irresistible and tactile
- A product page that needs an off-grid, design-forward layout instead of a centered block
- A conversion-focused page where drawing attention to one CTA is the priority
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 0.1-0.6
strengthPull strength - 8-60px
maxPullMax travel
Related components
Using this block
Buy it, then copy components/blocks/hero-magnetic-cta/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.