Best for
Landing page CTAs and hero sections that need tactile, premium hover effects without a third-party interaction library
Stack
A ready-made Magnetic Buttons UI you can fork, run, and customize with the prompt pack below.
What's actually inside
The honest engineer's breakdown — what the Magnetic Buttonstemplate does, how it's wired, and where it's opinionated.
The Magnetic Buttons template is a focused interaction primitive: a MagneticButton wrapper component that tracks the cursor position via React pointer events, computes an offset based on how close the cursor is to the button's repel zone, and applies that offset as a transform through Framer Motion spring physics. The result is a button that leans toward the cursor as it approaches and snaps back elastically when it leaves — the kind of tactile feedback that makes a landing page feel bespoke without requiring a full interaction design system.
Under the hood, a Lerp utility smooths each frame of cursor tracking so the pull feels physical rather than instantaneous. The spring config (damping and stiffness values in Framer Motion) is where the personality lives — snappy and responsive at low damping, heavy and elastic at higher values. A repel zone radius prop controls the activation distance, so you can widen the magnetic field for dramatic theatrical effect or keep it tight for a subtle premium finish.
Honest caveat: the template ships with a Demo grid showing 3–6 button variants side by side, which is great for testing but not a layout you would drop into a real hero section without restructuring. Mobile support is also not optimized out of the box — touch events have a different model than pointer events, so you will need to gate the magnetic effect behind a hover media query before deploying to mobile audiences.
Key UI components
MagneticButtonWrapper that tracks pointer position and applies spring-driven transform offset to child element
Lerp utilitySmooths the magnetic pull frame-by-frame so movement feels physical rather than snapping
Repel zone radius configProp controlling the cursor distance at which the magnetic effect activates
Spring animation configFramer Motion damping and stiffness values that define whether the effect feels snappy or elastic
Demo gridRenders 3–6 button variants side by side to demonstrate different sizes and repel strengths
Libraries it leans on
framer-motionProvides spring physics, useMotionValue, and useTransform for the magnetic offset calculation
React pointer events APIonMouseMove and mouseleave handlers that feed cursor coordinates into the transform pipeline
Fork it and get it running
Forking takes about five minutes in the browser — no local setup required. Follow these steps to go from the community page to a live Vercel deployment.
Open the template and fork it
Go to https://v0.dev/chat/community/pTsDwmuzGut. You will see the live preview of the magnetic buttons on the right and the project chat on the left. Click the blue Fork button in the top toolbar to copy the entire project into your own V0 account. V0 will redirect you to your new copy immediately.
Tip: You must be signed into V0 to fork. Sign up is free.
You should see: You land in your own V0 project with the Magnetic Buttons code editable in the chat.
Verify the magnetic effect in preview
In your forked project, look at the Preview panel on the right. Hover your cursor over the buttons — you should see them lean toward your cursor and snap back on mouseleave. If the preview is blank or shows static buttons, click the Refresh icon in the Preview tab header to force a full remount of the Framer Motion components.
Tip: The magnetic effect does not work inside an iframe on some browsers — try the fullscreen preview link if hover feels unresponsive.
You should see: Buttons visibly lean toward the cursor with a spring-physics feel on hover.
Edit labels and colors at zero credit cost
Open Design Mode by pressing Option+D (Mac) or clicking the Design icon in the top bar. In the Design view you can click directly on button text to rename it and swap colors using the visual editor without spending any V0 credits. This is the fastest way to match the template to your brand before prompting for deeper changes.
You should see: Button labels and colors updated without consuming credits.
Publish to a live Vercel URL
Click the Share button (top-right) and open the Publish tab. Click 'Publish to Production'. V0 builds your Next.js project and deploys it to a vercel.app subdomain in 30–60 seconds. You will see a live URL you can share immediately.
Tip: If the build fails at this step, see the 'Preview renders correctly but deployed version has no magnetic movement' gotcha below.
You should see: A live https://your-project.vercel.app URL where the magnetic buttons work in any browser.
Add a custom domain
Once deployed, open the Vercel Dashboard (vercel.com/dashboard) and find your project. Go to Settings → Domains → Add. Enter your domain name, then follow Vercel's DNS instructions to point your domain. SSL is provisioned automatically within a few minutes.
You should see: The magnetic buttons page is live on your own domain with HTTPS.
Pull code to GitHub for local editing
In the V0 editor, open the Git panel on the left sidebar. Click Connect and enter a new repository name. V0 will create the repo under your GitHub account and push the code to a branch named v0/main-{hash}. Open that pull request on GitHub and merge it to main to get the code into your local workflow — clone, open in Cursor, and keep going.
You should see: Code is in your GitHub repo on the main branch, ready to clone locally.
The prompt pack
Copy-paste these straight into v0's chat to customize the Magnetic Buttonstemplate. Each one names this template's own components — no generic filler.
Tune the magnetic strength and spring feel
Adjusts the core physics parameters of MagneticButton to produce a slower, more dramatic pull without rewriting any animation logic.
Replace the current repel radius and Framer Motion spring config in the MagneticButton wrapper so the effect feels heavier and slower. Increase damping to 30, reduce stiffness to 80, and expand the activation radius from 80px to 140px. The buttons should feel like they're dragging through thick air rather than snapping back instantly.
Add a color shift on magnetic activation
Adds a visual color feedback layer to the existing spring transform so hover state is reinforced by both motion and color cues.
When the cursor enters the MagneticButton repel zone, smoothly transition the button background from the current color to a 10% lighter tint using Framer Motion's useMotionValue and useTransform on pointer distance. The tint should reach its lightest point when the cursor is closest to the button center, and the color should reset on mouseleave with the same spring easing as the position reset.
Make the buttons work on a dark hero background
Adapts the MagneticButton demo to a dark-themed hero section so it can be dropped directly into a dark landing page.
Wrap the demo grid in a full-viewport dark section using bg-gray-950. Update all button styles so the label text and border are white or translucent white (text-white border-white/30). Replace the current dark drop-shadow on the spring animation with a lighter glow effect (box-shadow: 0 0 20px rgba(255,255,255,0.15)) so the magnetic movement reads clearly against the dark background. Ensure contrast ratios meet WCAG AA.
Add a page-level cursor tracker dot
Adds a global cursor follower that communicates visually which elements are interactive, reinforcing the premium tactile feel of the magnetic system.
Create a small 12px circular div that follows the global cursor position using a single window mousemove listener and Framer Motion spring values (damping: 20, stiffness: 300) for smooth trailing. The dot should scale up to 2x with a Framer Motion animate when the cursor is hovering over any MagneticButton (detect this with onMouseEnter/onMouseLeave on the MagneticButton wrapper), and return to 1x scale with spring easing when it leaves. Position the dot using fixed positioning so it stays above all content.
Connect button click to a Supabase waitlist insert
Turns the MagneticButton into a functional waitlist capture component with Supabase persistence and an animated confirmation flow.
On click of the primary MagneticButton, reveal an inline email input field using a Framer Motion AnimatePresence slide-down animation. On email submission, call a Next.js Server Action that inserts the email into a Supabase 'waitlist' table with columns (email, created_at). After a successful insert, dismiss the input and show a Framer Motion fade-in 'You're on the list!' confirmation message in place of the button. Store SUPABASE_URL and SUPABASE_ANON_KEY in the V0 Vars panel — never hardcode them.
Export MagneticButton as a standalone shadcn-style registry component
Makes MagneticButton portable so it can be dropped into any future V0 project as a single-file component without restructuring the project.
Refactor MagneticButton into a single self-contained file at components/ui/magnetic-button.tsx. Remove all external prop dependencies except children, className, and an optional strength prop that accepts 'light' | 'heavy' (mapping to two preset spring configs). Add a registry.json entry so the file can be imported into other V0 projects via the 'Open in v0' share flow. The component must have no imports outside of react and framer-motion.
Gotchas when you extend it
The failures people actually hit when they push this template past its defaults — and the exact fix for each.
ReferenceError: window is not definedWhy: The pointer event listeners or window.innerWidth references inside MagneticButton run during Next.js SSR before the browser exists, causing a build failure.
Fix: Wrap all mouse tracking logic inside a useEffect; initialize motion values to 0 on the server so the component renders safely during SSR.
Move all window and pointer event listeners inside a useEffect in MagneticButton so the component is SSR-safe and does not throw during Next.js server rendering
Framer Motion spring animation janks on low-power mobile devicesWhy: The magnetic lerp runs on every pointermove frame without throttling; mobile touch event model differs from pointer events, causing choppy animation.
Fix: Add touch-action: none to the button CSS and gate the magnetic effect behind a useMediaQuery('(hover: hover)') check so mobile users get a standard press state instead.
Disable the magnetic tracking effect on touch-only devices by checking the (hover: hover) media query in MagneticButton; keep normal Tailwind hover styles for mobile
V0 does not support Tailwind override classes like animate-heartbeatWhy: V0 ignores custom Tailwind keyframes and @apply utilities defined outside the default config in V0's Vercel Sandbox preview environment.
Fix: Define custom keyframes directly in the component via Framer Motion's animate prop rather than @keyframes in globals.css so they work in V0's preview.
Replace any custom @keyframes CSS animations on the MagneticButton with equivalent Framer Motion animate props so they work in V0's preview
Preview renders correctly but deployed version has no magnetic movementWhy: Preview-vs-deployment discrepancy caused by phantom /app dir or caching; the useMotionValue hook hydrates differently between the Vercel Sandbox and production build.
Fix: In Vercel Dashboard, redeploy with 'Use existing Build Cache' unchecked; verify the deployed bundle includes framer-motion in package.json dependencies (not devDependencies).
Check that framer-motion is listed in package.json dependencies and not just devDependencies, then redeploy
Module not found: Error: Can't resolve '@/lib/utils'Why: V0's @/ path alias is not configured in projects scaffolded outside Next.js defaults, breaking imports of the cn() utility used by MagneticButton.
Fix: Add `"paths": { "@/*": ["./*"] }` to tsconfig.json, or inline the cn() utility directly in magnetic-button.tsx to remove the path alias dependency.
Inline the cn() utility function directly in magnetic-button.tsx instead of importing from @/lib/utils to remove the path alias dependency
Template vs. custom — the honest call
A forked template gets you far, fast. Here's where it holds up, and where you'll outgrow it.
The template is enough when
- Your landing page has 1–3 CTA buttons and you want a premium tactile feel without building a full interaction system
- You are prototyping a SaaS marketing site and need to validate the physics-based hover concept in a day
- The design calls for a 'premium web agency' aesthetic where subtle spring interactions reinforce brand quality
- You want to test the magnetic effect on a specific hero section before committing to a broader motion design system
Go custom when
- You need the magnetic effect on non-button elements such as nav items or image cards, requiring a significant refactor of the MagneticButton wrapper logic
- Your project already uses GSAP and mixing Framer Motion adds bundle weight and two competing animation runtimes
- You need accessibility-compliant reduced-motion support with careful testing across assistive technologies and low-power device profiles
If your V0 prototype needs the magnetic buttons wired into a broader design system or backend flow, RapidDev can bridge the gap from forked template to production-grade component library.
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.
Outgrowing the template?
RapidDev turns v0 prototypes into production apps — real auth, database, and payments — at $13K–$25K.
Book a free consultation30-min call. No commitment.