From b58aea3d6f0a7d5f948fd450a575ed89c3a5736c Mon Sep 17 00:00:00 2001 From: ftk789 Date: Tue, 2 Aug 2022 13:44:43 +0300 Subject: [PATCH 1/8] FPS/amount changes on the particles --- packages/fakeyou/src/particles.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fakeyou/src/particles.json b/packages/fakeyou/src/particles.json index d0e9ba1f16..bb115e78b2 100644 --- a/packages/fakeyou/src/particles.json +++ b/packages/fakeyou/src/particles.json @@ -1,7 +1,7 @@ { "particles": { "number": { - "value": 70, + "value": 50, "density": { "enable": true, "value_area": 800 @@ -63,7 +63,7 @@ } }, "fullScreen": { "enable": false }, - "fpsLimit": 30, + "fpsLimit": 15, "interactivity": { "detect_on": "canvas", "events": { From 2c2a32c92583d1919086b581204e0396389c4898 Mon Sep 17 00:00:00 2001 From: ftk789 Date: Sat, 6 Aug 2022 14:10:36 +0300 Subject: [PATCH 2/8] 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 | 23 ---- packages/fakeyou/src/particles.json | 107 ------------------ packages/fakeyou/src/scss/CSSParticles.scss | 113 ++++++++++++++++++++ 5 files changed, 127 insertions(+), 134 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 6ab7009d7f..0000000000 --- a/packages/fakeyou/src/Particles.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React, { useCallback } 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() { - const particlesInit = useCallback(async (engine: Engine) => { - await loadFull(engine); - }, []); - - return ( -
- -
- ); -} - -export default ParticlesBG; diff --git a/packages/fakeyou/src/particles.json b/packages/fakeyou/src/particles.json deleted file mode 100644 index bb115e78b2..0000000000 --- a/packages/fakeyou/src/particles.json +++ /dev/null @@ -1,107 +0,0 @@ -{ - "particles": { - "number": { - "value": 50, - "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": 15, - "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; +} + From cf02080140d76e7c0c3840e04650c1583fcf06f0 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 7 Aug 2022 13:26:35 +0700 Subject: [PATCH 3/8] particles update --- packages/fakeyou/src/scss/CSSParticles.scss | 30 ++++++++++----------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/fakeyou/src/scss/CSSParticles.scss b/packages/fakeyou/src/scss/CSSParticles.scss index eaab4767c4..b9a136d394 100644 --- a/packages/fakeyou/src/scss/CSSParticles.scss +++ b/packages/fakeyou/src/scss/CSSParticles.scss @@ -1,6 +1,6 @@ /* Config */ $color-bg: #000000; -$color-particle: rgba(255, 255, 255, 0.03); +$color-particle: rgba(255, 255, 255, 0.05); $spacing: 2560px; $time-1: 120s; $time-2: 240s; @@ -11,7 +11,7 @@ $time-4: 420s; @function particles($max) { $val: 0px 0px $color-particle; @for $i from 1 through $max { - $val: #{$val}, random($spacing)+px random($spacing)+px $color-particle; + $val: #{$val}, random($spacing) + px random($spacing) + px $color-particle; } @return $val; } @@ -23,8 +23,8 @@ $time-4: 420s; /* Styles */ - -.page-bg, .animation-wrapper { +.page-bg, +.animation-wrapper { position: absolute; top: 0; left: 0; @@ -40,7 +40,8 @@ $time-4: 420s; z-index: -1; } -.particle, .particle:after { +.particle, +.particle:after { background: transparent; } @@ -54,13 +55,13 @@ $time-4: 420s; animation: animParticle $time-1 linear infinite; @include particles(500); height: 7px; - width:7px; + width: 7px; } .particle-1:after { @include particles(400); - height: 7px; - width: 7px; + height: 8px; + width: 8px; } .particle-2 { @@ -76,12 +77,12 @@ $time-4: 420s; width: 5px; } -.particle-3:after { - @include particles(800); - height: 10px; - width: 10px; - border-radius: 50%; -} +// .particle-3:after { +// @include particles(800); +// height: 10px; +// width: 10px; +// border-radius: 50%; +// } .particle-4 { animation: animParticle $time-4 linear infinite; @@ -110,4 +111,3 @@ $time-4: 420s; color: #fff; z-index: 2; } - From 4e44d48c074fccc58ab84fd4d51a9169f0350fe2 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 7 Aug 2022 13:28:13 +0700 Subject: [PATCH 4/8] removed particles from package json --- packages/fakeyou/package.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/fakeyou/package.json b/packages/fakeyou/package.json index 71d453758d..fd29ea52ab 100644 --- a/packages/fakeyou/package.json +++ b/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" From 852a8ef9e3f442a84f32f4b36932688e655aee1e Mon Sep 17 00:00:00 2001 From: ftk789 Date: Tue, 2 Aug 2022 13:44:43 +0300 Subject: [PATCH 5/8] FPS/amount changes on the particles --- packages/fakeyou/src/particles.json | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/fakeyou/src/particles.json b/packages/fakeyou/src/particles.json index 750df26f35..d0e9ba1f16 100644 --- a/packages/fakeyou/src/particles.json +++ b/packages/fakeyou/src/particles.json @@ -1,7 +1,7 @@ { "particles": { "number": { - "value": 0, + "value": 70, "density": { "enable": true, "value_area": 800 @@ -62,9 +62,7 @@ } } }, - "fullScreen": { - "enable": false - }, + "fullScreen": { "enable": false }, "fpsLimit": 30, "interactivity": { "detect_on": "canvas", From e061377dfe73552515e4c571e33064e271f6099e Mon Sep 17 00:00:00 2001 From: ftk789 Date: Sat, 6 Aug 2022 14:10:36 +0300 Subject: [PATCH 6/8] 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; +} + From eb862f94c2fea787988678be16f1cfb84be31fec Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 7 Aug 2022 13:26:35 +0700 Subject: [PATCH 7/8] particles update --- packages/fakeyou/src/scss/CSSParticles.scss | 30 ++++++++++----------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/fakeyou/src/scss/CSSParticles.scss b/packages/fakeyou/src/scss/CSSParticles.scss index eaab4767c4..b9a136d394 100644 --- a/packages/fakeyou/src/scss/CSSParticles.scss +++ b/packages/fakeyou/src/scss/CSSParticles.scss @@ -1,6 +1,6 @@ /* Config */ $color-bg: #000000; -$color-particle: rgba(255, 255, 255, 0.03); +$color-particle: rgba(255, 255, 255, 0.05); $spacing: 2560px; $time-1: 120s; $time-2: 240s; @@ -11,7 +11,7 @@ $time-4: 420s; @function particles($max) { $val: 0px 0px $color-particle; @for $i from 1 through $max { - $val: #{$val}, random($spacing)+px random($spacing)+px $color-particle; + $val: #{$val}, random($spacing) + px random($spacing) + px $color-particle; } @return $val; } @@ -23,8 +23,8 @@ $time-4: 420s; /* Styles */ - -.page-bg, .animation-wrapper { +.page-bg, +.animation-wrapper { position: absolute; top: 0; left: 0; @@ -40,7 +40,8 @@ $time-4: 420s; z-index: -1; } -.particle, .particle:after { +.particle, +.particle:after { background: transparent; } @@ -54,13 +55,13 @@ $time-4: 420s; animation: animParticle $time-1 linear infinite; @include particles(500); height: 7px; - width:7px; + width: 7px; } .particle-1:after { @include particles(400); - height: 7px; - width: 7px; + height: 8px; + width: 8px; } .particle-2 { @@ -76,12 +77,12 @@ $time-4: 420s; width: 5px; } -.particle-3:after { - @include particles(800); - height: 10px; - width: 10px; - border-radius: 50%; -} +// .particle-3:after { +// @include particles(800); +// height: 10px; +// width: 10px; +// border-radius: 50%; +// } .particle-4 { animation: animParticle $time-4 linear infinite; @@ -110,4 +111,3 @@ $time-4: 420s; color: #fff; z-index: 2; } - From ae6a98bfb8ec10e2a1793a8699a3fb1a78561548 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 7 Aug 2022 13:28:13 +0700 Subject: [PATCH 8/8] removed particles from package json --- packages/fakeyou/package.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/fakeyou/package.json b/packages/fakeyou/package.json index 71d453758d..fd29ea52ab 100644 --- a/packages/fakeyou/package.json +++ b/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"