perf: Optimize masonry animation performance and accessibility

Alex Bilozor · claude · Alex Bilozor · commit 957996fb34bd · 2025-09-17T19:22:36.000-07:00
CSS improvements: - Namespaced keyframes to atw-scroll-up to avoid conflicts - Added will-change and backface-visibility for GPU optimization - Improved animation performance to reduce paint jank Accessibility improvements: - Added aria-hidden="true" to decorative image grids - Prevents screen readers from announcing decorative images Visual improvements: - Added staggered animation delay per column (0s, -5s, -10s, -15s) - Creates more natural, desynchronized scrolling effect Addresses all CSS-related PR review feedback. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/app/src/app/globals.css b/app/src/app/globals.css
@@ -186,8 +186,8 @@
     border-color: var(--brand-orange);
   }
 
-  /* Masonry scroll animations */
-  @keyframes scroll-up {
+  /* Masonry scroll animations - namespaced to avoid conflicts */
+  @keyframes atw-scroll-up {
     0% {
       transform: translateY(0);
     }
@@ -197,23 +197,33 @@
   }
 
   .animate-scroll-slow {
-    animation: scroll-up 80s linear infinite;
+    animation: atw-scroll-up 80s linear infinite;
+    will-change: transform;
+    backface-visibility: hidden;
   }
 
   .animate-scroll-medium {
-    animation: scroll-up 70s linear infinite;
+    animation: atw-scroll-up 70s linear infinite;
+    will-change: transform;
+    backface-visibility: hidden;
   }
 
   .animate-scroll-fast {
-    animation: scroll-up 60s linear infinite;
+    animation: atw-scroll-up 60s linear infinite;
+    will-change: transform;
+    backface-visibility: hidden;
   }
 
   .animate-scroll-slower {
-    animation: scroll-up 90s linear infinite;
+    animation: atw-scroll-up 90s linear infinite;
+    will-change: transform;
+    backface-visibility: hidden;
   }
 
   .animate-scroll-faster {
-    animation: scroll-up 50s linear infinite;
+    animation: atw-scroll-up 50s linear infinite;
+    will-change: transform;
+    backface-visibility: hidden;
   }
 
   @media (prefers-reduced-motion: reduce) {
diff --git a/app/src/app/page.tsx b/app/src/app/page.tsx
@@ -301,11 +301,12 @@ function LandingHero({ images }: { images: Image[] }) {
   return (
     <section className="relative w-full h-[80vh] overflow-hidden">
         {/* Desktop Layout - 4 columns */}
-        <div className="absolute inset-0 hidden lg:grid grid-cols-4 gap-1">
+        <div className="absolute inset-0 hidden lg:grid grid-cols-4 gap-1" aria-hidden="true">
           {desktopColumns.map((columnImages, columnIndex) => (
             <div
               key={`desktop-column-${columnIndex}`}
               className={`flex flex-col gap-1 ${animationSpeeds[columnIndex]}`}
+              style={{ animationDelay: `${-(columnIndex * 5)}s` }}
             >
               {/* First set of images */}
               {columnImages.map((image, index) => (
@@ -349,11 +350,12 @@ function LandingHero({ images }: { images: Image[] }) {
         </div>
 
         {/* Tablet Layout - 3 columns */}
-        <div className="absolute inset-0 hidden md:grid lg:hidden grid-cols-3 gap-1">
+        <div className="absolute inset-0 hidden md:grid lg:hidden grid-cols-3 gap-1" aria-hidden="true">
           {tabletColumns.map((columnImages, columnIndex) => (
             <div
               key={`tablet-column-${columnIndex}`}
               className={`flex flex-col gap-1 ${animationSpeeds[columnIndex]}`}
+              style={{ animationDelay: `${-(columnIndex * 5)}s` }}
             >
               {/* First set of images */}
               {columnImages.map((image, index) => (
@@ -397,11 +399,12 @@ function LandingHero({ images }: { images: Image[] }) {
         </div>
 
         {/* Mobile Layout - 2 columns */}
-        <div className="absolute inset-0 grid md:hidden grid-cols-2 gap-1">
+        <div className="absolute inset-0 grid md:hidden grid-cols-2 gap-1" aria-hidden="true">
           {mobileColumns.map((columnImages, columnIndex) => (
             <div
               key={`mobile-column-${columnIndex}`}
               className={`flex flex-col gap-1 ${animationSpeeds[columnIndex]}`}
+              style={{ animationDelay: `${-(columnIndex * 5)}s` }}
             >
               {/* First set of images */}
               {columnImages.map((image, index) => (

Original file line number	Diff line number	Diff line change
`@@ -186,8 +186,8 @@`
`186`	`186`	`border-color: var(--brand-orange);`
`187`	`187`	`}`
`188`	`188`
`189`		`- /* Masonry scroll animations */`
`190`		`- @keyframes scroll-up {`
	`189`	`+ /* Masonry scroll animations - namespaced to avoid conflicts */`
	`190`	`+ @keyframes atw-scroll-up {`
`191`	`191`	`0% {`
`192`	`192`	`transform: translateY(0);`
`193`	`193`	`}`
`@@ -197,23 +197,33 @@`
`197`	`197`	`}`
`198`	`198`
`199`	`199`	`.animate-scroll-slow {`
`200`		`- animation: scroll-up 80s linear infinite;`
	`200`	`+ animation: atw-scroll-up 80s linear infinite;`
	`201`	`+ will-change: transform;`
	`202`	`+ backface-visibility: hidden;`
`201`	`203`	`}`
`202`	`204`
`203`	`205`	`.animate-scroll-medium {`
`204`		`- animation: scroll-up 70s linear infinite;`
	`206`	`+ animation: atw-scroll-up 70s linear infinite;`
	`207`	`+ will-change: transform;`
	`208`	`+ backface-visibility: hidden;`
`205`	`209`	`}`
`206`	`210`
`207`	`211`	`.animate-scroll-fast {`
`208`		`- animation: scroll-up 60s linear infinite;`
	`212`	`+ animation: atw-scroll-up 60s linear infinite;`
	`213`	`+ will-change: transform;`
	`214`	`+ backface-visibility: hidden;`
`209`	`215`	`}`
`210`	`216`
`211`	`217`	`.animate-scroll-slower {`
`212`		`- animation: scroll-up 90s linear infinite;`
	`218`	`+ animation: atw-scroll-up 90s linear infinite;`
	`219`	`+ will-change: transform;`
	`220`	`+ backface-visibility: hidden;`
`213`	`221`	`}`
`214`	`222`
`215`	`223`	`.animate-scroll-faster {`
`216`		`- animation: scroll-up 50s linear infinite;`
	`224`	`+ animation: atw-scroll-up 50s linear infinite;`
	`225`	`+ will-change: transform;`
	`226`	`+ backface-visibility: hidden;`
`217`	`227`	`}`
`218`	`228`
`219`	`229`	`@media (prefers-reduced-motion: reduce) {`