diff --git a/src/app.html b/src/app.html
index 009e878..ea40a9d 100644
--- a/src/app.html
+++ b/src/app.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" style="height: 100vh">
+	<body data-sveltekit-preload-data="hover" style="min-height: 100vh">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/components/molecules/FadingText.svelte b/src/lib/components/molecules/FadingText.svelte
new file mode 100644
index 0000000..7de9509
--- /dev/null
+++ b/src/lib/components/molecules/FadingText.svelte
@@ -0,0 +1,13 @@
+<script>
+    export let winHeight;
+    export let scrollY;
+    /** @type {HTMLElement} */
+    let el;
+
+    $: {
+        if(el) console.log(el.getBoundingClientRect())
+        console.log(scrollY)
+    }
+</script>
+
+<h2 bind:this={el} class="fading mt-48 snap-center">i fucking made you fade</h2>
\ No newline at end of file
diff --git a/src/lib/components/molecules/StickyScrollReveal.svelte b/src/lib/components/molecules/StickyScrollReveal.svelte
new file mode 100644
index 0000000..e07af87
--- /dev/null
+++ b/src/lib/components/molecules/StickyScrollReveal.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	let activeCard = 0;
+	let backgroundColors = ['var(--slate-900)', 'var(--black)', 'var(--neutral-900)'];
+	let linearGradients = [
+		'linear-gradient(to bottom right, var(--cyan-500), var(--emerald-500))',
+		'linear-gradient(to bottom right, var(--pink-500), var(--indigo-500))',
+		'linear-gradient(to bottom right, var(--orange-500), var(--yellow-500))'
+	];
+	let scrollYProgress = 0;
+
+	export let content: { title: string; description: string }[] = [
+		{ title: 'Title 1', description: 'Description 1' },
+		{ title: 'Title 2', description: 'Description 2' }
+		// Add more items as needed
+	];
+
+	let ref: HTMLDivElement;
+
+	onMount(() => {
+		const handleScroll = (event: Event) => {
+			const target = event.target as HTMLElement;
+			scrollYProgress = target.scrollTop / target.scrollHeight;
+			const cardsBreakpoints = content.map((_, index) => index / content.length);
+
+			cardsBreakpoints.forEach((breakpoint, index) => {
+				if (scrollYProgress > breakpoint - 0.2 && scrollYProgress <= breakpoint) {
+					activeCard = index;
+				}
+			});
+		};
+
+		ref.addEventListener('scroll', handleScroll);
+
+		return () => {
+			ref.removeEventListener('scroll', handleScroll);
+		};
+	});
+</script>
+
+<div
+	bind:this={ref}
+	class="relative flex h-[30rem] justify-center space-x-10 overflow-y-auto rounded-md p-10 transition ease-in-out"
+>
+	<div class="div relative flex items-start px-4">
+		<div class="w-full">
+			{#each content as item, index (item.title + index)}
+				<div class="my-20">
+					<h2
+						style="opacity: {activeCard === index ? 1 : 0.3}"
+						class="text-2xl font-bold text-slate-100"
+					>
+						{item.title}
+					</h2>
+					<p
+						style="opacity: {activeCard === index ? 1 : 0.3}"
+						class="text-kg mt-10 max-w-sm text-slate-300"
+					>
+						{item.description}
+					</p>
+				</div>
+			{/each}
+			<div class="h-40" />
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index eff402c..f6d89eb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,39 +1,81 @@
 <script>
 	import '../app.pcss';
 	import BackgroundBeams from '$lib/components/molecules/BackgroundBeams.svelte';
+	import FadingText from '$lib/components/molecules/FadingText.svelte';
 	import { mediaQuery } from 'svelte-legos';
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import { writable } from 'svelte/store';
 
 	const isDesktop = mediaQuery('(min-width: 1024px)');
+	let scrollY;
+	/**
+	 * @type {number}
+	 */
+	let winHeight;
+	onMount(() => {
+		if (browser) {
+			winHeight = window.innerHeight;
+			window.onscroll = (e) => {
+				// const fadingEls = [...document.getElementsByClassName('fading')];
+
+				// for (let i in fadingEls) {
+				// 	let el = fadingEls[i];
+				// 	const distFromCenter =
+				// 		window.innerHeight / 2 - el.getBoundingClientRect().top - el.clientHeight;
+				// 	values[i].set(distFromCenter);
+				// }
+				scrollY = window.scrollY;
+			};
+		}
+	});
+
+	/**
+	 * @type {import('svelte/store').Writable<number>[]}
+	 */
+	let values = [writable(1), writable(1), writable(1), writable(1), writable(1)];
+
+	$: console.log(values);
 </script>
 
-<div
-	class="relative flex h-screen w-full flex-col items-center justify-center bg-neutral-950 antialiased lg:px-32"
->
-	<div class="mx-auto max-w-2xl p-4">
-		<h2
-			class="relative z-10 bg-gradient-to-b mb-6 from-neutral-200 to-neutral-600 bg-clip-text text-center font-sans text-3xl font-bold text-transparent md:text-7xl"
-		>
-			Join the waitlist
-		</h2>
-		<p></p>
-		<p class="relative z-10 mx-auto my-2 max-w-lg text-center text-sm text-neutral-500">
-			Welcome to ExampleSaaS, the best solution for converting your video content into an engaging
-			blog website. Sign up to our waitlist to get notified when we launch and earn some free goodies as well.
-		</p>
-		<div class="flex flex-row gap-2 text-gray-50 pt-4">
-			<input
-				type="text"
-				placeholder="hi@example.com"
-				class="relative z-10 w-full rounded-lg border border-neutral-800 bg-neutral-950 p-2 placeholder:text-neutral-700 focus:ring-2 focus:ring-teal-500"
-			/>
-            
-            <button class="relative z-10 inline-flex h-10 w-52 animate-shimmer items-center justify-center rounded-md border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-slate-400 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
-                Join Waitlist
-            </button>
+<div class="bg-neutral-950">
+	<div
+		class="relative flex h-screen w-full flex-col items-center justify-center bg-neutral-950 antialiased lg:px-32"
+	>
+		<div class="mx-auto max-w-2xl p-4">
+			<h2
+				class="relative z-10 mb-6 bg-gradient-to-b from-neutral-200 to-neutral-600 bg-clip-text text-center font-sans text-3xl font-bold text-transparent md:text-7xl"
+			>
+				Join the waitlist
+			</h2>
+			<p></p>
+			<p class="relative z-10 mx-auto my-2 max-w-lg text-center text-sm text-neutral-500">
+				Welcome to ExampleSaaS, the best solution for converting your video content into an engaging
+				blog website. Sign up to our waitlist to get notified when we launch and earn some free
+				goodies as well.
+			</p>
+			<div class="flex flex-row gap-2 pt-4 text-gray-50">
+				<input
+					type="text"
+					placeholder="hi@example.com"
+					class="relative z-10 w-full rounded-lg border border-neutral-800 bg-neutral-950 p-2 placeholder:text-neutral-700 focus:ring-2 focus:ring-teal-500"
+				/>
 
+				<button
+					class="animate-shimmer relative z-10 inline-flex h-10 w-52 items-center justify-center rounded-md border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-slate-400 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50"
+				>
+					Join Waitlist
+				</button>
+			</div>
 		</div>
+		{#if $isDesktop}
+			<!-- <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>
 	</div>
-	{#if $isDesktop}
-		<BackgroundBeams />
-	{/if}
 </div>
