Reactnimations Pipeline

This is a work in progress.

Usage

npm/yarn i -E @reactnimations/pipeline

import Pipeline from '@reactnimations/pipeline'

const MyComponents = () => (
  <>
    <Pipeline />
    <div style={{ position: "absolute" }}>
      <h1>Pipeline Animation as a fullscreen background!</h1>
      <h2>What else?</h1>
    </div>
  </>
)

Properties

Everything is optional.

• baseRef: Element on which basing the canvas size. Otherwise, if not set, window will be the reference, resizing the animation to the current window size.
• settings: Animation settings. See below.

Also, className and style are exposed.

Settings

{
  backgroundColor: string
  baseHue: number
  baseRadius: number
  baseSpeed: number
  baseTTL: number
  noiseSteps: number
  opacity: number
  particleCount: number
  particlePropCount: number
  rangeHue: number
  rangeRadius: number
  rangeSpeed: number
  rangeTTL: number
  rangeY: number
  xOff: number
  yOff: number
  zOff: number
}

Check the source code to see the default values.

Credits

• Ambient Canvas Backgrounds by Mary Lou / Codrops

Animation License

This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.