added god-rays for fun :-)

src/components/main/GodRays/index.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react';
+
+interface IGodRaysProps {
+  raised?: boolean,
+}
+
+export class GodRays extends React.Component<IGodRaysProps> {
+  state = {
+    width: 0,
+    height: 0,
+    rays: [...new Array(6)].map(() => ({
+      angle: Math.random() * 1.4 - 0.7,
+      iterator: Math.random() > 0.5 ? 1 : -1,
+      speed: Math.random() * 0.0005 + 0.0005,
+      weight: Math.random() * 300,
+      opacity: Math.random(),
+      pulsar: Math.random() > 0.5 ? 1 : -1,
+    })),
+    particles: [],
+  };
+
+  init = () => {
+    window.requestAnimationFrame(() => this.draw());
+
+    this.inc = 1;
+  };
+
+  draw = () => {
+    if ((this.props.raised) || !this.canvas) {
+      return setTimeout(() => window.requestAnimationFrame(this.draw), 1000);
+    }
+
+    const { width, height, rays, particles } = this.state;
+
+    const ctx = this.canvas.getContext('2d');
+
+    ctx.globalCompositeOperation = "luminosity";
+    ctx.clearRect(0, 0, width, height + 100); // clear canvas
+    ctx.save();
+
+    rays.map(({ angle, iterator, weight, speed, pulsar, opacity }, index) => {
+      const gradient = ctx.createLinearGradient(0, 0, 0, height * 1.3);
+      gradient.addColorStop(0.2, `rgba(255, 255, 255, ${opacity * 0.1})`);
+      gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
+
+      const gradient2 = ctx.createLinearGradient(0, 0, 0, height * 1.3);
+      gradient2.addColorStop(0.2, `rgba(255, 255, 255, ${opacity * 0.2})`);
+      gradient2.addColorStop(1, "rgba(255, 255, 255, 0)");
+
+      ctx.save();
+      ctx.translate(width / 2, -600);
+      ctx.rotate(angle);
+      ctx.translate(-width / 2, 600);
+
+      ctx.beginPath();
+      ctx.fillStyle = gradient;
+      ctx.moveTo(((width / 2) - (weight / 2)), -600);
+      ctx.lineTo(((width / 2) + (weight / 2)), -600);
+      ctx.lineTo(((width / 2) + (weight / 2 + 300)), height * 1.4);
+      ctx.lineTo(((width / 2) - (weight / 2 + 300)), height * 1.4);
+      ctx.fill();
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.fillStyle = gradient2;
+      ctx.moveTo(((width / 2) - (weight / 6)), -600);
+      ctx.lineTo(((width / 2) + (weight / 6)), -600);
+      ctx.lineTo(((width / 2) + (weight / 6 + 50)), height * 1.4);
+      ctx.lineTo(((width / 2) - (weight / 6 + 250)), height * 1.4);
+      ctx.fill();
+      ctx.closePath();
+
+      rays[index].angle += iterator * speed;
+      rays[index].opacity += pulsar * 0.01;
+
+      if (rays[index].angle > 0.8) rays[index].iterator = -1;
+      if (rays[index].angle < -0.8) rays[index].iterator = 1;
+
+      if (rays[index].opacity >= 1) rays[index].pulsar = -1;
+      if (rays[index].opacity <= 0) rays[index].pulsar = 1;
+
+      ctx.restore();
+    });
+
+    setTimeout(() => window.requestAnimationFrame(this.draw), 1000 / 15);
+  };
+
+  generateParticles = ({ width, height }) => {
+    const particles = [...new Array(1)].map(() => ({
+      // left: Math.random() * width / 2 + width / 4,
+      left: Math.random() * width * 0.7 + 0.15,
+      top: Math.random() * (height + 400) - 400,
+      iterator: Math.random() * 10,
+      speed: Math.random() * 0.2 + 0.2,
+    }));
+
+    this.setState({ particles });
+  };
+
+  componentDidMount() {
+    const { innerWidth: width, innerHeight: height } = window;
+
+    this.setState({ width, height });
+    // this.generateParticles({ width, height });
+
+    this.init();
+  }
+
+  render(){
+    const { width, height } = this.state;
+
+    return (
+      <div style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        zIndex: -1,
+        opacity: 0.5,
+        pointerEvents: 'none',
+      }}>
+        <canvas
+          width={width}
+          height={height + 100}
+          style={{
+            filter: 'blur(20px)',
+            position: 'relative',
+            top: -100,
+          }}
+          ref={el => { this.canvas = el; }}
+        />
+      </div>
+    );
+  }
+
+  canvas: HTMLCanvasElement;
+  inc;
+};

src/containers/LoginLayout/index.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { LoginForm } from '$components/login/LoginForm';
 import { Header } from "$components/main/Header";
+import { GodRays } from "$components/main/GodRays";
 
 const style = require('./style.scss');
 
 export const LoginLayout: React.FunctionComponent<{}> = () => (
   <div className={style.wrapper}>
+    <GodRays />
     <div className={style.header}>
       <Header />
     </div>