front: awesome background

11 files changed, 455 insertions, 27 deletions

diff --git a/front/package.json b/front/package.json
index 4ca6ac3..faf0646 100644
--- a/front/package.json
+++ b/front/package.json
@@ -12,6 +12,8 @@
     "deploy": "gh-pages -d dist"
   },
   "dependencies": {
+    "gl-react": "^5.2.0",
+    "gl-react-dom": "^5.2.1",
     "history": "^5.3.0",
     "preact": "^10.17.0",
     "preact-router": "^4.1.2",
@@ -20,6 +22,8 @@
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.5.0",
+    "@types/gl-react": "^3.15.5",
+    "@types/gl-react-dom": "^3.15.5",
     "@types/react-slick": "^0.23.10",
     "gh-pages": "^6.0.0",
     "typescript": "^5.1.6",
diff --git a/front/pnpm-lock.yaml b/front/pnpm-lock.yaml
index fb16f09..7b313de 100644
--- a/front/pnpm-lock.yaml
+++ b/front/pnpm-lock.yaml
@@ -2,8 +2,12 @@ lockfileVersion: 5.4
 
 specifiers:
   '@preact/preset-vite': ^2.5.0
+  '@types/gl-react': ^3.15.5
+  '@types/gl-react-dom': ^3.15.5
   '@types/react-slick': ^0.23.10
   gh-pages: ^6.0.0
+  gl-react: ^5.2.0
+  gl-react-dom: ^5.2.1
   history: ^5.3.0
   preact: ^10.17.0
   preact-router: ^4.1.2
@@ -13,6 +17,8 @@ specifiers:
   vite: ^4.4.9
 
 dependencies:
+  gl-react: 5.2.0
+  gl-react-dom: 5.2.1_gl-react@5.2.0
   history: 5.3.0
   preact: 10.17.0
   preact-router: 4.1.2_preact@10.17.0
@@ -21,6 +27,8 @@ dependencies:
 
 devDependencies:
   '@preact/preset-vite': 2.5.0_preact@10.17.0+vite@4.4.9
+  '@types/gl-react': 3.15.5
+  '@types/gl-react-dom': 3.15.5
   '@types/react-slick': 0.23.10
   gh-pages: 6.0.0
   typescript: 5.1.6
@@ -566,6 +574,20 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /@types/gl-react-dom/3.15.5:
+    resolution: {integrity: sha512-H3GoEkyHRy0ALg1EwFhS/40rD2ofamuDBlKsx/DylnH86vGDuYQRJ7OYISXvoczQINdKpkRdoFE2cB6xp7A6Sw==}
+    dependencies:
+      '@types/gl-react': 3.15.5
+      '@types/react': 18.2.20
+    dev: true
+
+  /@types/gl-react/3.15.5:
+    resolution: {integrity: sha512-QYgfNKVORF7ggEMXPYz8VPQJiUIq6pLI82Rwtk1dIWrRARzVYZibupWlt9MhUNbBUL0bPQ+xPV1/dQMk5WC6Lg==}
+    dependencies:
+      '@types/react': 18.2.20
+      csstype: 3.1.2
+    dev: true
+
   /@types/prop-types/15.7.5:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
     dev: true
@@ -588,6 +610,12 @@ packages:
     resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
     dev: true
 
+  /add-line-numbers/1.0.1:
+    resolution: {integrity: sha512-w+2a1malCvWwACQFBpZ5/uwmHGaGYT+aGIxA8ONF5vlhe6X/gD3eR8qVoLWa+5nnWAOq2LuPbrqDYqj1pn0WMg==}
+    dependencies:
+      pad-left: 1.0.2
+    dev: false
+
   /ansi-styles/3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
     engines: {node: '>=4'}
@@ -611,6 +639,10 @@ packages:
     resolution: {integrity: sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==}
     dev: true
 
+  /atob-lite/1.0.0:
+    resolution: {integrity: sha512-ArXcmHR/vwSN37HLVap/Y5SKpz12CuEybxe1sIYl7th/S6SQPrVMNFt6rblJzCOAxn0SHbXpknUtqbAIeo3Aow==}
+    dev: false
+
   /babel-plugin-transform-hook-names/1.0.2:
     resolution: {integrity: sha512-5gafyjyyBTTdX/tQQ0hRgu4AhNHG/hqWi0ZZmg2xvs2FgRkJXzDNKBZCyoYqgFkovfDrgM8OoKg8karoUvWeCw==}
     peerDependencies:
@@ -621,6 +653,10 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
 
+  /bit-twiddle/1.0.2:
+    resolution: {integrity: sha512-B9UhK0DKFZhoTFcfvAzhqsjStvGJp9vYWf3+6SNTtdSQnvIgfkHbgHrg/e4+TH71N2GDu8tpmCVoyfrL1d7ntA==}
+    dev: false
+
   /brace-expansion/1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
     dependencies:
@@ -683,10 +719,20 @@ packages:
     resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
     dev: true
 
+  /core-util-is/1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+    dev: false
+
   /csstype/3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
     dev: true
 
+  /cwise-compiler/1.1.3:
+    resolution: {integrity: sha512-WXlK/m+Di8DMMcCjcWr4i+XzcQra9eCdXIJrgh4TUgh0pIS/yJduLxS9JgefsHJ/YVLdgPtXm9r62W92MvanEQ==}
+    dependencies:
+      uniq: 1.0.1
+    dev: false
+
   /debug/4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -699,6 +745,10 @@ packages:
       ms: 2.1.2
     dev: true
 
+  /dup/1.0.0:
+    resolution: {integrity: sha512-Bz5jxMMC0wgp23Zm15ip1x8IhYRqJvF3nFC0UInJUDkN1z4uNPk9jTnfCUJXbOGiQ1JbXLQsiV41Fb+HXcj5BA==}
+    dev: false
+
   /electron-to-chromium/1.4.492:
     resolution: {integrity: sha512-36K9b/6skMVwAIEsC7GiQ8I8N3soCALVSHqWHzNDtGemAcI9Xu8hP02cywWM0A794rTHm0b0zHPeLJHtgFVamQ==}
     dev: true
@@ -830,6 +880,53 @@ packages:
       globby: 6.1.0
     dev: true
 
+  /gl-constants/1.0.0:
+    resolution: {integrity: sha512-3DNyoAUdb1c+o7jNk5Nm7eh6RSQFi9ZmMQIQb2xxsO27rUopE+IUhoh4xlUvZYBn1YPgUC8BlCnrVjXq/d2dQA==}
+    dev: false
+
+  /gl-format-compiler-error/1.0.3:
+    resolution: {integrity: sha512-FtQaBYlsM/rnz7YhLkxG9dLcNDB+ExErIsFV2DXl0nk+YgIZ2i0jMob4BrhT9dNa179zFb0gZMWpNAokytK+Ug==}
+    dependencies:
+      add-line-numbers: 1.0.1
+      gl-constants: 1.0.0
+      glsl-shader-name: 1.0.0
+      sprintf-js: 1.1.3
+    dev: false
+
+  /gl-react-dom/5.2.1_gl-react@5.2.0:
+    resolution: {integrity: sha512-RZxOovktk8czle/FiMbiEJJxHLICoHEzxU46GeQ9tqiWMYxj/wj01VbqGVlrn6wVZ+fx77bhRxzn5ptW2uuxbA==}
+    peerDependencies:
+      gl-react: '*'
+      react: '*'
+    dependencies:
+      gl-react: 5.2.0
+      invariant: 2.2.4
+      prop-types: 15.8.1
+      raf: 3.4.1
+      webgltexture-loader-dom: 1.0.0
+    dev: false
+
+  /gl-react/5.2.0:
+    resolution: {integrity: sha512-A/FxG65e8Zx2RYi9+kYpeAwfFb7qQN0T6BCRXcUiwevUC//i3cH53w0AQRGj1mm96NVvD412mYJatl52qlDuxw==}
+    peerDependencies:
+      react: '*'
+    dependencies:
+      gl-shader: 4.3.1
+      invariant: 2.2.4
+      ndarray: 1.0.19
+      prop-types: 15.8.1
+      typedarray-pool: 1.2.0
+      webgltexture-loader: 1.0.0
+      webgltexture-loader-ndarray: 1.2.0
+    dev: false
+
+  /gl-shader/4.3.1:
+    resolution: {integrity: sha512-xLoN6XtRLlg97SEqtuzfKc+pVWpVkQ3YjDI1kuCale8tF7+zMhiKlMfmG4IMQPMdKJZQbIc/Ny8ZusEpfh5U+w==}
+    dependencies:
+      gl-format-compiler-error: 1.0.3
+      weakmap-shim: 1.1.1
+    dev: false
+
   /glob/7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     dependencies:
@@ -857,6 +954,19 @@ packages:
       pinkie-promise: 2.0.1
     dev: true
 
+  /glsl-shader-name/1.0.0:
+    resolution: {integrity: sha512-OtHon0dPCbJD+IrVA1vw9QDlp2cS/f9z8X/0y+W7Qy1oZ3U1iFAQUEco2v30V0SAlVLDG5rEfhjEfc3DKdGbFQ==}
+    dependencies:
+      atob-lite: 1.0.0
+      glsl-tokenizer: 2.1.5
+    dev: false
+
+  /glsl-tokenizer/2.1.5:
+    resolution: {integrity: sha512-XSZEJ/i4dmz3Pmbnpsy3cKh7cotvFlBiZnDOwnj/05EwNp2XrhQ4XKJxT7/pDt4kp4YcpRSKz8eTV7S+mwV6MA==}
+    dependencies:
+      through2: 0.6.5
+    dev: false
+
   /graceful-fs/4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
     dev: true
@@ -888,7 +998,20 @@ packages:
 
   /inherits/2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-    dev: true
+
+  /invariant/2.2.4:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
+  /iota-array/1.0.0:
+    resolution: {integrity: sha512-pZ2xT+LOHckCatGQ3DcG/a+QuEqvoxqkiL7tvE8nn3uuu+f6i1TtpB5/FtWFbxUuVr5PZCx8KskuGatbJDXOWA==}
+    dev: false
+
+  /is-buffer/1.1.6:
+    resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
+    dev: false
 
   /is-core-module/2.13.0:
     resolution: {integrity: sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==}
@@ -896,9 +1019,12 @@ packages:
       has: 1.0.3
     dev: true
 
+  /isarray/0.0.1:
+    resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
+    dev: false
+
   /js-tokens/4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-    dev: true
 
   /jsesc/2.5.2:
     resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
@@ -941,6 +1067,13 @@ packages:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
     dev: false
 
+  /loose-envify/1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+    dependencies:
+      js-tokens: 4.0.0
+    dev: false
+
   /lru-cache/5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
     dependencies:
@@ -970,6 +1103,19 @@ packages:
     hasBin: true
     dev: true
 
+  /ndarray-ops/1.2.2:
+    resolution: {integrity: sha512-BppWAFRjMYF7N/r6Ie51q6D4fs0iiGmeXIACKY66fLpnwIui3Wc3CXiD/30mgLbDjPpSLrsqcp3Z62+IcHZsDw==}
+    dependencies:
+      cwise-compiler: 1.1.3
+    dev: false
+
+  /ndarray/1.0.19:
+    resolution: {integrity: sha512-B4JHA4vdyZU30ELBw3g7/p9bZupyew5a7tX1Y/gGeF2hafrPaQZhgrGQfsvgfYbgdFZjYwuEcnaobeM/WMW+HQ==}
+    dependencies:
+      iota-array: 1.0.0
+      is-buffer: 1.1.6
+    dev: false
+
   /node-releases/2.0.13:
     resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
     dev: true
@@ -977,7 +1123,6 @@ packages:
   /object-assign/4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /once/1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
@@ -1004,6 +1149,13 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /pad-left/1.0.2:
+    resolution: {integrity: sha512-saxSV1EYAytuZDtQYEwi0DPzooG6aN18xyHrnJtzwjVwmMauzkEecd7hynVJGolNGk1Pl9tltmZqfze4TZTCxg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      repeat-string: 1.6.1
+    dev: false
+
   /path-exists/4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -1018,6 +1170,10 @@ packages:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
     dev: true
 
+  /performance-now/2.1.0:
+    resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==}
+    dev: false
+
   /picocolors/1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
     dev: true
@@ -1071,6 +1227,24 @@ packages:
   /preact/10.17.0:
     resolution: {integrity: sha512-SNsI8cbaCcUS5tbv9nlXuCfIXnJ9ysBMWk0WnB6UWwcVA3qZ2O6FxqDFECMAMttvLQcW/HaNZUe2BLidyvrVYw==}
 
+  /prop-types/15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+    dev: false
+
+  /raf/3.4.1:
+    resolution: {integrity: sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==}
+    dependencies:
+      performance-now: 2.1.0
+    dev: false
+
+  /react-is/16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+    dev: false
+
   /react-slick/0.29.0:
     resolution: {integrity: sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==}
     peerDependencies:
@@ -1084,10 +1258,24 @@ packages:
       resize-observer-polyfill: 1.5.1
     dev: false
 
+  /readable-stream/1.0.34:
+    resolution: {integrity: sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==}
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 0.0.1
+      string_decoder: 0.10.31
+    dev: false
+
   /regenerator-runtime/0.14.0:
     resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
     dev: false
 
+  /repeat-string/1.6.1:
+    resolution: {integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==}
+    engines: {node: '>=0.10'}
+    dev: false
+
   /resize-observer-polyfill/1.5.1:
     resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
     dev: false
@@ -1125,10 +1313,18 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /sprintf-js/1.1.3:
+    resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==}
+    dev: false
+
   /string-convert/0.2.1:
     resolution: {integrity: sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==}
     dev: false
 
+  /string_decoder/0.10.31:
+    resolution: {integrity: sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==}
+    dev: false
+
   /strip-outer/1.0.1:
     resolution: {integrity: sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==}
     engines: {node: '>=0.10.0'}
@@ -1148,6 +1344,13 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /through2/0.6.5:
+    resolution: {integrity: sha512-RkK/CCESdTKQZHdmKICijdKKsCRVHs5KsLZ6pACAmF/1GPUQhonHSXWNERctxEp7RmvjdNbZTL5z9V7nSCXKcg==}
+    dependencies:
+      readable-stream: 1.0.34
+      xtend: 4.0.2
+    dev: false
+
   /to-fast-properties/2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
@@ -1160,12 +1363,23 @@ packages:
       escape-string-regexp: 1.0.5
     dev: true
 
+  /typedarray-pool/1.2.0:
+    resolution: {integrity: sha512-YTSQbzX43yvtpfRtIDAYygoYtgT+Rpjuxy9iOpczrjpXLgGoyG7aS5USJXV2d3nn8uHTeb9rXDvzS27zUg5KYQ==}
+    dependencies:
+      bit-twiddle: 1.0.2
+      dup: 1.0.0
+    dev: false
+
   /typescript/5.1.6:
     resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}
     engines: {node: '>=14.17'}
     hasBin: true
     dev: true
 
+  /uniq/1.0.1:
+    resolution: {integrity: sha512-Gw+zz50YNKPDKXs+9d+aKAjVwpjNwqzvNpLigIruT4HA9lMZNdMqs9x07kKHB/L9WRzqp4+DlTU5s4wG2esdoA==}
+    dev: false
+
   /universalify/2.0.0:
     resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
     engines: {node: '>= 10.0.0'}
@@ -1217,10 +1431,58 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /weakmap-shim/1.1.1:
+    resolution: {integrity: sha512-/wNyG+1FpiHhnfQo+TuA/XAUpvOOkKVl0A4qpT+oGcj5SlZCLmM+M1Py/3Sj8sy+YrEauCVITOxCsZKo6sPbQg==}
+    dev: false
+
+  /webgltexture-loader-dom-canvas/1.0.0:
+    resolution: {integrity: sha512-lRDoPVE4GXFyfsl/E5+sZd7m6304RmBRky0SmgHlqJZJySFrCbQMF/hMQkWNWM5iYks84kRUGlwugW/c6OgpDw==}
+    dependencies:
+      webgltexture-loader: 1.0.0
+    dev: false
+
+  /webgltexture-loader-dom-image-url/1.0.0:
+    resolution: {integrity: sha512-KiQ16cLBTjoCQfdvfy1SQP3wMWEPW9ADqsODyhd+6nMg7qD6FmewF3OZs6chF4yfDtlVVXRYI/cDGF1K9MK5Mg==}
+    dependencies:
+      webgltexture-loader: 1.0.0
+    dev: false
+
+  /webgltexture-loader-dom-video/1.0.0:
+    resolution: {integrity: sha512-o3zB2XQEMAqgHQeNavoy4q5/lwIIt1MjF6Qj+pUDju9VlovJXGJiCIZ/suv715YgS3k36/pg97847GhV3bHczQ==}
+    dependencies:
+      webgltexture-loader: 1.0.0
+    dev: false
+
+  /webgltexture-loader-dom/1.0.0:
+    resolution: {integrity: sha512-JavQ9Hvv3DIYx6WuqzVa76bn2YCcq1lazUdzf277VZWrmxVCln5QFjyTfWZozgYtT21lVeu6MdMOUIbY4xhjqA==}
+    dependencies:
+      webgltexture-loader-dom-canvas: 1.0.0
+      webgltexture-loader-dom-image-url: 1.0.0
+      webgltexture-loader-dom-video: 1.0.0
+    dev: false
+
+  /webgltexture-loader-ndarray/1.2.0:
+    resolution: {integrity: sha512-gWTIqCOYs1XK6Yp4G7XvFDhvCvr6wFjTLPRN/HGBouF4u0to2fAIh5+2cxzEs1WE7eSwsxg1y5aNi1jRXSX+zA==}
+    dependencies:
+      ndarray: 1.0.19
+      ndarray-ops: 1.2.2
+      typedarray-pool: 1.2.0
+      webgltexture-loader: 1.0.0
+    dev: false
+
+  /webgltexture-loader/1.0.0:
+    resolution: {integrity: sha512-TbQUdr0Bc3tcJ4pKIFoM9dKyLdYNf9Uxq05oZuIT+2e/vCcfaQS+WjNmW1FwYqaBrzcLr9CA/HBAmvyaS/REGw==}
+    dev: false
+
   /wrappy/1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true
 
+  /xtend/4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+    dev: false
+
   /yallist/3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
     dev: true
diff --git a/front/public/assets/images/symbols.png b/front/public/assets/images/symbols.png
new file mode 100644
index 0000000..3d0e9aa
--- /dev/null
+++ b/front/public/assets/images/symbols.png
diff --git a/front/src/app.css b/front/src/app.css
index b4086a2..b16cfea 100644
--- a/front/src/app.css
+++ b/front/src/app.css
@@ -24,6 +24,25 @@
   filter: drop-shadow(0 0 2em #673ab8aa);
 }
 
+/* fade in */
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(1em);
+  }
+  60% {
+    transform: translateY(-0.2em);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.main-info > * {
+  animation: fade-in 0.2s ease-in;
+}
+
 .main-info {
   text-align: center;
 }
@@ -64,7 +83,21 @@
     color: #e5c07b;
 }
 
+.back-shadows {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, var(--color-bg) 10%, var(--color-bg) 90%, rgba(0, 0, 0, 0) 100%);
+}
+
 @media (max-width: 480px) {
+  .back-shadows {
+      margin: auto;
+      max-width: 80%;
+  }
   .main-info-title {
     font-size: 32pt;
   }
@@ -75,6 +108,10 @@
 }
 
 @media (max-width: 1150px) and (min-width: 480px) {
+  .back-shadows {
+      margin: auto;
+      max-width: 60%;
+  }
   .main-info-title {
     font-size: 42pt;
   }
@@ -85,6 +122,10 @@
 }
 
 @media (min-width: 1150px) {
+  .back-shadows {
+      margin: auto;
+      max-width: 40%;
+  }
   .main-info-title {
     font-size: 42pt;
   }
diff --git a/front/src/app.tsx b/front/src/app.tsx
index 5ba8e6f..ba081c9 100644
--- a/front/src/app.tsx
+++ b/front/src/app.tsx
@@ -6,6 +6,7 @@ import Home from './pages/home'
 import { Router, Route, CustomHistory } from 'preact-router';
 import Projects from './pages/projects';
 import { HashHistory, createHashHistory } from 'history';
+import { AnimatedBg } from './components/animated_bg';
 
 const hashHistoryAdapter = (hashHistory: HashHistory): CustomHistory => {
     return {
@@ -21,6 +22,7 @@ export function App() {
     return (
         <>
             <Navbar />
+            <div class="back-shadows"></div>
             <div id="app-main">
                 <Router history={history}>
                     <Route path="/" component={Home} />
@@ -28,6 +30,7 @@ export function App() {
                     <Route path="/games" component={Games} />
                     <Route path="/projects" component={Projects} />
                 </Router>
+                <AnimatedBg />
             </div>
         </>
     )
diff --git a/front/src/components/animated_bg.tsx b/front/src/components/animated_bg.tsx
new file mode 100644
index 0000000..6a8ab3a
--- /dev/null
+++ b/front/src/components/animated_bg.tsx
@@ -0,0 +1,114 @@
+import { Shaders, Node, GLSL } from "gl-react";
+import { Surface } from "gl-react-dom";
+import React from "preact/compat";
+import { PropsWithChildren } from "preact/compat";
+
+const shaders = Shaders.create({
+    letters: {
+        frag: GLSL`
+precision highp float;
+varying vec2 uv;
+uniform vec3 color;
+uniform sampler2D t;
+uniform float time;
+uniform vec2 tiles;
+uniform float symbol_count;
+
+vec2 map_to_symbol_uv(vec2 image_coord, float symbol_index) {
+    float symbol_width = 1.0 / symbol_count;
+    float symbol_height = 1.0;
+    float symbol_x = symbol_index * symbol_width;
+    return vec2(symbol_x + image_coord.x * symbol_width, image_coord.y * symbol_height);
+}
+
+vec2 tile_index(vec2 p, vec2 tiles) {
+    return vec2(floor(p.x * tiles.x), floor(p.y * tiles.y));
+}
+
+vec2 tilefy (vec2 p, vec2 tiles) {
+    return vec2(fract(p.x * tiles.x), fract(p.y * tiles.y));
+}
+
+float randf(float n) {
+    return fract(sin(n) * 43758.5453123);
+}
+
+void main() {
+    vec2 tile = tile_index(uv, tiles);
+    float tilerand = randf(tile.x + tile.y * tiles.x);
+    float v = tilerand + randf(floor(tilerand * time));
+    float diff = fract(tilerand * time);
+    float s = floor(v * 9.0);
+    vec2 tp = tilefy(uv, tiles);
+    vec2 tp_center = vec2(0.5, 0.5);
+    float d = distance(tp, tp_center);
+    float scale = min(sin(diff * 3.1415) * 1.2, 1.0);
+    tp = tp_center + (tp - tp_center) / scale;
+    if (tp.x < 0.0 || tp.x > 1.0 || tp.y < 0.0 || tp.y > 1.0) {
+        gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+        return;
+    }
+    vec2 p = map_to_symbol_uv(tp, mod(s, symbol_count));
+    vec4 c = texture2D(t, p);
+    c.rgb *= color;
+    c.a *= uv.y * 4.0;
+    gl_FragColor = vec4(c.rgb * c.a, c.a);
+}
+`
+    }
+});
+
+const fps = 60;
+
+const AnimatedBgInternal = ({ tick }: { tick: number }) => {
+    const t = "/assets/images/symbols.png";
+
+    return (
+        <div style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", zIndex: -10 }}>
+            <Surface width={window.innerWidth} height={window.innerHeight / 2}>
+                <Node
+                    shader={shaders.letters}
+                    uniforms={{
+                        t,
+                        color: [42 / 255, 42 / 255, 80 / 255],
+                        tiles: [Math.ceil(window.innerWidth / 32), Math.ceil(window.innerHeight / 64)],
+                        symbol_count: 9,
+                        time: tick / 60
+                    }}
+                    uniformsOptions={{
+                        t: { interpolation: "nearest" }
+                    }} />
+            </Surface>
+        </div>
+    );
+}
+
+// a higher order component that provides a tick prop
+// that updates every 1/refreshRate seconds
+//
+// accepts a JSX component as an argument
+const timeLoop = (
+    C: (props: PropsWithChildren<{ tick: number }>) => React.JSX.Element,
+    { refreshRate }: { refreshRate: number }
+) => {
+    return class TimeLoop extends React.Component {
+        interval: any;
+        state = { tick: 0 };
+
+        componentDidMount() {
+            this.interval = setInterval(() => {
+                this.setState({ tick: this.state.tick + 1 });
+            }, 1000 / refreshRate);
+        }
+
+        componentWillUnmount() {
+            clearInterval(this.interval);
+        }
+
+        render() {
+            return <C {...this.props} tick={this.state.tick} />;
+        }
+    };
+}
+
+export const AnimatedBg = timeLoop(AnimatedBgInternal, { refreshRate: fps });
diff --git a/front/src/components/navbar.css b/front/src/components/navbar.css
index 466fdd6..9120052 100644
--- a/front/src/components/navbar.css
+++ b/front/src/components/navbar.css
@@ -1,7 +1,7 @@
 /* on big screens, navbar is fixed to the top of the screen */
 .navbar-container {
   position: fixed;
-  background-color: var(--color-bg);
+  /* gradient from top to bottom, full to transparent */
   top: 0;
   width: 100%;
   z-index: 9999;
@@ -16,11 +16,12 @@
 }
 
 .navbar {
-  margin-top: 20pt;
-  margin-bottom: 12pt;
+  padding-top: 20pt;
+  padding-bottom: 12pt;
   align-items: center;
   justify-content: center;
   align-self: center;
+  background: linear-gradient(to bottom, var(--color-bg) 0%, var(--color-bg) 75%, rgba(0, 0, 0, 0) 100%);
 }
 
 .navbar-icon {
diff --git a/front/src/pages/games.tsx b/front/src/pages/games.tsx
index 2ff4eff..6d0d2bd 100644
--- a/front/src/pages/games.tsx
+++ b/front/src/pages/games.tsx
@@ -11,7 +11,7 @@ export default function Games() {
                     Game Projects
                 </div>
                 <div class="main-info-subtitle">
-                    my game projects, mostly from game jams
+                    games I've worked on
                 </div>
                 <div class="projects-container">
                     {
diff --git a/front/src/pages/home.tsx b/front/src/pages/home.tsx
index 9b29803..df76b84 100644
--- a/front/src/pages/home.tsx
+++ b/front/src/pages/home.tsx
@@ -9,20 +9,20 @@ export default function Home() {
           aka Duckonaut, EchoDuck
         </div>
         <img src="assets/images/duckpfp.png" class="main-info-image logo grow" />
-      </div>
 
-      <div class="about-paragraph">
-        <p>
-          Hello! I'm a programmer, game designer, and artist. I'm currently a student at the Warsaw University of
-          Technology, studying Computer Science. A list of the games I've worked on is in the <a class="games-link"
-            href="#/games">games</a> section. Other projects I've been a part of are available in the <a class="projects-link"
-              href="#/projects">projects</a> section.
-          I also enjoy some lower-level programming and learning about the inner workings of various systems. The main
-          technologies I use are <span class="highlight">C#</span>, <span class="highlight">Unity</span>
-          , <span class="highlight">Python</span>, <span class="highlight">Rust</span> and <span class="highlight">C</span>,
-          although I'm also familiar with <span class="highlight">Godot</span>, <span class="highlight">C++</span>
-          , <span class="highlight">Java</span> and some <span class="highlight">JavaScript</span> and <span class="highlight">TypeScript</span>.
-        </p>
+        <div class="about-paragraph">
+          <p>
+            Hello! I'm a programmer, game designer, and artist. I'm currently a student at the Warsaw University of
+            Technology, studying Computer Science. A list of the games I've worked on is in the <a class="games-link"
+              href="#/games">games</a> section. Other projects I've been a part of are available in the <a class="projects-link"
+                href="#/projects">projects</a> section.
+            I also enjoy some lower-level programming and learning about the inner workings of various systems. The main
+            technologies I use are <span class="highlight">C#</span>, <span class="highlight">Unity</span>
+            , <span class="highlight">Python</span>, <span class="highlight">Rust</span> and <span class="highlight">C</span>,
+            although I'm also familiar with <span class="highlight">Godot</span>, <span class="highlight">C++</span>
+            , <span class="highlight">Java</span> and some <span class="highlight">JavaScript</span> and <span class="highlight">TypeScript</span>.
+          </p>
+        </div>
       </div>
     </>
   );
diff --git a/front/src/pages/projects.tsx b/front/src/pages/projects.tsx
index ed68529..2753f91 100644
--- a/front/src/pages/projects.tsx
+++ b/front/src/pages/projects.tsx
@@ -13,14 +13,14 @@ export default function Projects() {
         <div class="main-info-subtitle">
           projects that are not games
         </div>
-      </div>
 
-      <div class="projects-container">
-        {
-          projects.map((project) => (
-            Project(project)
-          ))
-        }
+        <div class="projects-container">
+          {
+            projects.map((project) => (
+              Project(project)
+            ))
+          }
+        </div>
       </div>
     </>
   );
diff --git a/front/vite.config.ts b/front/vite.config.ts
index 29b326f..997e4fb 100644
--- a/front/vite.config.ts
+++ b/front/vite.config.ts
@@ -3,5 +3,8 @@ import preact from '@preact/preset-vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  define: {
+    global: {},
+  },
   plugins: [preact()],
 })