Best for
Hero sections, loading screens, and background layers where organic floating particle motion adds visual warmth without WebGL overhead
Stack
A ready-made Floating Bubbles UI you can fork, run, and customize with the prompt pack below.
What's actually inside
The honest engineer's breakdown — what the Floating Bubblestemplate does, how it's wired, and where it's opinionated.
The Floating Bubbles template is one of the most approachable animation templates in the V0 community. The BubbleField component generates N bubble configs on mount using useMemo — each bubble gets a random position, size, color, and animation duration. These configs drive individual bubble divs: rounded-full elements that Framer Motion animates in a continuous loop, drifting upward (y: -120px → 0), swaying slightly on the x-axis, and fading in and out (opacity: 0 → 0.8 → 0) on repeat. The result is a soft, organic particle field that looks like bubbles or floating lights rather than mechanical CSS transitions.
A Stagger initialDelay prop on each bubble's Framer Motion transition gives them randomized start times so they do not all float up simultaneously — this is what makes the field look natural rather than robotic. The Container div is relative-positioned and overflow-hidden, keeping bubbles within the section bounds. A Color palette prop accepts an array of Tailwind bg-* class names so the bubble set can match any brand without touching component internals.
Honest caveats: the template does not include bubble-to-bubble collision detection — bubbles will overlap freely, which looks fine for a decorative background but may not satisfy requirements for a physics simulation. Any viewport-size-dependent position calculation using window.innerWidth will throw a Next.js SSR error if not wrapped in useEffect. The stagger delay values must be wrapped in useMemo to prevent re-randomization on every render, which the template should handle correctly — but if bubbles reset their positions on re-render, this is the first thing to check.
Key UI components
BubbleFieldGenerates N bubble configs via useMemo and renders each as an absolutely positioned animated div
Single BubbleA rounded-full div with a Framer Motion float-and-fade loop: y drift, x sway, opacity cycle, repeat Infinity
Stagger initialDelayRandom initial delay per bubble (0–5s) so bubbles do not start floating simultaneously
Container divRelative-positioned, overflow-hidden bounding box that keeps bubbles within the section
Color palette propAccepts an array of Tailwind bg-* class names to match bubble colors to brand without editing component internals
Libraries it leans on
framer-motionmotion.div, animate loop, and useReducedMotion for the float-and-fade cycle on each bubble
ReactuseMemo for stable bubble configs across re-renders, useRef for container dimensions, useState for interactive pop effect
Fork it and get it running
The Floating Bubbles template is the most beginner-friendly animation in this category. Forking and deploying takes about five minutes with no code required.
Fork the template into your V0 account
Open https://v0.dev/chat/community/1g1VZMvHP0o. You will see floating circles animating in the preview pane immediately. Click Fork to copy the project into your own V0 account. No coding is required to fork — just sign in with a free V0 account and click the button.
You should see: You are inside your own copy of the Floating Bubbles project with the chat and preview panels active.
Confirm bubbles are floating in the preview
In the Preview tab on the right side of the V0 editor, you should see circles slowly drifting upward and fading. If you see static dots or a blank canvas, click the Refresh icon in the Preview tab header. The Vercel Sandbox preview occasionally does not restart Framer Motion animation loops after a fork — a single refresh always fixes it.
You should see: Bubbles float upward with visible drift and fade animations in the preview.
Adjust background color and text in Design Mode
Press Option+D (Mac) to open Design Mode. You can click the section background to change its color and edit any demo text overlaid on the bubbles directly in the visual panel. Design Mode edits are completely free — no V0 credits spent.
You should see: Section background color and text updated to your brand without any credits used.
Change bubble colors, count, or size via a prompt
In the V0 chat, paste a prompt from the prompt pack below. The simplest prompt changes the BubbleField color palette and count — for example, switching to violet and pink bubbles at 40% opacity. V0 will update the component and reload the preview within seconds.
Tip: Always specify Tailwind bg-* class names in your prompt — they are what the color palette prop accepts.
You should see: BubbleField renders with updated colors and bubble count matching your brand.
Publish to a live Vercel URL
Click Share (top-right of the V0 editor) and open the Publish tab. Click 'Publish to Production'. V0 builds the Next.js project and deploys it to a vercel.app subdomain in under 60 seconds. If the build fails, check the SSR gotcha below — it is the most common failure for this template type.
You should see: A live vercel.app URL where the floating bubbles animate in any browser including mobile.
Pair with another template from this category
The BubbleField component is easy to combine with other templates. Fork a second template (such as Hero Geometric Background) via the Git panel workflow — connect both to GitHub repos, clone locally, and copy the BubbleField component file into the other project's components directory. The color palette prop makes it adapt to any host design without additional changes.
You should see: BubbleField component available in a second project, layered above a geometric background.
The prompt pack
Copy-paste these straight into v0's chat to customize the Floating Bubblestemplate. Each one names this template's own components — no generic filler.
Change bubble colors and count to match brand
Replaces the default bubble colors and count with brand-specific values without changing any animation logic in BubbleField.
Update BubbleField to render 25 bubbles using the color palette ['bg-violet-400', 'bg-pink-400', 'bg-fuchsia-300'] at 40% opacity. Set the bubble size range between w-4 h-4 (minimum) and w-12 h-12 (maximum) with random sizes assigned per bubble in the useMemo config.
Add a glow effect to each bubble
Adds a purple glow ring around each bubble with a synchronized scale pulse, making the BubbleField look like glowing orbs instead of flat circles.
Add a box-shadow inline style to each bubble div in BubbleField: box-shadow: 0 0 12px 4px rgba(167, 139, 250, 0.5) to match the violet color palette. Also add a subtle scale pulse to the Framer Motion animate loop — scale from 1 to 1.05 at the apex of the float cycle and back to 1 — so the glow appears to breathe with the bubble's movement.
Make bubbles avoid the hero headline text area
Prevents BubbleField bubbles from spawning in the hero headline area, ensuring text remains readable without needing a gradient overlay.
Add a noGoZone prop to BubbleField that accepts an object with x, y, width, and height values defining a rectangle relative to the container where bubbles should not spawn. In the useMemo bubble position generator, filter out any bubble whose initial x and y coordinates fall within the noGoZone rect. Set the default noGoZone to cover the center 60% of the container width and top 40% of the height to protect typical headline placement.
Pop bubbles on click with a burst animation
Turns the decorative BubbleField into an interactive element where clicking a bubble pops it with a burst animation and removes it from the field.
Add an onClick handler to each bubble div. On click, trigger a Framer Motion animate sequence on the clicked bubble: scale to 1.5 and opacity to 0 over 0.2 seconds. After the animation completes, remove the bubble from the BubbleField rendered list using a useState array that filters out the clicked bubble's id. The remaining bubbles should continue floating undisturbed.
Sync bubble speed to an audio beat using Web Audio API
Makes the BubbleField react to audio beats — bubbles accelerate on each detected beat, creating a music-reactive background effect.
Add an AudioContext that reads from a microphone input (navigator.mediaDevices.getUserMedia). Use an AnalyserNode to compute energy in a mid-frequency band (200–2000 Hz) on each requestAnimationFrame tick. When the energy crosses a beat detection threshold, use Framer Motion's useAnimation controls to temporarily increase all BubbleField bubble animation speed by 3x for 200ms, then ramp back down to normal speed over 500ms. Add a 'Connect microphone' toggle button that enables and disables the audio feature.
Load bubble theme config from Supabase per user account
Enables per-user bubble theme personalization by fetching BubbleField config from Supabase, so different users see different color schemes without code changes.
Create a Next.js Server Component wrapper around BubbleField that fetches a row from a Supabase 'bubble_themes' table (columns: colors as a JSON array of Tailwind class strings, count integer, size_min integer, size_max integer) filtered by the current user's ID after Clerk auth resolves using auth() in the Server Component. Pass the fetched config as props to BubbleField. Cache the result using Next.js revalidate: 3600 so it refreshes hourly without hitting Supabase on every request. Store SUPABASE_URL and SUPABASE_SERVICE_ROLE_KEY in the V0 Vars panel — no NEXT_PUBLIC_ prefix since this runs server-side.
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 defined when bubble positions use window.innerWidthWhy: If BubbleField computes bubble starting positions based on viewport size using window.innerWidth, those calculations run during Next.js SSR before the browser is available and throw a build error.
Fix: Initialize bubble configs inside useMemo with a fixed default width (e.g., 1200) for the server render, then update with real viewport dimensions inside a useEffect on mount.
Move viewport-dependent bubble position calculations inside useEffect in BubbleField and use a safe default container width of 1200 for SSR so the component builds without errors
All bubbles start floating at the same moment — looks roboticWhy: Missing random initialDelay on each bubble's Framer Motion animate means all animation loops start at mount time simultaneously, creating a synchronized pulsing effect instead of a natural field.
Fix: Add transition={{ delay: Math.random() * 5 }} to each bubble's motion.div. Wrap the delay values in useMemo so they are generated once on mount and remain stable across re-renders.
Add a random initial delay between 0 and 5 seconds to each bubble's Framer Motion transition in BubbleField and wrap the delay values in useMemo for stability across re-renders
Missing @types/canvas-confetti if pop effect is addedWhy: If you add the pop-on-click effect using canvas-confetti, V0 adds the library usage but does not automatically install the @types/canvas-confetti TypeScript declaration package, causing a build failure.
Fix: In the V0 chat, ask: 'Add @types/canvas-confetti to devDependencies in package.json so the TypeScript build does not fail'.
Add @types/canvas-confetti to devDependencies so the TypeScript build does not fail with 'Missing @types/canvas-confetti'
Bubbles are not visible on a white background — appear as white circlesWhy: The default bubble bg color may be bg-white or bg-slate-50, which is invisible against a light-colored page background without a visible border or opacity contrast.
Fix: Always pass a visible color palette prop or set a default opacity of at least 0.3 with a border-slate-200 border so bubbles remain distinguishable on any background color.
Update BubbleField to default to colors ['bg-violet-300', 'bg-blue-300', 'bg-pink-300'] at opacity-40 so bubbles are visible on both light and dark backgrounds without requiring an explicit prop
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
- Loading screen or splash page where the bubble animation serves as a low-key waiting state without distracting from the main UI
- Background layer for a pricing section or feature card grid with a soft, approachable aesthetic
- Mobile-first pages where lightweight CSS-driven Framer Motion animation is preferable to WebGL canvas effects
- Portfolio or personal site hero section where organic motion adds warmth without requiring 3D expertise
Go custom when
- You need true physics simulation with collision detection between individual bubbles — the template uses independent animation loops with no awareness of other bubbles
- Bubble paths must follow specific trajectories driven by data such as a network graph or organizational hierarchy visualization
- Performance profiling on target device profiles shows the Framer Motion animation is dropping frames, requiring a canvas-based or WebGL particle system for better throughput
RapidDev can embed the Floating Bubbles effect into a production Next.js landing page with all sections, copy, and backend integrations wired up — shipped in a predictable timeline.
Frequently asked questions
Is the Floating Bubbles template free?
Yes. The template is free to fork on v0.dev with a free account. Framer Motion (MIT) and Next.js (MIT) are both permissively licensed. Vercel Hobby tier deployment is free for personal projects.
Can I use this animated bubble background commercially?
Yes. V0 community templates have no commercial use restrictions. Framer Motion is MIT-licensed. You can ship this on a client site, SaaS product, or paid portfolio without attribution.
Why do my bubbles appear as static dots in the V0 preview?
V0's Vercel Sandbox preview sometimes does not restart Framer Motion animation loops after a fork. Click the Refresh icon in the Preview tab header to force a full remount. The live deployed Vercel site will always animate correctly.
Why does my fork build fail with 'ReferenceError: window is not defined'?
This happens when BubbleField uses window.innerWidth to calculate bubble positions during Next.js server-side rendering. Move those calculations inside a useEffect and use a safe default width (e.g., 1200) for the server render. The prompt pack includes a direct fix prompt.
The bubbles all start at the same time — how do I stagger them?
This means the initialDelay values are missing or not being applied. Use the prompt 'Add a random initial delay (0–5s) to each bubble's Framer Motion transition in BubbleField' from the pack above. Wrap the delays in useMemo so they do not reset on every render.
I can't see the bubbles — they blend into the background. What's wrong?
The default bubble color may be too close to your page background, especially on white pages. Pass a visible color palette prop to BubbleField with colors like bg-violet-300 or bg-blue-300 at opacity-40 so bubbles are distinguishable on any background.
Can RapidDev help build a full landing page with this bubble background?
Yes. RapidDev builds production Next.js landing pages and can embed the Floating Bubbles background into a complete page with all sections, copy, forms, and backend integrations on a clear timeline.
Does the floating bubble animation work on mobile devices?
Yes. BubbleField uses Framer Motion CSS-based animation which is far lighter than WebGL and works well on mobile. The template respects useReducedMotion so users with reduced-motion preferences set in their OS see a static version instead of the animation.
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.