Enhance your website's visual appeal with 't-bouncing-circles.' This React component allows you to effortlessly integrate captivating animated bouncing circles, making it ideal for dynamic banners, interactive backgrounds, and engaging user interfaces.
Install the package using npm:
npm install t-bouncing-circles
You can customize the appearance and behavior of the bouncing circles by providing custom props. Here are the customizable properties:
-
numberOfCircles
(number, default: 50): Number of bouncing circles. -
constantSpeed
(number, default: 0.5): Constant speed of the circles. -
circleColor
(string, default: "rgba(210,208,220,0.5)"): Color of the circles. -
connectedLineColor
(string, default: "rgba(210,208,220,0.5)"): Color of the lines connecting circles. -
connectedLineWidth
(number, default: 1): Width of the lines connecting circles. -
connectedRadius
(number, default: 100): Radius within which circles are connected. -
maximumConnection
(number, default: 3): Maximum number of connections for each circle. -
width
(number): Width of the canvas (px) if undifined they will equal to width of their parent. -
height
(number): Height of the canvas (px) if undifined they will equal to height of their parent.
Simply import the BouncingCircles
component and include it in your React component:
import React from 'react';
import BouncingCircles from 't-bouncing-circles';
const YourComponent = () => {
return (
<div>
{/* Your other components */}
<BouncingCircles
width={800}
height={800}
numberOfCircles={50}
constantSpeed={0.5}
circleColor="rgba(210,208,220,0.5)"
connectedLineColor="rgba(210,208,220,0.5)"
connectedLineWidth={1}
connectedRadius={100}
maximumConnection={3}
/>
</div>
);
};
export default YourComponent;