Puffs

An animation wrapper component. Creates a container with animated elements in the background every provided time. The elements will move smoothly and disappear.

<Puffs style={{ width: '100%', height: 300 }} />
Prop nameTypeDefaultDescription
themeanyRequired
classesanyRequired
animatebooltrue
puffIntervalnumber5000

How often to create new puffs. Should be greater than 4000ms.

quantitynumber8

Total number of puffs to create.

Method nameParametersDescription
stopAnimations
startAnimations
onPuffs

Create a random set of puffs on the back of the container.

createPuff

Create a puff with random valid properties.

Returns HTMLElement

Source code: src/Puffs Open in: Playground