Bubble FieldA grid of outline circles that burst on hover — each expanding and fading like a soap bubble popping, then reforming, with a soft pastel blue palette.
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/bubble-fieldFor 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 Bubble Field
Bubble Field is a grid of outline circles that pop on hover, each one expanding and dissolving like a soap bubble before quietly reforming a moment later. The palette is a soft pastel blue, designed to feel calm even when the entire field is animating. The pop-and-reform cycle is driven by a single canvas loop, so dozens of bubbles can be in motion at once with no DOM cost. Try it as a hero backdrop, a friendly empty state, or a landing-page band where you want playful motion without distracting copy.
Built with
Frequently asked questions
- Is Bubble Field free to use?
- Yes. Bubble Field 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 Bubble Field?
- One command: npx shadcn@latest add https://aicanvas.me/r/bubble-field.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Bubble Field 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 Bubble Field built with?
- Bubble Field is built with React and TypeScript, using Canvas and Tailwind CSS. It ships with both light and dark styling.
- Where would I use Bubble Field?
- Common uses include Hero section, Landing page, and Empty state. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Bubble Field with AI?
- Yes. Bubble Field 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