# Magnetic Buttons V0 Template: Fork It & Feel the Physics

- Tool: V0 Templates
- Last updated: July 2026

## TL;DR

The Magnetic Buttons template adds spring-physics hover interactions to landing page CTAs using Framer Motion and Next.js. Fork it in one click, tune repel radius and damping without touching raw code, and ship a premium tactile feel to your hero buttons. The prompt pack covers everything from spring tuning to a Supabase waitlist integration — no third-party interaction library required.

## Frequently asked questions

### Is the Magnetic Buttons template free to use?

Yes. All community templates on v0.dev are free to fork. You need a free V0 account to fork and edit. Deploying to Vercel is also free on the Hobby tier for personal projects.

### Can I use this template commercially?

Yes. V0 community templates are published for open use. The template uses Framer Motion which is MIT-licensed and Next.js which is also MIT-licensed. There are no royalties or attribution requirements for commercial use.

### Why does my fork show a blank preview or static buttons?

The most common cause is V0's Vercel Sandbox preview not remounting Framer Motion components after a fork. Click the Refresh icon in the Preview tab header to force a full page reload inside the preview frame. If the issue persists after deploy, check that framer-motion is in package.json dependencies (not devDependencies).

### Does the magnetic effect work on mobile?

Not by default. The template uses pointer events which behave differently on touch screens, and the lerp loop is not optimized for mobile frame rates. You should gate the magnetic effect behind a CSS (hover: hover) media query check so mobile visitors see standard Tailwind hover styles instead.

### How do I change the spring feel — make it snappier or slower?

Send a prompt to V0 describing the change: lower stiffness and higher damping produce a heavier, slower pull; higher stiffness and lower damping produce a snappy, immediate response. The spring config lives in the MagneticButton wrapper component.

### Can I add the magnetic effect to image cards or nav links, not just buttons?

The MagneticButton wrapper is children-agnostic — you can wrap any element. However, the repel zone calculations assume a rectangular button bounding box, so applying it to complex layouts like nav bars or image grids may need significant adjustments to the offset math.

### Can RapidDev customize this template for my project?

Yes. RapidDev works with V0-forked prototypes and can extend the magnetic button system into a full design system, connect it to a backend, or integrate it with your existing Next.js codebase.

### Why does the build fail with 'Module not found: @/lib/utils'?

This path alias error happens when the template is used in a project where tsconfig.json doesn't have the @/* alias configured. The quick fix is to inline the cn() utility directly in magnetic-button.tsx rather than importing it from @/lib/utils.

---

Source: https://www.rapidevelopers.com/v0-template/magnetic-buttons
© RapidDev — https://www.rapidevelopers.com/v0-template/magnetic-buttons
