⚡ perf: reduce heavy animations for smoother mobile Safari performance

lwinmoepaing · claude · lwinmoepaing · commit 745069c29763 · 2026-03-16T01:40:21.000+07:00
Trim floating orbs 3→2, particles 8→4, icons 5→3. Remove rotateY 3D
transforms and per-character staggers (use per-word). Convert animated
blur filters to static CSS. Remove cursor-tracking spotlights from
PlatformSection cards (12 motion values). Remove 36+ infinite animation
loops while preserving visual character. Fix Safari iOS overflow-x-hidden
on html element.

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -40,7 +40,7 @@ export default function RootLayout({
     "font-body min-h-screen text-zinc-200 scroll-smooth overflow-x-hidden"
   );
   return (
-    <html lang="en" data-theme="obsidian">
+    <html lang="en" data-theme="obsidian" className="overflow-x-hidden">
       <head>
         <Favicons />
       </head>
diff --git a/src/components/MSE/HomeSection.tsx b/src/components/MSE/HomeSection.tsx
@@ -51,19 +51,16 @@ const FloatingOrb = ({
   duration: number;
 }) => (
   <motion.div
-    className="absolute rounded-full pointer-events-none"
+    className="absolute rounded-full pointer-events-none blur-[40px]"
     style={{
       width: size,
       height: size,
       left: x,
       top: y,
       background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,
-      filter: "blur(40px)",
     }}
     animate={{
       y: [0, -20, 10, -15, 0],
-      x: [0, 10, -8, 12, 0],
-      scale: [1, 1.15, 0.95, 1.1, 1],
       opacity: [0.3, 0.5, 0.25, 0.45, 0.3],
     }}
     transition={{
@@ -196,11 +193,11 @@ const HeroWord = ({
           "bg-gradient-to-r bg-clip-text text-transparent leading-[1.1]",
           gradient
         )}
-        initial={{ y: 80, opacity: 0, filter: "blur(8px)" }}
+        initial={{ y: 80, opacity: 0, filter: "blur(4px)" }}
         animate={
           isInView
             ? { y: 0, opacity: 1, filter: "blur(0px)" }
-            : { y: 80, opacity: 0, filter: "blur(8px)" }
+            : { y: 80, opacity: 0, filter: "blur(4px)" }
         }
         transition={{
           duration: 0.8,
@@ -445,23 +442,13 @@ const HomeSection = () => {
         delay={1}
         duration={10}
       />
-      <FloatingOrb
-        size={180}
-        color="#fb7185"
-        x="85%"
-        y="5%"
-        delay={2}
-        duration={7}
-      />
 
       <PrismLine direction="horizontal" delay={0.5} />
       <PrismLine direction="vertical" delay={0.7} />
 
       <FloatingIcon delay={1} x="12%" y="18%" index={0} />
       <FloatingIcon delay={2.5} x="82%" y="32%" index={1} />
       <FloatingIcon delay={4} x="48%" y="78%" index={2} />
-      <FloatingIcon delay={1.8} x="68%" y="12%" index={3} />
-      <FloatingIcon delay={3.2} x="22%" y="62%" index={4} />
 
       {/* Main content */}
       <div className="relative z-10 flex flex-col gap-12 lg:gap-16">
diff --git a/src/components/MSE/LanguageIconSection.tsx b/src/components/MSE/LanguageIconSection.tsx
@@ -24,10 +24,10 @@ const IconNode = ({
 
   return (
     <motion.div
-      initial={{ opacity: 0, y: 24, scale: 0.85, filter: "blur(6px)" }}
+      initial={{ opacity: 0, y: 24, scale: 0.85 }}
       animate={
         isInView
-          ? { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }
+          ? { opacity: 1, y: 0, scale: 1 }
           : {}
       }
       transition={{
@@ -91,15 +91,13 @@ const IconNode = ({
             />
           </div>
 
-          {/* Top-right accent spark */}
-          <motion.div
+          {/* Top-right accent spark (CSS-only, no infinite JS animation) */}
+          <div
             className="absolute -top-1 -right-1 w-1.5 h-1.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
             style={{
               background: color,
               boxShadow: `0 0 6px ${color}`,
             }}
-            animate={{ scale: [1, 1.5, 1] }}
-            transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
           />
         </div>
 
diff --git a/src/components/MSE/MmsweTypoSection.tsx b/src/components/MSE/MmsweTypoSection.tsx
@@ -19,13 +19,9 @@ const letterConfig = [
 
 const particleData = [
   { color: "#22d3ee", size: 3, x: "8%", y: "15%", delay: 0 },
-  { color: "#a78bfa", size: 2.5, x: "22%", y: "82%", delay: 0.8 },
-  { color: "#fb7185", size: 3.5, x: "52%", y: "8%", delay: 1.6 },
-  { color: "#fbbf24", size: 2, x: "78%", y: "72%", delay: 0.4 },
-  { color: "#22d3ee", size: 3, x: "92%", y: "25%", delay: 1.2 },
-  { color: "#a78bfa", size: 2, x: "38%", y: "88%", delay: 2.0 },
-  { color: "#fb7185", size: 2.5, x: "68%", y: "12%", delay: 0.6 },
-  { color: "#fbbf24", size: 2, x: "15%", y: "55%", delay: 1.4 },
+  { color: "#a78bfa", size: 2.5, x: "52%", y: "8%", delay: 1.6 },
+  { color: "#fb7185", size: 2, x: "78%", y: "72%", delay: 0.4 },
+  { color: "#fbbf24", size: 2, x: "38%", y: "88%", delay: 2.0 },
 ];
 
 const FloatingParticle = ({
@@ -85,16 +81,14 @@ const PrismLetter = ({
         opacity: 0,
         y: 80,
         scale: 0.3,
-        rotateY: 90,
-        filter: "blur(16px)",
+        filter: "blur(6px)",
       }}
       animate={
         isInView
           ? {
               opacity: 1,
               y: 0,
               scale: 1,
-              rotateY: 0,
               filter: "blur(0px)",
             }
           : {}
@@ -159,21 +153,6 @@ const PrismLetter = ({
         }}
       />
 
-      {/* Bottom-left accent spark */}
-      <motion.div
-        className="absolute -bottom-1 left-1 w-1.5 h-1.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
-        style={{
-          background: color,
-          boxShadow: `0 0 6px ${color}`,
-        }}
-        animate={{ scale: [1, 1.3, 1] }}
-        transition={{
-          duration: 1.8,
-          repeat: Infinity,
-          ease: "easeInOut",
-        }}
-      />
-
       {/* Hover edge glow */}
       <div
         className="absolute bottom-1 left-1/4 right-1/4 h-[2px] opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full"
@@ -221,28 +200,26 @@ const subtitleText = "Myanmar Software Engineers";
 
 const SubtitleReveal = ({ isInView }: { isInView: boolean }) => (
   <motion.div
-    className="flex justify-center mt-5 overflow-hidden"
+    className="flex justify-center mt-5 overflow-hidden gap-2"
     initial={{ opacity: 0 }}
     animate={isInView ? { opacity: 1 } : {}}
     transition={{ delay: 1.2 }}
   >
-    <div className="flex">
-      {subtitleText.split("").map((char, i) => (
-        <motion.span
-          key={i}
-          className="font-mono text-[10px] md:text-xs tracking-[0.3em] uppercase text-zinc-600 inline-block"
-          initial={{ opacity: 0, y: 12 }}
-          animate={isInView ? { opacity: 0.5, y: 0 } : {}}
-          transition={{
-            duration: 0.4,
-            delay: 1.3 + i * 0.025,
-            ease: "easeOut",
-          }}
-        >
-          {char === " " ? "\u00A0" : char}
-        </motion.span>
-      ))}
-    </div>
+    {subtitleText.split(" ").map((word, i) => (
+      <motion.span
+        key={i}
+        className="font-mono text-[10px] md:text-xs tracking-[0.3em] uppercase text-zinc-600 inline-block"
+        initial={{ opacity: 0, y: 12 }}
+        animate={isInView ? { opacity: 0.5, y: 0 } : {}}
+        transition={{
+          duration: 0.4,
+          delay: 1.3 + i * 0.1,
+          ease: "easeOut",
+        }}
+      >
+        {word}
+      </motion.span>
+    ))}
   </motion.div>
 );
 
@@ -261,11 +238,8 @@ const MmsweTypoSection = () => {
             <FloatingParticle key={i} {...p} />
           ))}
 
-          {/* Letter row with 3D perspective */}
-          <div
-            className="flex items-baseline justify-center gap-1 md:gap-3"
-            style={{ perspective: "1200px" }}
-          >
+          {/* Letter row */}
+          <div className="flex items-baseline justify-center gap-1 md:gap-3">
             {letterConfig.map(({ char, color }, index) => (
               <PrismLetter
                 key={index}
diff --git a/src/components/MSE/PlatformSection.tsx b/src/components/MSE/PlatformSection.tsx
