From 7f17d95ed6f21b07fee5bd2201e1754611028209 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Fri, 27 Feb 2026 08:18:24 +0300
Subject: [PATCH] fix: replace framer-motion with CSS keyframes in boxes
 background

The boxes background was creating 225 motion.div elements, each running
independent opacity animations via framer-motion JS on the main thread.
This blocked hover transitions on cards, causing visible flickering.

CSS @keyframes run on the compositor thread and have zero main-thread
cost, eliminating the interference with user interactions.
---
 .../ui/backgrounds/background-boxes.tsx       | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/ui/backgrounds/background-boxes.tsx b/src/components/ui/backgrounds/background-boxes.tsx
index 766b6fd..55b0350 100644
--- a/src/components/ui/backgrounds/background-boxes.tsx
+++ b/src/components/ui/backgrounds/background-boxes.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import { motion } from 'framer-motion';
 import { sanitizeColor, clampNumber } from './types';
 
 interface Props {
@@ -37,6 +36,13 @@ export default React.memo(function BackgroundBoxes({ settings }: Props) {
 
   return (
     <div className="absolute inset-0 overflow-hidden">
+      {/* CSS keyframes for box fade — runs on compositor thread, zero main-thread cost */}
+      <style>{`
+        @keyframes boxFade {
+          0%, 100% { opacity: 0; }
+          50% { opacity: 0.15; }
+        }
+      `}</style>
       <div
         style={{
           position: 'absolute',
@@ -49,21 +55,18 @@ export default React.memo(function BackgroundBoxes({ settings }: Props) {
           gridTemplateColumns: `repeat(${cols}, 1fr)`,
           transform: 'skewX(-48deg) skewY(14deg) scale(0.675) translateZ(0)',
           transformOrigin: 'center center',
+          contain: 'strict',
         }}
       >
         {cells.map((cell, i) => (
-          <motion.div
+          <div
             key={i}
             className="border border-slate-700/50"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: [0, 0.15, 0] }}
-            transition={{
-              duration: cell.duration,
-              delay: cell.delay,
-              repeat: Infinity,
-              ease: 'easeInOut',
+            style={{
+              backgroundColor: cell.color,
+              animation: `boxFade ${cell.duration}s ${cell.delay}s ease-in-out infinite`,
+              opacity: 0,
             }}
-            style={{ backgroundColor: cell.color }}
           />
         ))}
       </div>