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" 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 750df26f35..0000000000 --- a/packages/fakeyou/src/particles.json +++ /dev/null @@ -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 -} diff --git a/packages/fakeyou/src/scss/CSSParticles.scss b/packages/fakeyou/src/scss/CSSParticles.scss new file mode 100644 index 0000000000..b9a136d394 --- /dev/null +++ b/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; +}