61 lines
1.3 KiB
Plaintext
61 lines
1.3 KiB
Plaintext
---
|
|
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
|