react-animated-squares

A customizable, animated background featuring floating squares

Adapted from design by Mohammad Abdul Mohaiman at https://codepen.io/mohaiman/pen/MQqMyo

Usage Example

import SquaresBG from "react-animated-squares";

<div id="container">
  <SquaresBG count={20} speed={0.7} />
</div>

Instructions

To install: npm i react-animated-squares

Place <SquaresBG /> as first child in parent element, and place contents as subsequent elements. BG will fill any parent with a defined width and height. Parent should have CSS rule overflow: hidden

Props

All props are optional and can be undefined.

count : number

Default value: 10

Number of animated squares to render

speed : number

Default value: 0.5

Speed at which squares rise. A number between 0 and 1, inclusive. Higher is faster

minSize : number

Default value: 100

Minimum size of squares, in pixels

maxSize : number

Default value: 200

Maximum size of squares, in pixels

backgroundColor : string

Default value: "#4E54C8"

Color of background

squareColor : string

Default value: "#FFFFFF"

Color of squares, with 0.2 alpha value by default. Must be 6 character hex, rgb, or rgba

randomBGColor : boolean

Default value: false

Renders a random background color, overrides backgroundColor

randomSquareColor : boolean

Default value: false

Renders a random square color for each square, overrides squareColor