diff --git a/src/App.module.scss b/src/App.module.scss
index dfee0c4..7597303 100644
--- a/src/App.module.scss
+++ b/src/App.module.scss
@@ -5,7 +5,6 @@ body, html {
font-family: 'Red Hat Display Variable', 'Open Sans', sans-serif;
}
.backdrop {
- background: #111;
width: 100%;
height: 100%;
position: fixed;
diff --git a/src/App.svelte b/src/App.svelte
index 925dbc0..c72b0d0 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -8,6 +8,7 @@
import { Router, Link, Route, navigate } from "svelte-routing";
import RouteStore from './store/RouteStore';
+ import Background from './widget/Background/Background.svelte';
export let url = "/load";
RouteStore.subscribe(() => {
@@ -20,6 +21,8 @@
+
+
diff --git a/src/widget/Background/Background.svelte b/src/widget/Background/Background.svelte
new file mode 100644
index 0000000..e7931d0
--- /dev/null
+++ b/src/widget/Background/Background.svelte
@@ -0,0 +1,6 @@
+
+
+
+
\ No newline at end of file
diff --git a/src/widget/Background/style.module.scss b/src/widget/Background/style.module.scss
new file mode 100644
index 0000000..1ef43a3
--- /dev/null
+++ b/src/widget/Background/style.module.scss
@@ -0,0 +1,52 @@
+@keyframes backdrop {
+ 0% { background: #0e0e0e }
+ 50% { background: #0e0606 }
+ to { background: #0e0e0e }
+}
+
+.backdrop_bg {
+ background: #0e0606;
+ width: 100%; height: 100%;
+ position: fixed;
+ border-radius: 16px;
+ animation: backdrop 15s ease infinite;
+}
+
+@keyframes breeze {
+ 0% {
+ opacity: 0.1;
+ filter: blur(64px);
+ transform: translate(-50%, -50%);
+ width: 90%; height: 80%;
+ }
+ 33% {
+ opacity: 0.5;
+ filter: blur(82px);
+ transform: translate(-50%, -40%);
+ width: 100%; height: 100%;
+ }
+ 67% {
+ opacity: 0.5;
+ filter: blur(72px);
+ transform: translate(-50%, -60%);
+ width: 100%; height: 100%;
+ }
+ to {
+ opacity: 0.1;
+ filter: blur(64px);
+ transform: translate(-50%, -50%);
+ width: 90%; height: 80%;
+ }
+}
+
+.mesh_bg {
+ background: linear-gradient(45deg, rgba(3, 32, 87, 0.25) 25%, rgba(165, 5, 138, 0.25) 75%);
+ width: 90%; height: 80%;
+ position: fixed;
+ top: 50%; left: 50%;
+ transform: translate(-50%, -50%);
+ border-radius: 800px 1200px;
+ filter: blur(64px);
+ opacity: 0.1;
+ animation: breeze 25s ease infinite;
+}
\ No newline at end of file