Bubble Background

<script setup lang="ts">
import BubbleBackground from '@/components/animate-ui/backgrounds/bubble/BubbleBackground.vue'

withDefaults(defineProps<{ interactive?: boolean | string }>(), { interactive: true })
</script>

<template>
  <BubbleBackground :interactive="interactive === true || interactive === 'true'" class="absolute inset-0" />
</template>

InstallationCopy Anchor Link

npx shadcn-vue@latest add https://animate-ui.com/r/vue/backgrounds-bubble.json

pnpm dlx shadcn-vue@latest add https://animate-ui.com/r/vue/backgrounds-bubble.json

yarn dlx shadcn-vue@latest add https://animate-ui.com/r/vue/backgrounds-bubble.json

bun x shadcn-vue@latest add https://animate-ui.com/r/vue/backgrounds-bubble.json

UsageCopy Anchor Link

<script setup lang="ts">
import BubbleBackground from '@/components/animate-ui/backgrounds/bubble/BubbleBackground.vue';
</script>

<template>
  <section class="relative h-[480px] overflow-hidden">
    <BubbleBackground class="absolute inset-0" />
  </section>
</template>

AnimationCopy Anchor Link

• Five blurred, color-blended bubbles move on slow loops: two drift 100px back and forth (30s and 40s, eased in and out), three orbit around points off to the side (full turns in 20s, 40s and 20s, linear).
• With interactive, a sixth bubble follows the mouse on a spring (transition), relative to the center of the container. On touch screens, a tap moves it too.
• The loops pause off screen and while the tab is hidden.
• Under reduced motion, the bubbles hold a still frame and the follower stays put.

API ReferenceCopy Anchor Link

BubbleBackgroundCopy Anchor Link

CreditsCopy Anchor Link

• Credits to GlitchWorker for the inspiration