diff --git a/src/pages/index/components/home-demo-page/index.marko b/src/pages/index/components/home-demo-page/index.marko
index 5ade4449..ce06594a 100644
--- a/src/pages/index/components/home-demo-page/index.marko
+++ b/src/pages/index/components/home-demo-page/index.marko
@@ -25,9 +25,11 @@ style {
     position:absolute;
     top:0;
     left:0;
+    right:0;
     height:0.5em;
     background: linear-gradient(90deg, #25dbd2, #33d5f4, #039fea);
     transform-origin: 0 0;
+    will-change: transform;
   }
   .demo-page-header {
     display: flex;
@@ -38,6 +40,7 @@ style {
   .demo-page-logo {
     font-size:2em;
     font-weight: 800;
+    background: #fff;
   }
   .demo-page-cart {
     background: #1d1924;
@@ -52,8 +55,22 @@ style {
   .demo-page-image {
     flex: 1;
   }
+  .demo-page-image-lowres {
+    background:
+      radial-gradient(closest-side circle at 35% 40%, rgba(0,0,0,0.3), rgba(0,0,0,0.15) 5%, rgba(0,0,0,0) 50%),
+      radial-gradient(50% 25% ellipse at 45% 45%, rgba(0,0,0,0.21), rgba(0,0,0,0) 70%);
+    /* opacity: 0.3; */
+    position: absolute;
+    width: 50%;
+  }
+  .demo-page-image-lowres::before {
+    content: "";
+    display: block;
+    padding-top: 100%;
+  }
   .demo-page-description {
     flex: 1;
+    background: #fff;
   }
   .demo-page-description-title {
     font-size: 1.2em;
@@ -71,6 +88,7 @@ style {
     padding:0.5em 1em;
     display: inline-block;
     margin:0.25em 0;
+    z-index: 1;
   }
   .demo-page-description-text {
     font-size: 0.8em;
@@ -89,21 +107,44 @@ style {
     padding:1em;
     background:#f4f2f4;
   }
-  .demo-page-footer > div {
+  .demo-page-footlink {
     font-size: 0.8em;
+    z-index: 1;
   }
   .demo-page-loading {
     opacity: 0;
   }
-  .demo-page-lowres {
-    filter: blur(1em) grayscale(0.6);
-    opacity: 0.3;
-  }
   .demo-page-hydrate-partial .demo-page-hydrated,
-  .demo-page-hydrate-all div {
-    animation-name: pulse-red;
-    animation-iteration-count: infinite;
-    animation-duration: 2s;
+  .demo-page-hydrate-all .demo-page-delay {
+    position: relative;
+  }
+  .demo-page-hydrate-partial .demo-page-hydrated::before,
+  .demo-page-hydrate-all .demo-page-delay::before {
+    content: "";
+    position: absolute;
+    top: -15px; right: -15px; bottom: -15px; left: -15px;
+    border: 15px solid rgba(255, 50, 82, 0.7);
+    z-index: -1;
+    will-change: transform;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .demo-page-hydrate-partial .demo-page-hydrated::before,
+    .demo-page-hydrate-all .demo-page-delay::before {
+      animation: pulse 2s infinite;
+      animation-delay: inherit;
+      border-width: 52px;
+      top: -30px; right: -30px; bottom: -30px; left: -30px;
+      opacity: 0;
+    }
+  }
+  @keyframes pulse {
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      opacity: 0;
+      transform: scale(1.1);
+    }
   }
   .demo-page-delay-1 {
     animation-delay: 100ms;
@@ -157,24 +198,6 @@ style {
     animation-delay: 1700ms;
   }
 
-  @media (prefers-reduced-motion) {
-    .demo-page-hydrate-partial .demo-page-hydrated,
-    .demo-page-hydrate-all div {
-      animation: none;
-      box-shadow: 0 0 0 15px rgba(255, 50, 82, 0.7);
-    }
-  }
-
-  @keyframes pulse-red {
-    0% {
-      box-shadow: 0 0 0 0 rgba(255, 50, 82, 0.9);
-    }
-
-    100% {
-      box-shadow: 0 0 0px 90px rgba(255, 50, 82, 0);
-    }
-  }
-
   .demo-page-marko,
   .demo-page-other {
     position: absolute;
@@ -214,6 +237,10 @@ style {
   }
 }
 
+$ function delay (n) {
+  return `demo-page-delay demo-page-delay-${n}`;
+}
+
 $ const progress = input.buffered ? Math.floor(input.progress / 0.9) : input.progress / 0.9;
 
 <div.demo-page-wrapper class=input.class role="img" aria-label=input.label> 
@@ -221,21 +248,23 @@ $ const progress = input.buffered ? Math.floor(input.progress / 0.9) : input.pro
     <if(input.progress >= 0)>
       <div.demo-page-progress style={ transform: `scaleX(${Math.min(1, input.progress * (input.buffered ? 1 : 1/0.9))})` }/>
     </if>
-    <div.demo-page-header.demo-page-delay-1 class={ "demo-page-loading": progress < 0.1 }>
-      <div.demo-page-link.demo-page-delay-2>All Products</div>
-      <div.demo-page-logo.demo-page-delay-3>BuyItNow</div>
-      <div.demo-page-cart.demo-page-delay-4.demo-page-hydrated>Cart (0)</div>
+    <div.demo-page-header.${delay(1)} class={ "demo-page-loading": progress < 0.1 }>
+      <div.demo-page-link.${delay(2)}>All Products</div>
+      <div.demo-page-logo.${delay(3)}>BuyItNow</div>
+      <div.demo-page-cart.${delay(4)}.demo-page-hydrated>Cart (0)</div>
     </div>
-    <div.demo-page-product.demo-page-delay-5 class={ "demo-page-loading": progress < 0.4 }>
-      <img.demo-page-image class={ "demo-page-lowres": progress < 0.6 || (input.buffered && input.progress < 1) } src="./product.png" alt=""/>
-      <div.demo-page-description.demo-page-delay-6>
+    <div.demo-page-product.${delay(5)} class={ "demo-page-loading": progress < 0.4 }>
+      $ const hideLowRes =  progress < 0.6 || (input.buffered && input.progress < 1);
+      <div.demo-page-image.demo-page-image-lowres class={ "demo-page-loading": !hideLowRes }/>
+      <img.demo-page-image class={ "demo-page-loading": hideLowRes } src="./product.png" alt=""/>
+      <div.demo-page-description.${delay(6)}>
         <span.demo-page-description-title>Google Home - $79</span>
-        <div.demo-page-description-button.demo-page-delay-7.demo-page-hydrated>Add to Cart</div>
+        <div.demo-page-description-button.${delay(7)}.demo-page-hydrated>Add to Cart</div>
         <span.demo-page-description-text>Hands-free help around the house. Google Home is a smart speaker with the Google Assistant built in. So whenever you need help, it's by your side</span>
       </div>
     </div>
-    <div.demo-page-review.demo-page-delay-8 class={ "demo-page-loading": progress < 0.8 }>
-      <div.demo-page-rating.demo-page-delay-9>
+    <div.demo-page-review.${delay(8)} class={ "demo-page-loading": progress < 0.8 }>
+      <div.demo-page-rating.${delay(9)}>
         ★★★★☆
       </div>
       <span.demo-page-description-text>
@@ -243,8 +272,8 @@ $ const progress = input.buffered ? Math.floor(input.progress / 0.9) : input.pro
         Google has created a nice device that provides music and information by voice control. The microphone is very good and will usually pick up commands from across the room. The speakers sound surprisingly good for such a small device. I wish it had tone control though.
       </span>
     </div>
-    <div.demo-page-review.demo-page-delay-10 class={ "demo-page-loading": progress < 1 }>
-      <div.demo-page-rating.demo-page-delay-11>
+    <div.demo-page-review.${delay(10)} class={ "demo-page-loading": progress < 1 }>
+      <div.demo-page-rating.${delay(11)}>
         ★★★★★
       </div>
       <span.demo-page-description-text>
@@ -252,12 +281,12 @@ $ const progress = input.buffered ? Math.floor(input.progress / 0.9) : input.pro
         Easy setup, great sound for any room size. Adjustable bass and treble. Currently have two paired up for better whole house sound. 
       </span>
     </div>
-    <div.demo-page-footer.demo-page-delay-12 class={ "demo-page-loading": progress < 0.1 }>
-      <div.demo-page-delay-13>About</div>
-      <div.demo-page-delay-14>Security</div>
-      <div.demo-page-delay-15>Policies</div>
-      <div.demo-page-delay-16>Help</div>
-      <div.demo-page-delay-17>Sitemap</div>
+    <div.demo-page-footer.${delay(12)} class={ "demo-page-loading": progress < 0.1 }>
+      <div.demo-page-footlink.${delay(13)}>About</div>
+      <div.demo-page-footlink.${delay(14)}>Security</div>
+      <div.demo-page-footlink.${delay(15)}>Policies</div>
+      <div.demo-page-footlink.${delay(16)}>Help</div>
+      <div.demo-page-footlink.${delay(17)}>Sitemap</div>
     </div>
   </div>
   <if(input.buffered || input.hydrateAll)>