From e061377dfe73552515e4c571e33064e271f6099e Mon Sep 17 00:00:00 2001 From: ftk789 Date: Sat, 6 Aug 2022 14:10:36 +0300 Subject: [PATCH] Removed the old particles library and imported new scss particles, Much smoother and less CPU Usage. --- packages/fakeyou/src/App.tsx | 17 ++- packages/fakeyou/src/AppNew.scss | 1 + packages/fakeyou/src/Particles.tsx | 47 -------- packages/fakeyou/src/particles.json | 107 ------------------ packages/fakeyou/src/scss/CSSParticles.scss | 113 ++++++++++++++++++++ 5 files changed, 127 insertions(+), 158 deletions(-) delete mode 100644 packages/fakeyou/src/Particles.tsx delete mode 100644 packages/fakeyou/src/particles.json create mode 100644 packages/fakeyou/src/scss/CSSParticles.scss diff --git a/packages/fakeyou/src/App.tsx b/packages/fakeyou/src/App.tsx index f5c47acb60..fe632eb81a 100644 --- a/packages/fakeyou/src/App.tsx +++ b/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 { public render() { // Redesign features let mainClassNames = USE_REFRESH ? "bg-gradient" : ""; - let particlesBg = <>; if (USE_REFRESH) { - particlesBg = <> + } return ( +
- {particlesBg} +
+ +
+
+
+
+
+
+
+
+
{/* This is the old vocodes1.0-compatible username and version switch diff --git a/packages/fakeyou/src/AppNew.scss b/packages/fakeyou/src/AppNew.scss index 64f7262692..a907d50036 100644 --- a/packages/fakeyou/src/AppNew.scss +++ b/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; diff --git a/packages/fakeyou/src/Particles.tsx b/packages/fakeyou/src/Particles.tsx deleted file mode 100644 index 0104be557e..0000000000 --- a/packages/fakeyou/src/Particles.tsx +++ /dev/null @@ -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 ( -
- -
- ); -} - -export default ParticlesBG; diff --git a/packages/fakeyou/src/particles.json b/packages/fakeyou/src/particles.json deleted file mode 100644 index d0e9ba1f16..0000000000 --- a/packages/fakeyou/src/particles.json +++ /dev/null @@ -1,107 +0,0 @@ -{ - "particles": { - "number": { - "value": 70, - "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 -} diff --git a/packages/fakeyou/src/scss/CSSParticles.scss b/packages/fakeyou/src/scss/CSSParticles.scss new file mode 100644 index 0000000000..eaab4767c4 --- /dev/null +++ b/packages/fakeyou/src/scss/CSSParticles.scss @@ -0,0 +1,113 @@ +/* Config */ +$color-bg: #000000; +$color-particle: rgba(255, 255, 255, 0.03); +$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: 7px; + width: 7px; +} + +.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; +} +