diff --git a/appview/pages/templates/timeline/home.html b/appview/pages/templates/timeline/home.html
index 2a61955b..21f91ea7 100644
--- a/appview/pages/templates/timeline/home.html
+++ b/appview/pages/templates/timeline/home.html
@@ -71,8 +71,19 @@
 
 {{ define "content" }}
   <div class="flex flex-col gap-20 md:gap-40 my-20 md:my-32">
-    {{ template "timeline/fragments/hero" . }}
-    {{ template "timeline/fragments/preview" . }}
+    <div class="relative">
+      <div class="hidden md:block absolute inset-0 pointer-events-none z-0 opacity-50 dark:opacity-5 bg-slate-200 dark:bg-slate-400
+        [mask-image:url('https://assets.tangled.network/Rope.svg'),linear-gradient(to_bottom,black_0%,black_60%,transparent_100%)]
+        [-webkit-mask-image:url('https://assets.tangled.network/Rope.svg'),linear-gradient(to_bottom,black_0%,black_60%,transparent_100%)]
+        [mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat]
+        [mask-position:10%_center,center] [-webkit-mask-position:10%_center,center]
+        [mask-size:contain,100%_100%] [-webkit-mask-size:contain,100%_100%]
+        [mask-composite:intersect] [-webkit-mask-composite:source-in]"></div>
+      <div class="relative z-10 flex flex-col gap-20 md:gap-40">
+        {{ template "timeline/fragments/hero" . }}
+        {{ template "timeline/fragments/preview" . }}
+      </div>
+    </div>
     {{ template "features1" . }}
     {{ template "features2" . }}
     {{ template "recentUpdates" . }}
@@ -106,7 +117,7 @@
 {{ block "mainLayout" . }}
   <div class="flex-grow relative">
     <div
-      class="absolute opacity-50 dark:opacity-5 inset-x-0 top-0 bottom-[-50px] md:bottom-[-150px] pointer-events-none bg-slate-200 dark:bg-slate-400 [mask-image:url('https://assets.tangled.network/yarn_ball_mask.svg')] [mask-repeat:no-repeat] [mask-position:right_bottom] [-webkit-mask-image:url('https://assets.tangled.network/yarn_ball_mask.svg')] [-webkit-mask-repeat:no-repeat] [-webkit-mask-position:right_bottom] w-full">
+      class="absolute opacity-50 dark:opacity-5 inset-x-0 top-0 bottom-[-50px] md:bottom-[-150px] pointer-events-none bg-slate-200 dark:bg-slate-400 [mask-image:url('https://assets.tangled.network/yarn_ball_mask.svg'),linear-gradient(to_top,transparent_0px,black_250px)] [-webkit-mask-image:url('https://assets.tangled.network/yarn_ball_mask.svg'),linear-gradient(to_top,transparent_0px,black_250px)] [mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat] [mask-position:right_bottom,center] [-webkit-mask-position:right_bottom,center] [mask-size:auto,100%_100%] [-webkit-mask-size:auto,100%_100%] [mask-composite:intersect] [-webkit-mask-composite:source-in] w-full">
     </div>
     <div class="max-w-screen-xl mx-auto flex flex-col gap-4 relative z-10">
       {{ block "contentLayout" . }}
@@ -349,7 +360,15 @@
   {{ $iconCircleStyle := "rounded-full flex items-center justify-center border border-gray-200 dark:border-gray-700" }}
   {{ $linkDesktopStyle := "hover:no-underline hidden md:inline-flex absolute -bottom-10 -right-14 items-center gap-2 p-3 text-base btn" }}
 
-  <div class="w-full flex flex-col gap-6 md:gap-40 max-w-5xl mx-auto px-2">
+  <div class="relative">
+    <div class="hidden md:block absolute -top-32 -bottom-32 inset-x-0 pointer-events-none z-0 opacity-50 dark:opacity-5 bg-slate-200 dark:bg-slate-400
+      [mask-image:url('https://assets.tangled.network/rope-2.svg'),linear-gradient(to_bottom,transparent_0%,black_15%,black_85%,transparent_100%)]
+      [-webkit-mask-image:url('https://assets.tangled.network/rope-2.svg'),linear-gradient(to_bottom,transparent_0%,black_15%,black_85%,transparent_100%)]
+      [mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat]
+      [mask-position:-400px_center,center] [-webkit-mask-position:-400px_center,center]
+      [mask-size:auto_200%,100%_100%] [-webkit-mask-size:auto_200%,100%_100%]
+      [mask-composite:intersect] [-webkit-mask-composite:source-in]"></div>
+  <div class="relative z-10 w-full flex flex-col gap-6 md:gap-40 max-w-5xl mx-auto px-2">
     <div class="{{ $cardStyle }} md:mr-32">
       <div class="{{ $cardInnerStyle }}">
         {{ $moreLink := "https://docs.tangled.org/quick-start-guide.html#login-or-sign-up" }}
@@ -445,6 +464,7 @@
       </div>
     </div>
   </div>
+  </div>
 {{ end }}
 
 {{ define "changelog" }}