diff --git a/package-lock.json b/package-lock.json
index b9d4241..70b6c3b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@astrojs/tailwind": "^5.1.3",
         "@types/react": "^19.0.1",
         "@types/react-dom": "^19.0.2",
+        "@use-gesture/vanilla": "^10.3.1",
         "astro": "^5.0.9",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -1658,6 +1659,19 @@
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.1.tgz",
       "integrity": "sha512-fEzPV3hSkSMltkw152tJKNARhOupqbH96MZWyRjNaYZOMIzbrTeQDG+MTc6Mr2pgzFQzFxAfmhGDNP5QK++2ZA=="
     },
+    "node_modules/@use-gesture/core": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw=="
+    },
+    "node_modules/@use-gesture/vanilla": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/vanilla/-/vanilla-10.3.1.tgz",
+      "integrity": "sha512-lT4scGLu59ovA3zmtUonukAGcA0AdOOh+iwNDS05Bsu7Lq9aZToDHhI6D8Q2qvsVraovtsLLYwPrWdG/noMAKw==",
+      "dependencies": {
+        "@use-gesture/core": "10.3.1"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.4.tgz",
diff --git a/package.json b/package.json
index aff6080..d64e65e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@astrojs/tailwind": "^5.1.3",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
+    "@use-gesture/vanilla": "^10.3.1",
     "astro": "^5.0.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 96b0297..5afc05b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -15,6 +15,10 @@ import '@/styles/globals.css'
 		<link rel="preload" href="al-naslaa-black-white.jpg" as="image" />
 		<title>Al Naslaa</title>
 		<style is:inline>
+			:root {
+				--scrolling: 100%;
+				--cutit: inset(0 0 var(--scrolling) 0);
+			}
 			@font-face {
 			font-family: 'Gotham Rounded Bold'; 
 			src: url('./gotham-rounded-bold.otf') format('opentype');
@@ -67,6 +71,7 @@ import '@/styles/globals.css'
 			<img class="w-[100vw] col-start-1 row-start-1 object-cover object-[center_75%]" src="./al-naslaa-art.png" />
 			<img 
 			transition-style="out:wipe:up4"
+			data-alnaslaa
 			class="w-[100vw] col-start-1 row-start-1 object-cover object-[center_75%]" src="al-naslaa.jpg" />
 			<img 
 			transition-style="out:wipe:up3"
@@ -78,11 +83,59 @@ import '@/styles/globals.css'
 			transition-style="out:wipe:up"
 			class="w-[100vw] col-start-1 row-start-1 object-cover object-[center_75%]" src="al-naslaa-black-white.jpg" />
 		</main>
+		<script>
+			import { Gesture } from "@use-gesture/vanilla"
+			let scrolling = 100;
+			const main_ = document.querySelector<HTMLElement>("main");
+			const AWheelGesture = new Gesture(
+			//@ts-ignore
+			main_, {
+				onWheel: (state) => {
+					if(state.axis == "y"){
+						//@ts-ignore
+						document.documentElement.style.setProperty("--scrolling", scrolling + "%");
+						document.querySelector("[data-alnaslaa]")
+						?.setAttribute("style", `clip-path: var(--cutit) !important`);
+						//console.log(state.axis, )
+						if(state.delta[1] > 0){
+							if(document.documentElement.style.getPropertyValue("--scrolling")){
+								scrolling -= 1;
+							}
+						}
+						if(state.delta[1] < 0){
+							scrolling += 1;
+						}
+					}
+				},
+				onDrag: (state) => {
+					if(state.axis == "y"){
+						//@ts-ignore
+						document.documentElement.style.setProperty("--scrolling", scrolling + "%");
+						document.querySelector("[data-alnaslaa]")
+						?.setAttribute("style", `clip-path: var(--cutit) !important`);
+						//console.log(state.axis, )
+						if(state.delta[1] > 0){
+							if(document.documentElement.style.getPropertyValue("--scrolling")){
+								scrolling -= 1;
+							}
+						}
+						if(state.delta[1] < 0){
+							scrolling += 1;
+						}
+					}
+				},
+			});
+		</script>
 		<script is:inline>
-			function sleepFor(sleepDuration){
-				var now = new Date().getTime();
-				while(new Date().getTime() < now + sleepDuration){ /* Do nothing */ }
-			}
+			// .addEventListener("wheel", (e)=>{
+			// 	if(e.deltaY > 0){
+			// 		scrolling += 1
+			// 	} else {
+			// 		scrolling -= 1 
+			// 	}
+			// 	console.log(scrolling, e.deltaY)
+			// 	document.querySelector("[data-alnaslaa]").style = `--scrolling: ${scrolling}%; clip-path: var(--cutit) !important`
+			// });
 			// document.querySelectorAll("img").forEach(
 			// 	(elm) => {
 			// 		window.requestAnimationFrame(()=>{