react-lumos

Animated backgrounds with react

Install

npm install --save react-lumos

Usage

import React from 'react';
import Lumos from 'react-lumos';

// with defaults
function App() {
    return <Lumos />;
}

// customize
const options = {
  // delay between background transitions
  // set 0 for a fixed background (no transitions)
  "delay": 2000,
  // "plain" or "graidient" background color
  "mode": "gradient",
  "grid": {
    // number of grids in the element
    "size": 50,
    // should grids have uniform background
    // generates random color per vertical otherwise
    "uniform": true
  },
  "particles": {
    // number of particles
    "nop": 0,
    // particle style override
    "style": {}
  },
  // wrapper style override
  "style" : {}
}
<Lumos {...options}>

Demo

There's a working demo with a dynamic settings panel which generates options,

https://Kailash-Sankar.github.io/react-lumos

A very low quality gif preview:

License

MIT © Kailash-Sankar