Magnetic DotsA dense grid of dots that get magnetically pulled toward the cursor, snapping back with a satisfying elastic bounce when you leave.
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/magnetic-dotsFor dark mode, add the dark class to your <html> element:
<html class="dark">Install with AI Canvas MCP
With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.
About Magnetic Dots
Magnetic Dots is a dense grid of points that get pulled toward your cursor as if it were a magnet, and snap back with an elastic bounce when you leave. The whole interaction is a single canvas loop applying a falloff function to each dot, so the effect feels physical without any actual physics library. The visual is restrained but unmistakably tactile, which makes it a good fit behind portfolio hero copy, behind a marketing-page headline, or anywhere a page needs to react to attention.
Built with
Frequently asked questions
- Is Magnetic Dots free to use?
- Yes. Magnetic Dots is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
- How do I install Magnetic Dots?
- One command: npx shadcn@latest add https://aicanvas.me/r/magnetic-dots.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Magnetic Dots for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
- What is Magnetic Dots built with?
- Magnetic Dots is built with React and TypeScript, using Canvas and Tailwind CSS. It ships with both light and dark styling.
- Where would I use Magnetic Dots?
- Common uses include Hero section, Portfolio, and Marketing site. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Magnetic Dots with AI?
- Yes. Magnetic Dots ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas