Docs
Particle Bubble Background

Particle Bubble Background

Display A Particle Bubble Background made by TailwindCSS

Particle Bubble

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

PropTypeDescription
initialParticleCountnumberThe initial number of background particles to render. Default: 50
initialParticleSpeednumberThe initial speed factor for particles. Default: 0.5
initialParticleSizenumberThe initial size factor for particles. Default: 1
backgroundColorstringThe background color of the particle system. Default: "#214"
titlestringThe title displayed in the center of the screen. Default: "Canvas Particle System"
showControlsbooleanWhether 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.
BeamsHacker