improvements

components/footer/footer.module.scss

@@ -1,51 +1,94 @@
 .footer {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0px 48px 48px;
-    max-width: 1500px;
-    margin: auto;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0px 48px 48px;
+  max-width: 1500px;
+  margin: auto;
+  gap: 24px;
+  flex-wrap: wrap;
 }
-  
+
+.legalLinks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 24px;
+  margin-right: auto;
+  color: var(--on-background-secondary);
+  font-size: 0.875rem;
+  font-weight: 600;
+
+  a {
+    display: inline-block;
+    padding: 8px 0;
+  }
+
+  a:hover,
+  a[aria-current='page'] {
+    color: #0059ff;
+    cursor: none;
+  }
+
+  a:focus-visible {
+    outline: 2px solid #0059ff;
+    outline-offset: 4px;
+    border-radius: 4px;
+  }
+}
+
 .fatLittleStar {
-    position: relative;
-    margin-right: auto;
-    transform: translate(30px, 10px);
-    color: #0059ff;
-    z-index: -1;
-  
-    svg {
-      position: absolute;
-      top: 0;
-      left: 0;
-      transform: translate(-50%, -50%);
-    }
+  position: relative;
+  margin-right: auto;
+  transform: translate(30px, 10px);
+  color: #0059ff;
+  z-index: -1;
+
+  svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(-50%, -50%);
+  }
 }
-  
+
 .author {
-    font-weight: 700;
+  font-weight: 700;
+  flex-shrink: 0;
 }
-  
+
 .xtimms {
-    color: #0059ff;
-    cursor: none !important;
+  color: #0059ff;
+  cursor: none !important;
 }
-  
+
 @media screen and (max-width: 1240px) {
-    .footer {
-      padding: 0px 36px 36px;
-    }
+  .footer {
+    padding: 0px 36px 36px;
+  }
 }
-  
+
 @media screen and (max-width: 800px) {
-    .footer {
-      padding: 0px 24px 24px;
-    }
+  .footer {
+    padding: 0px 24px 24px;
+  }
+
+  .fatLittleStar {
+    display: none;
+  }
 }
-  
+
 @media screen and (max-width: 500px) {
-    .footer {
-      padding: 0px 16px 16px;
-    }
-}
+  .footer {
+    padding: 0px 16px 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+
+  .legalLinks {
+    flex-direction: column;
+    gap: 0;
+    cursor: none;
+  }
+}

components/footer/footer.tsx

@@ -5,6 +5,10 @@ import styles from './footer.module.scss';
 import FatLittleStar from '@/assets/images/fat-little-star.svg';
 import { useRef } from 'react';
 import useScroll from '@/utils/useScroll';
+import { useRouter } from 'next/router';
+import { Locales } from '@/utils/useLocale';
+import { legalCopy, legalDocumentIds } from '@/modules/legal/content';
+import { CursorEffect } from '@/components/cursor';
 
 type CardProps = React.DetailedHTMLProps<
   React.HTMLAttributes<HTMLDivElement>,
@@ -23,6 +27,8 @@ const localesMap: LocalesMap = {
 export function Footer(props: CardProps) {
   const { className: restClassName, ...restProps } = props;
   const t = useLocale(localesMap);
+  const { locale, pathname } = useRouter();
+  const copy = legalCopy[(locale || 'en') as Locales];
   const fatLittleStarRef = useRef<HTMLDivElement>(null);
 
   useScroll((scrollY) => {
@@ -47,6 +53,17 @@ export function Footer(props: CardProps) {
       <div ref={fatLittleStarRef} className={styles.fatLittleStar}>
         <FatLittleStar />
       </div>
+      {/* <nav className={styles.legalLinks} aria-label={copy.label}>
+        {legalDocumentIds.map((id) => (
+          <Link
+            key={id}
+            href={`/${id}`}
+            aria-current={pathname === `/${id}` ? 'page' : undefined}
+          >
+            {copy.documents[id].title}
+          </Link>
+        ))}
+      </nav> */}
       <p className={styles.author}>
         {`${t('madeBy')} `}
         <Link
@@ -60,4 +77,4 @@ export function Footer(props: CardProps) {
       </p>
     </footer>
   );
-}
+}

components/gradients/gradient.tsx

@@ -12,7 +12,7 @@ const threeCanvas = (
   viewportSize: InitThreeOptions,
   initTimeOffset: number = 0
 ) => {
-  const { renderer, clock } = initThree(canvas, viewportSize);
+  const { renderer, timer } = initThree(canvas, viewportSize);
   const { scene, camera, updateSize: updateCameraSize } = initScene(renderer);
   const {
     render: renderGradient,
@@ -41,8 +41,9 @@ const threeCanvas = (
   const animate = () => {
     if (!isActive) return;
     //stats.begin();
-    elapsedTime = clock.elapsedTime + initTimeOffset;
-    delta = clock.getDelta();
+    timer.update();
+    elapsedTime = timer.getElapsed() + initTimeOffset;
+    delta = timer.getDelta();
 
     renderGradient(elapsedTime, delta);
     renderFrame(elapsedTime, delta);
@@ -64,6 +65,7 @@ const threeCanvas = (
   const unload = () => {
     isActive = false;
     unloadGradinet();
+    timer.dispose();
     renderer.dispose();
   };
 
@@ -76,7 +78,7 @@ const threeCanvas = (
 export function Gradients() {
   const rootRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  const [timeOffset] = useState(Math.random() * 1000);
+  const [timeOffset] = useState(() => Math.random() * 1000);
 
   useEffect(() => {
     try {
@@ -113,4 +115,4 @@ export function Gradients() {
       <canvas className={styles.canvas} ref={canvasRef}></canvas>
     </div>
   );
-}
+}

components/gradients/grainPostProcessing.ts

@@ -1,8 +1,8 @@
 import * as THREE from 'three';
 
-import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
-import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
-import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass';
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
+import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
 import { GrainShader } from './grainPostprocessingShader';
 
 export function initGrainFilter(
@@ -43,4 +43,4 @@ export function initGrainFilter(
       composer2.setSize(viewportSize.width, viewportSize.height);
     },
   };
-}
+}

components/gradients/initThree.ts

@@ -13,7 +13,8 @@ export function initThree(
   renderer.setSize(width, height);
   renderer.setPixelRatio(window.devicePixelRatio);
 
-  const clock = new THREE.Clock();
+  const timer = new THREE.Timer();
+  timer.connect(document);
 
-  return { renderer, clock };
-}
+  return { renderer, timer };
+}