diff --git a/src/lib/components/molecules/FadingText.svelte b/src/lib/components/molecules/FadingText.svelte
index 7de9509..101cb89 100644
--- a/src/lib/components/molecules/FadingText.svelte
+++ b/src/lib/components/molecules/FadingText.svelte
@@ -1,13 +1,33 @@
 <script>
-    export let winHeight;
-    export let scrollY;
-    /** @type {HTMLElement} */
-    let el;
+	export let winHeight;
+	export let scrollY;
+	/** @type {HTMLElement} */
+	let el;
+	/** @type {string} */
+	let style = '';
+    const minVal = 0.7
+	$: {
+		if (el && scrollY) {
+			const rect = el.getBoundingClientRect();
+			const elementCenterY = rect.top + rect.height / 2;
 
-    $: {
-        if(el) console.log(el.getBoundingClientRect())
-        console.log(scrollY)
-    }
+			const viewportCenterY = winHeight / 2;
+			const distanceY = Math.abs(elementCenterY - viewportCenterY);
+			const maxDistanceY = winHeight / 2;
+
+			// Normalize distance to get scale value between minVal and 1
+			const normalizedDistanceY = distanceY / maxDistanceY;
+			const scale = 1 - normalizedDistanceY * (1 - minVal);
+            console.log(scale)
+            const cappedScale = Math.max(scale, minVal);
+			style = `transform: scale3d(${cappedScale}, ${cappedScale}, ${cappedScale})`;
+		}
+	}
+
+    let className;
+    export {className as class}
 </script>
 
-<h2 bind:this={el} class="fading mt-48 snap-center">i fucking made you fade</h2>
\ No newline at end of file
+<div {style} class={className}>
+	<h2 bind:this={el}><slot /></h2>
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f6d89eb..6567dcb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -8,7 +8,7 @@
 	import { writable } from 'svelte/store';
 
 	const isDesktop = mediaQuery('(min-width: 1024px)');
-	let scrollY;
+	let scrollY = 0;
 	/**
 	 * @type {number}
 	 */
@@ -29,13 +29,6 @@
 			};
 		}
 	});
-
-	/**
-	 * @type {import('svelte/store').Writable<number>[]}
-	 */
-	let values = [writable(1), writable(1), writable(1), writable(1), writable(1)];
-
-	$: console.log(values);
 </script>
 
 <div class="bg-neutral-950">
@@ -69,13 +62,17 @@
 			</div>
 		</div>
 		{#if $isDesktop}
-			<!-- <BackgroundBeams /> -->
+			<BackgroundBeams />
 		{/if}
 	</div>
 	<div class="text-center text-7xl text-white">
-		<FadingText {winHeight} {scrollY} />
-		<h2 class="fading mt-48 snap-center">i fucking made you</h2>
-		<h2 class="fading mt-48 snap-center">i fucking made you</h2>
 		<h2 class="fading mt-48 snap-center">i fucking made you</h2>
+		<FadingText class="fading my-64 snap-center" {winHeight} {scrollY}>Convert Your Videos To Blogs</FadingText>
+		<FadingText class="fading mt-48 snap-center" {winHeight} {scrollY}>Get More Subscribers</FadingText>
+		<FadingText class="fading my-64 snap-center" {winHeight} {scrollY}>Engage Your Existing Viewerbase</FadingText>
+		<FadingText class="fading my-64 snap-center" {winHeight} {scrollY}>Collect Viewers' Emails</FadingText>
+		<FadingText class="fading my-64 snap-center" {winHeight} {scrollY}>Get A Good Looking Website</FadingText>
+		<FadingText class="fading my-64 snap-center" {winHeight} {scrollY}>Collect Analytics</FadingText>
+		<FadingText class="fading my-64 snap-center" {winHeight} {scrollY}>Profit</FadingText>
 	</div>
 </div>