Magnetic CTA Hero
`MagneticCtaHero` is a production-oriented Hero with strong type, one tactile primary action and an optional local spotlight. Use it when the conversion action deserves a subtle physical cue.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Purpose
MagneticCtaHero is a production-oriented Hero with strong type, one tactile primary action and an optional local spotlight. Use it when the conversion action deserves a subtle physical cue.
Keep magnetic travel under roughly 8px and use one primary CTA. Avoid applying magnetism to both actions, using it on dangerous controls, or adding cursor trails around it. The content should still work as a completely static Hero.
The CTA remains a real anchor or button with visible focus and a generous hit area. Touch and reduced motion remove pointer response. Prefer a restrained background and concise copy so the tactile action remains the signature interaction.
Source: packages/skills/heroes/magnetic-cta-hero.md