Merge pull request #82 from storytold/ftk-ParticlesLag-Fixes

switched to using CSS particles

packages/fakeyou/package.json

@@ -38,9 +38,6 @@
     "react-reveal": "^1.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "5.0.0",
-    "react-tsparticles": "^2.1.3",
-    "tsparticles": "^2.1.3",
-    "tsparticles-engine": "^2.1.3",
     "typescript": "^3.7.5",
     "uuid": "^8.3.2",
     "wavesurfer.js": "^5.2.0"

packages/fakeyou/src/App.tsx

@@ -30,7 +30,6 @@ import { TtsCategoryType } from "./AppWrapper";
 import { FAKEYOU_MERGED_TRANSLATIONS } from "./_i18n/FakeYouTranslations";
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
-import ParticlesBG from "./Particles";
 import { USE_REFRESH } from "./Refresh";
 
 i18n
@@ -582,15 +581,25 @@ class App extends React.Component<Props, State> {
   public render() {
     // Redesign features
     let mainClassNames = USE_REFRESH ? "bg-gradient" : "";
-    let particlesBg = <></>;
     if (USE_REFRESH) {
-      particlesBg = <><ParticlesBG></ParticlesBG></>
+
     }
 
     return (
       <BrowserRouter>
+        
         <div id="main" className={mainClassNames}>
-          {particlesBg}
+        <div className="page-bg"></div>
+
+<div className="animation-wrapper">
+  <div className="particle particle-1"></div>
+  <div className="particle particle-2"></div>
+  <div className="particle particle-3"></div>
+  <div className="particle particle-4"></div>
+</div>
+<div className="page-wrapper"> 
+</div>
+
 
           <div id="viewable">
             {/* This is the old vocodes1.0-compatible username and version switch

packages/fakeyou/src/AppNew.scss

@@ -2,6 +2,7 @@
 // @import-normalize; /* bring in normalize.css styles */
 @import "./scss/colours.scss";
 @import "./scss/site-refresh.scss";
+@import "./scss/CSSParticles.scss";
 
 $page-width: 700px;
 

packages/fakeyou/src/Particles.tsx

@@ -1,47 +0,0 @@
-import React, { useCallback, useState } from "react";
-import Particles from "react-tsparticles";
-import type { Engine } from "tsparticles-engine";
-import { loadFull } from "tsparticles";
-import particlesOptions from "./particles.json";
-import { ISourceOptions } from "tsparticles-engine";
-
-function ParticlesBG() {
-  let [particleCount, setParticleCount] = useState(0);
-
-  const checkDownloadSpeed = useCallback(() => {
-    const startTime = (new Date()).getTime();
-    let endTime: any;
-
-    window.onload = function () {
-      endTime = (new Date()).getTime()
-
-      if ((endTime - startTime) < 750) {
-        setParticleCount(70);
-      }
-    }
-
-    window.onerror = function (err, msg) {
-      console.log('error checking speed')
-    }
-  }, [setParticleCount]);
-
-  const particlesInit = useCallback(async (engine: Engine) => {
-    await loadFull(engine);
-    checkDownloadSpeed();
-  }, [checkDownloadSpeed]);
-
-  // NB(echelon): Stupid hack to deep copy object
-  const optionsCopy = JSON.parse(JSON.stringify(particlesOptions));
-  optionsCopy.particles.number.value = particleCount;
-
-  return (
-    <div id="particles-container">
-      <Particles
-        options={optionsCopy as ISourceOptions}
-        init={particlesInit}
-      />
-    </div>
-  );
-}
-
-export default ParticlesBG;

packages/fakeyou/src/particles.json

@@ -1,109 +0,0 @@
-{
-  "particles": {
-    "number": {
-      "value": 0,
-      "density": {
-        "enable": true,
-        "value_area": 800
-      }
-    },
-    "color": {
-      "value": "#ffffff"
-    },
-    "shape": {
-      "type": "circle",
-      "stroke": {
-        "width": 0,
-        "color": "#000000"
-      },
-      "polygon": {
-        "nb_sides": 5
-      }
-    },
-    "opacity": {
-      "value": 0.06,
-      "random": false,
-      "anim": {
-        "enable": false,
-        "speed": 1,
-        "opacity_min": 0,
-        "sync": false
-      }
-    },
-    "size": {
-      "value": 4,
-      "random": true,
-      "anim": {
-        "enable": false,
-        "speed": 4,
-        "size_min": 0.3,
-        "sync": false
-      }
-    },
-    "line_linked": {
-      "enable": false,
-      "distance": 150,
-      "color": "#ffffff",
-      "opacity": 0.4,
-      "width": 1
-    },
-    "move": {
-      "enable": true,
-      "speed": 2.5,
-      "direction": "top",
-      "random": true,
-      "straight": false,
-      "out_mode": "out",
-      "bounce": false,
-      "attract": {
-        "enable": false,
-        "rotateX": 600,
-        "rotateY": 600
-      }
-    }
-  },
-  "fullScreen": {
-    "enable": false
-  },
-  "fpsLimit": 30,
-  "interactivity": {
-    "detect_on": "canvas",
-    "events": {
-      "onhover": {
-        "enable": false,
-        "mode": "bubble"
-      },
-      "onclick": {
-        "enable": false,
-        "mode": "repulse"
-      },
-      "resize": true
-    },
-    "modes": {
-      "grab": {
-        "distance": 400,
-        "line_linked": {
-          "opacity": 1
-        }
-      },
-      "bubble": {
-        "distance": 250,
-        "size": 0,
-        "duration": 2,
-        "opacity": 0,
-        "speed": 3
-      },
-      "repulse": {
-        "distance": 400,
-        "duration": 0.4
-      },
-      "push": {
-        "particles_nb": 4
-      },
-      "remove": {
-        "particles_nb": 2
-      }
-    }
-  },
-  "retina_detect": true
-}

packages/fakeyou/src/scss/CSSParticles.scss

@@ -0,0 +1,113 @@
+/* Config */
+$color-bg: #000000;
+$color-particle: rgba(255, 255, 255, 0.05);
+$spacing: 2560px;
+$time-1: 120s;
+$time-2: 240s;
+$time-3: 360s;
+$time-4: 420s;
+
+/* mixins */
+@function particles($max) {
+  $val: 0px 0px $color-particle;
+  @for $i from 1 through $max {
+    $val: #{$val}, random($spacing) + px random($spacing) + px $color-particle;
+  }
+  @return $val;
+}
+
+@mixin particles($max) {
+  box-shadow: particles($max);
+  border-radius: 50%;
+}
+
+/* Styles */
+
+.page-bg,
+.animation-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.page-bg {
+  background: $color-bg;
+  background-blend-mode: screen;
+  background-size: cover;
+  filter: grayscale(100%);
+  z-index: -1;
+}
+
+.particle,
+.particle:after {
+  background: transparent;
+}
+
+.particle:after {
+  position: absolute;
+  content: "";
+  top: $spacing;
+}
+
+.particle-1 {
+  animation: animParticle $time-1 linear infinite;
+  @include particles(500);
+  height: 7px;
+  width: 7px;
+}
+
+.particle-1:after {
+  @include particles(400);
+  height: 8px;
+  width: 8px;
+}
+
+.particle-2 {
+  animation: animParticle $time-2 linear infinite;
+  @include particles(300);
+  height: 5px;
+  width: 5px;
+}
+
+.particle-2:after {
+  @include particles(500);
+  height: 5px;
+  width: 5px;
+}
+
+// .particle-3:after {
+//   @include particles(800);
+//   height: 10px;
+//   width: 10px;
+//   border-radius: 50%;
+// }
+
+.particle-4 {
+  animation: animParticle $time-4 linear infinite;
+  @include particles(100);
+  height: 1px;
+  width: 1px;
+}
+
+.particle-4:after {
+  @include particles(500);
+  height: 1px;
+  width: 1px;
+}
+
+@keyframes animParticle {
+  from {
+    transform: translateY(0px);
+  }
+  to {
+    transform: translateY($spacing * -1);
+  }
+}
+
+.page-wrapper {
+  text-align: center;
+  color: #fff;
+  z-index: 2;
+}