Docs
Particle Bubble Background
Particle Bubble Background
Display A Particle Bubble Background made by TailwindCSS
Installation
Copy and paste the Particle Bubble code into your project.
API Reference
A React component that creates an interactive canvas-based particle system with mouse/touch tracking and customizable parameters.
Props
Prop | Type | Description |
---|---|---|
initialParticleCount | number | The initial number of background particles to render. Default: 50 |
initialParticleSpeed | number | The initial speed factor for particles. Default: 0.5 |
initialParticleSize | number | The initial size factor for particles. Default: 1 |
backgroundColor | string | The background color of the particle system. Default: "#214" |
title | string | The title displayed in the center of the screen. Default: "Canvas Particle System" |
showControls | boolean | Whether to show the particle control panel. Default: true |
Usage
export default function Demo() {
return (
<ParticleSystem />
)
}
Notes
- The particle system uses Canvas for rendering and is optimized for performance.
- Mouse and touch events are supported for interactive particle generation.
- The component is responsive and will automatically adjust to window resizing.
- For best performance on mobile devices, consider using lower particle counts.