diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
index e04e4258..9795a877 100644
Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ
diff --git a/package.json b/package.json
index 27c89d51..b8d36402 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
         "@fontsource/baskervville": "^5.0.19",
         "@hookform/resolvers": "^3.3.4",
         "@million/lint": "^0.0.73",
-        "@types/node": "^20.11.30",
+        "@types/node": "^20.12.2",
         "@types/react": "^18.2.73",
         "@types/react-dom": "^18.2.23",
         "astro": "^4.5.12",
@@ -71,7 +71,7 @@
         "@testing-library/react-hooks": "^8.0.1",
         "@types/eslint": "^8.56.6",
         "@types/markdown-it": "^13.0.7",
-        "@types/three": "^0.162.0",
+        "@types/three": "^0.163.0",
         "@typescript-eslint/eslint-plugin": "^7.4.0",
         "@typescript-eslint/parser": "^7.4.0",
         "eslint": "^8.57.0",
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 413e3c1f..f2621157 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -24,8 +24,6 @@ import LatestArticles from '@components/organisms/latestArticles/LatestArticles.
 // todo: improve isolation
 // todo: add thinner svg lines
 // todo: reduce XXSS module
-// todo: fix box shadow on load (https://css-tricks.com/fixing-box-shadow-z-index-bug/)
-// todo: use scroll-driven animations to add box shadow on header when scroll
 // todo: replace arrows and icons for a finest ones
 // todo: refer logo (original + finet)
 // todo: add vitest
diff --git a/src/ui/components/atoms/logo/logo.css b/src/ui/components/atoms/logo/logo.css
index 90df89a8..3ad5f569 100644
--- a/src/ui/components/atoms/logo/logo.css
+++ b/src/ui/components/atoms/logo/logo.css
@@ -1,5 +1,8 @@
 @layer header.logo {
   .site__logo {
+    animation: shrink linear both;
+    animation-range: 0 5vw;
+    animation-timeline: scroll();
     display: block;
     height: fit-content;
     inset: 1rem 0 0;
@@ -7,17 +10,18 @@
     position: absolute;
     transition:
       top 0.3s linear 1.75s,
-      scale 0.2s;
+      scale 0.2s linear 0.3s,
+      transform 0.2s linear;
     width: 307px;
     z-index: 20;
 
     svg {
       transition:
-        scale 0.2s,
-        fill 0.3s;
+        top 0.3s linear 1.75s,
+        scale 0.2s linear;
     }
 
-    &.--is-scrolling:not(.--is-menu-open) svg {
+    :not(.--is-menu-open) svg {
       scale: 0.85;
     }
   }
diff --git a/src/ui/components/organisms/header/header.css b/src/ui/components/organisms/header/header.css
index 09c6aca3..51cc4c96 100644
--- a/src/ui/components/organisms/header/header.css
+++ b/src/ui/components/organisms/header/header.css
@@ -1,5 +1,8 @@
 @layer header {
   .header {
+    animation: add-shadow linear both;
+    animation-range: 0 1vw;
+    animation-timeline: scroll();
     height: var(--header-height);
     margin-inline: auto;
     position: fixed;
@@ -8,12 +11,8 @@
     width: 100%;
     z-index: 1000;
 
-    &.--is-scrolling {
-      box-shadow: 0 0.125rem 0.375rem var(--neutral-light-2);
-
-      &::after {
-        clip-path: polygon(0 0, 100% 0, 100% 120%, 0 120%);
-      }
+    &::after {
+      clip-path: polygon(0 0, 100% 0, 100% 120%, 0 120%);
     }
 
     .header__wrapper {
diff --git a/src/ui/components/organisms/header/utils/scrollDirection/index.ts b/src/ui/components/organisms/header/utils/scrollDirection/index.ts
deleted file mode 100644
index bee0c5c1..00000000
--- a/src/ui/components/organisms/header/utils/scrollDirection/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './scrollDirection';
diff --git a/src/ui/components/organisms/header/utils/scrollDirection/scrollDirection.ts b/src/ui/components/organisms/header/utils/scrollDirection/scrollDirection.ts
deleted file mode 100644
index f40dba29..00000000
--- a/src/ui/components/organisms/header/utils/scrollDirection/scrollDirection.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-enum ScrollDirection {
-    NONE = 'NONE',
-    UP = 'UP',
-    DOWN = 'DOWN',
-}
-
-export function scrollDirection(): void {
-    let lastScrollTop = 0;
-    let scrollDirection: ScrollDirection = ScrollDirection.NONE;
-
-    function handleScroll() {
-        const HEADER = document.querySelector('header');
-        const LOGO = document.querySelector('.site__logo');
-        const scrollTop = document.documentElement.scrollTop ?? document.body.scrollTop;
-
-        if (scrollTop > lastScrollTop) scrollDirection = ScrollDirection.DOWN;
-        else scrollDirection = ScrollDirection.UP;
-
-        lastScrollTop = scrollTop;
-
-        if (!HEADER || !LOGO) return;
-
-        if (scrollTop === 0) {
-            HEADER.classList.remove('--is-scrolling');
-            LOGO.classList.remove('--is-scrolling');
-        } else if (scrollDirection === ScrollDirection.DOWN) {
-            HEADER.classList.add('--is-scrolling');
-            LOGO.classList.add('--is-scrolling');
-        }
-    }
-
-    window.addEventListener('scroll', handleScroll);
-}
diff --git a/src/ui/components/organisms/header/utils/toggleMenu/toggleMenu.ts b/src/ui/components/organisms/header/utils/toggleMenu/toggleMenu.ts
index cf0d931d..9827d164 100644
--- a/src/ui/components/organisms/header/utils/toggleMenu/toggleMenu.ts
+++ b/src/ui/components/organisms/header/utils/toggleMenu/toggleMenu.ts
@@ -96,7 +96,7 @@ export function toggleMenu() {
             },
             '<'
         );
-        timeline.to(SITE_LOGO, { y: '3rem', duration: 0.25 }, '-=0.5');
+        timeline.to(SITE_LOGO, { y: '2rem', duration: 0.25 }, '-=0.5');
         timeline.to(SITE_LOGO_SVG, { fill: WHITE, duration: 0.25 }, '-=1');
         timeline
             .to(OVERLAY_PATH, { attr: { d: PATH_START }, ease: POWER2_EASE_IN, duration: 1 }, '<')
diff --git a/src/ui/components/organisms/siteHead/SiteHead.astro b/src/ui/components/organisms/siteHead/SiteHead.astro
index 9f3a327a..d1340dbf 100644
--- a/src/ui/components/organisms/siteHead/SiteHead.astro
+++ b/src/ui/components/organisms/siteHead/SiteHead.astro
@@ -39,8 +39,7 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props as
 <script
   type="text/partytown"
   src=`https://www.googletagmanager.com/gtag/js?id=${import.meta.env.PUBLIC_GOOGLE_ANALYTICS_ID}`
->
-</script>
+></script>
 <script type="text/partytown">
   window.dataLayer = window.dataLayer || [];
 
diff --git a/src/ui/context/reactScriptProvider/ReactScriptProvider.tsx b/src/ui/context/reactScriptProvider/ReactScriptProvider.tsx
index a6847bf0..652d4395 100644
--- a/src/ui/context/reactScriptProvider/ReactScriptProvider.tsx
+++ b/src/ui/context/reactScriptProvider/ReactScriptProvider.tsx
@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
 import { toggleMenu } from '@components/organisms/header/utils/toggleMenu';
-import { scrollDirection } from '@components/organisms/header/utils/scrollDirection';
 import { initializeParallax } from '@components/molecules/welcome/utils/initializeParallax';
 import { backgroundObserver } from '@components/organisms/header/utils/backgroundObserver';
 import { mailTo } from '@shared/utils/mailTo';
@@ -8,7 +7,6 @@ import { mailTo } from '@shared/utils/mailTo';
 const ReactScriptProvider = () => {
   useEffect(() => {
     toggleMenu();
-    scrollDirection();
     initializeParallax();
     backgroundObserver();
     mailTo();
diff --git a/src/ui/styles/global/animations.css b/src/ui/styles/global/animations.css
index c8e72c09..8c03a570 100644
--- a/src/ui/styles/global/animations.css
+++ b/src/ui/styles/global/animations.css
@@ -1,4 +1,16 @@
 @layer animations {
+  @keyframes add-shadow {
+    to {
+      box-shadow: 0 0.125rem 0.375rem var(--neutral-light-2);
+    }
+  }
+
+  @keyframes shrink {
+    to {
+      scale: 0.85;
+    }
+  }
+
   @keyframes morph {
     0% {
       border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
diff --git a/yarn.lock b/yarn.lock
index 9556509e..3cbd8c80 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2693,12 +2693,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^20.11.30":
-  version: 20.11.30
-  resolution: "@types/node@npm:20.11.30"
+"@types/node@npm:^20.12.2":
+  version: 20.12.2
+  resolution: "@types/node@npm:20.12.2"
   dependencies:
     undici-types: "npm:~5.26.4"
-  checksum: 867cfaf969c6d8850d8d7304e7ab739898a50ecb1395b61ff2335644f5f48d7a46fbc4a14cee967aed65ec134b61a746edae70d1f32f11321ccf29165e3bc4e6
+  checksum: bb47d115a8f95aadebdd6403fee16d149d6b5568ad53bacc42df34c2d572561e36ba47b05f7f68bada43752d7369b470a90df65b646af7502dfb799a21b4fca7
   languageName: node
   linkType: hard
 
@@ -2778,16 +2778,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/three@npm:^0.162.0":
-  version: 0.162.0
-  resolution: "@types/three@npm:0.162.0"
+"@types/three@npm:^0.163.0":
+  version: 0.163.0
+  resolution: "@types/three@npm:0.163.0"
   dependencies:
     "@tweenjs/tween.js": "npm:~23.1.1"
     "@types/stats.js": "npm:*"
     "@types/webxr": "npm:*"
-    fflate: "npm:~0.6.10"
+    fflate: "npm:~0.8.2"
     meshoptimizer: "npm:~0.18.1"
-  checksum: d4817bcb30e83804c20f505fae5a40e3d307a570b25fec65a73366c09859f7e7860cf2bf0757aa7d90f908ae7ed7d710db66b6a7cd638d6869909b4e7dfb7198
+  checksum: 715406a709bdcf567ba844c598c73dac07b679df942f85c578e82a33d00ae3ac67e8f6a3e030ec75ba0f639d33c65fb7ec6237c11a4a501c98569d99bc67a5b6
   languageName: node
   linkType: hard
 
@@ -3676,10 +3676,10 @@ __metadata:
     "@testing-library/react-hooks": "npm:^8.0.1"
     "@types/eslint": "npm:^8.56.6"
     "@types/markdown-it": "npm:^13.0.7"
-    "@types/node": "npm:^20.11.30"
+    "@types/node": "npm:^20.12.2"
     "@types/react": "npm:^18.2.73"
     "@types/react-dom": "npm:^18.2.23"
-    "@types/three": "npm:^0.162.0"
+    "@types/three": "npm:^0.163.0"
     "@typescript-eslint/eslint-plugin": "npm:^7.4.0"
     "@typescript-eslint/parser": "npm:^7.4.0"
     astro: "npm:^4.5.12"
@@ -5753,10 +5753,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fflate@npm:~0.6.10":
-  version: 0.6.10
-  resolution: "fflate@npm:0.6.10"
-  checksum: c452f720e4cb404b300fceb8ef0bdf345f18fbfd3f57f7d0974dce5f5e2ac0e8dd4b6ff4bb7061ae74fd919b9c707172f9dbd44d91149b1137199b8c705768f1
+"fflate@npm:~0.8.2":
+  version: 0.8.2
+  resolution: "fflate@npm:0.8.2"
+  checksum: 03448d630c0a583abea594835a9fdb2aaf7d67787055a761515bf4ed862913cfd693b4c4ffd5c3f3b355a70cf1e19033e9ae5aedcca103188aaff91b8bd6e293
   languageName: node
   linkType: hard