From 583729db530fd679d86ccdf34f8904416828483e Mon Sep 17 00:00:00 2001
From: MOH <info@mohfarawati.de>
Date: Mon, 9 Mar 2026 07:51:31 +0100
Subject: [PATCH] Refine hero backdrop motion

---
 components/layout/hero-motion-backdrop.tsx | 108 +++++++++++++--------
 1 file changed, 70 insertions(+), 38 deletions(-)

diff --git a/components/layout/hero-motion-backdrop.tsx b/components/layout/hero-motion-backdrop.tsx
index 6fec029..2535d47 100644
--- a/components/layout/hero-motion-backdrop.tsx
+++ b/components/layout/hero-motion-backdrop.tsx
@@ -1,50 +1,67 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { motion, useReducedMotion } from "framer-motion";
 
 type HeroMotionBackdropProps = {
   compact?: boolean;
 };
 
 export function HeroMotionBackdrop({ compact = false }: HeroMotionBackdropProps) {
+  const reducedMotion = useReducedMotion();
+
   return (
     <div className="hero-sheet pointer-events-none absolute inset-0 overflow-hidden">
       <div className="hero-sheet-base" />
       <motion.div
-        animate={{
-          x: compact ? [0, 18, -10, 0] : [0, 44, -24, 0],
-          y: compact ? [0, -16, 10, 0] : [0, -34, 18, 0],
-          scale: compact ? [1, 1.03, 0.99, 1] : [1, 1.08, 0.96, 1],
-        }}
+        initial={false}
+        animate={
+          reducedMotion
+            ? { x: 0, y: 0 }
+            : {
+                x: compact ? [0, 18, -10, 0] : [0, 52, -28, 0],
+                y: compact ? [0, -16, 10, 0] : [0, -38, 22, 0],
+                scale: compact ? [1, 1.03, 0.99, 1] : [1, 1.12, 0.95, 1],
+              }
+        }
         transition={{
-          duration: compact ? 18 : 26,
+          duration: compact ? 18 : 20,
           repeat: Number.POSITIVE_INFINITY,
           ease: "easeInOut",
         }}
         className="hero-blob hero-blob-left"
       />
       <motion.div
-        animate={{
-          x: compact ? [0, -14, 8, 0] : [0, -36, 18, 0],
-          y: compact ? [0, 10, -8, 0] : [0, 22, -14, 0],
-          scale: compact ? [1, 0.98, 1.04, 1] : [1, 0.94, 1.08, 1],
-        }}
+        initial={false}
+        animate={
+          reducedMotion
+            ? { x: 0, y: 0 }
+            : {
+                x: compact ? [0, -14, 8, 0] : [0, -42, 22, 0],
+                y: compact ? [0, 10, -8, 0] : [0, 26, -18, 0],
+                scale: compact ? [1, 0.98, 1.04, 1] : [1, 0.92, 1.1, 1],
+              }
+        }
         transition={{
-          duration: compact ? 20 : 28,
+          duration: compact ? 20 : 22,
           repeat: Number.POSITIVE_INFINITY,
           ease: "easeInOut",
         }}
         className="hero-blob hero-blob-right"
       />
       <motion.div
-        animate={{
-          x: compact ? [0, 12, -8, 0] : [0, 26, -14, 0],
-          y: compact ? [0, -6, 8, 0] : [0, -18, 16, 0],
-          scale: compact ? [1, 1.02, 0.98, 1] : [1, 1.06, 0.97, 1],
-          opacity: compact ? [0.36, 0.5, 0.4, 0.36] : [0.34, 0.54, 0.4, 0.34],
-        }}
+        initial={false}
+        animate={
+          reducedMotion
+            ? { x: 0, y: 0, opacity: compact ? 0.36 : 0.38 }
+            : {
+                x: compact ? [0, 12, -8, 0] : [0, 32, -16, 0],
+                y: compact ? [0, -6, 8, 0] : [0, -20, 18, 0],
+                scale: compact ? [1, 1.02, 0.98, 1] : [1, 1.1, 0.96, 1],
+                opacity: compact ? [0.36, 0.5, 0.4, 0.36] : [0.38, 0.6, 0.44, 0.38],
+              }
+        }
         transition={{
-          duration: compact ? 16 : 24,
+          duration: compact ? 16 : 18,
           repeat: Number.POSITIVE_INFINITY,
           ease: "easeInOut",
         }}
@@ -52,12 +69,17 @@ export function HeroMotionBackdrop({ compact = false }: HeroMotionBackdropProps)
       />
 
       <motion.div
-        animate={{
-          opacity: compact ? [0.18, 0.26, 0.2, 0.18] : [0.2, 0.3, 0.22, 0.2],
-          scale: compact ? [1, 1.01, 1, 1] : [1, 1.02, 1, 1],
-        }}
+        initial={false}
+        animate={
+          reducedMotion
+            ? undefined
+            : {
+                opacity: compact ? [0.18, 0.26, 0.2, 0.18] : [0.22, 0.36, 0.24, 0.22],
+                scale: compact ? [1, 1.01, 1, 1] : [1, 1.04, 1, 1],
+              }
+        }
         transition={{
-          duration: compact ? 16 : 22,
+          duration: compact ? 16 : 18,
           repeat: Number.POSITIVE_INFINITY,
           ease: "easeInOut",
         }}
@@ -65,14 +87,19 @@ export function HeroMotionBackdrop({ compact = false }: HeroMotionBackdropProps)
       />
 
       <motion.div
-        animate={{
-          x: compact ? [0, 10, -8, 0] : [0, 18, -14, 0],
-          y: compact ? [0, -8, 6, 0] : [0, -18, 10, 0],
-          rotate: compact ? [0, 2, -1, 0] : [0, 4, -2, 0],
-          opacity: compact ? [0.12, 0.2, 0.14, 0.12] : [0.14, 0.24, 0.16, 0.14],
-        }}
+        initial={false}
+        animate={
+          reducedMotion
+            ? { rotate: 0 }
+            : {
+                x: compact ? [0, 10, -8, 0] : [0, 18, -14, 0],
+                y: compact ? [0, -8, 6, 0] : [0, -18, 10, 0],
+                rotate: compact ? [0, 2, -1, 0] : [0, 4, -2, 0],
+                opacity: compact ? [0.12, 0.2, 0.14, 0.12] : [0.16, 0.28, 0.18, 0.16],
+              }
+        }
         transition={{
-          duration: compact ? 20 : 28,
+          duration: compact ? 20 : 22,
           repeat: Number.POSITIVE_INFINITY,
           ease: "easeInOut",
         }}
@@ -80,13 +107,18 @@ export function HeroMotionBackdrop({ compact = false }: HeroMotionBackdropProps)
       />
 
       <motion.div
-        animate={{
-          backgroundPosition: compact
-            ? ["0 0, 0 0", "40px 24px, 0 0", "0 0, 0 0"]
-            : ["0 0, 0 0", "64px 40px, 0 0", "0 0, 0 0"],
-        }}
+        initial={false}
+        animate={
+          reducedMotion
+            ? undefined
+            : {
+                backgroundPosition: compact
+                  ? ["0 0, 0 0", "40px 24px, 0 0", "0 0, 0 0"]
+                  : ["0 0, 0 0", "84px 52px, 0 0", "0 0, 0 0"],
+              }
+        }
         transition={{
-          duration: compact ? 20 : 28,
+          duration: compact ? 20 : 20,
           repeat: Number.POSITIVE_INFINITY,
           ease: "linear",
         }}