Back to promptsPROMPT_001 / LANDING PAGES PROMPT_002 / LANDING PAGES PROMPT_004 / CARDS
PROMPT_003 / BUTTONS
GIVE MY CTA GRAVITY.
A reusable cursor-following button component with proper touch and reduced-motion fallbacks.
- BEST FOR
- A hero CTA that needs to feel alive without being loud.
- DIFFICULTY
- Intermediate
- TOOLS
- Lovable · Cursor · Bolt · v0
USE THIS IN LOVABLE
Create a reusable MagneticButton component.
Behaviour: on pointermove within the button, translate it by 35% of the offset between the cursor and the button center, computed inside requestAnimationFrame. On pointerleave, reset the transform with a 500ms cubic-bezier(0.22, 1, 0.36, 1) transition. Include an arrow that translates 3px up-right while hovered.
Guards: only activate when matchMedia('(pointer: fine)') matches and prefers-reduced-motion is not set. On touch devices render a plain button with an active scale of 0.98. Reset the transform on blur so keyboard focus never lands on a displaced element.
Use it for the hero CTA only — do not apply it globally.
---
Tool: Lovable. Apply the changes directly to the existing codebase, reuse the current design tokens and component structure, and do not introduce new dependencies.RECOMMENDED INTERACTIONS.
RELATED PROMPTS.
MAKE MY WEBSITE FEEL EXPENSIVE.
Adds restrained motion, glass surfaces, premium hover behavior, better typographic transitions and professional microinteractions.
premiumlanding-pagemicrointeraction
BUILD A LANDING PAGE THAT LOOKS HIRED.
A complete dark, monochrome, editorial landing page structure with asymmetric bento sections and restrained motion.
premiumlanding-pagedark-ui
REPLACE THE POINTER, CAREFULLY.
Dot plus trailing ring with contextual labels, mounted only where it improves the experience.
cursormousepremium