diff --git a/.gitignore b/.gitignore
index e050f89..2da223c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,4 @@ src/routeTree.gen.ts
 tsconfig.tsbuildinfo
 .wrangler/
 /deps.dot
+package-lock.json
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index dc61595..ddc8669 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -11,49 +11,24 @@ import { LogoAnimation } from "@/components/LogoAnimation";
 import { Button } from "@/components/cva/Button";
 import { Expanded } from "@/components/cva/Expanded";
 
+const getResponsiveRootMargin = (): string => {
+  if (window.innerWidth >= 1280) return "-300px";
+  if (window.innerWidth >= 640) return "-200px";
+  return "-100px";
+};
+
 export const Route = createFileRoute("/")({
   component: () => {
-    const [ref1, inView1] = useInView({
-      rootMargin: (() => {
-        if (window.innerWidth >= 1280) return "-1000px";
-        if (window.innerWidth >= 640) return "-350px";
-        return "-200px";
-      })(),
-      triggerOnce: true,
-    });
-    const [ref2, inView2] = useInView({
-      rootMargin: (() => {
-        if (window.innerWidth >= 1280) return "-1000px";
-        if (window.innerWidth >= 640) return "-350px";
-        return "-200px";
-      })(),
-      triggerOnce: true,
-    });
-    const [ref3, inView3] = useInView({
-      rootMargin: (() => {
-        if (window.innerWidth >= 1280) return "-1000px";
-        if (window.innerWidth >= 640) return "-350px";
-        return "-200px";
-      })(),
+    const inViewOptions = {
+      rootMargin: getResponsiveRootMargin(),
       triggerOnce: true,
-    });
-    const [ref4, inView4] = useInView({
-      rootMargin: (() => {
-        if (window.innerWidth >= 1280) return "-1000px";
-        if (window.innerWidth >= 640) return "-350px";
-        return "-200px";
-      })(),
-      triggerOnce: true,
-    });
+    };
 
-    const [ref5, inView5] = useInView({
-      rootMargin: (() => {
-        if (window.innerWidth >= 1280) return "-1000px";
-        if (window.innerWidth >= 640) return "-350px";
-        return "-200px";
-      })(),
-      triggerOnce: true,
-    });
+    const [ref1, inView1] = useInView(inViewOptions);
+    const [ref2, inView2] = useInView(inViewOptions);
+    const [ref3, inView3] = useInView(inViewOptions);
+    const [ref4, inView4] = useInView(inViewOptions);
+    const [ref5, inView5] = useInView(inViewOptions);
 
     return (
       <Expanded alignItems="start">