ARWES provides a few ambient background components. Make sure to read the Backgrounds Fundamentals for context.

By default, they will have CSS position: absolute to occupy the closest parent positioned element. Other elements which should be on top of the background should be positioned also. This is to allow simple dynamic resizing on the content to display or simply to occupy the entire window viewport.

They work with the <Animator> component to manage the animation flow. If no animator is found, the background is rendered as a static image.

import { Animator, Puffs } from '@arwes/react'

<Animator duration={{ enter: 1 }}>
  <Puffs
    color="hsl(60, 75%, 50%, 0.5)"
    quantity={100}
    padding={0}
    xOffset={[10, 50]}
    yOffset={[-20, -80]}
    radiusOffset={[4, 20]}
  />
  <div style={{ position: 'relative' }}>
    <h1>ARWES</h1>
  </div>
</Animator>

Check out the Playground for more examples.