---
title: Bubble Background
description: An interactive background featuring smoothly animated gradient bubbles, creating a playful, dynamic, and visually engaging backdrop.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="bubble-background-demo" />

## Installation

<ComponentInstallation name="bubble-background" />

## Usage

```tsx
<BubbleBackground />
```

## Props

<TypeTable
  type={{
    children: {
      description: 'The children of the component',
      type: 'React.ReactNode',
      required: false,
    },
    interactive: {
      description: 'Whether the background is interactive',
      type: 'boolean',
      default: 'false',
      required: false,
    },
    transition: {
      description: 'The transition of the interactive bubble',
      type: 'SpringOptions',
      required: false,
      default: '{ stiffness: 100, damping: 20 }',
    },
    colors: {
      description: 'The colors of the background',
      type: `object`,
      default: `{
        first: '18,113,255',
        second: '221,74,255',
        third: '0,220,255',
        fourth: '200,50,50',
        fifth: '180,180,50',
        sixth: '140,100,255',
      }`,
      required: false,
    },
  }}
/>

## Credits

- Credits to [GlitchWorker](https://codepen.io/glitchworker/pen/jENZGOV) for the inspiration