♻️ refactor: migrate framer-motion to motion and reduce MMSWE glow layers

Replace framer-motion with motion package (import from "motion/react") across
all 29 files. Also reduce GPU-heavy blur layers in MmsweTypoSection by limiting
ambient glow to only M, S, E letters for better performance.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: lwinmoepaing

bun.lockb

@@ -52,11 +52,11 @@
     "date-fns": "^2.30.0",
     "fast-shuffle": "^6.0.1",
     "firebase": "^12.10.0",
-    "framer-motion": "^12.36.0",
     "husky": "^8.0.3",
     "lexical": "^0.41.0",
     "lint-staged": "^15.0.2",
     "lucide-react": "^0.577.0",
+    "motion": "^12.37.0",
     "next": "16.1.6",
     "next-contentlayer2": "^0.5.8",
     "next-intl": "^4.8.3",

package.json

@@ -8,7 +8,7 @@ import {
   useMotionValue,
   useSpring,
   useTransform,
-} from "framer-motion";
+} from "motion/react";
 import { useRef, useCallback } from "react";
 import Link from "next/link";
 import {

src/app/blog/BlogPageClient.tsx

@@ -3,7 +3,7 @@
 import { useState, useCallback, Suspense } from "react";
 import { useSearchParams } from "next/navigation";
 import { cn } from "@/utils";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { PenLine, Save, Tag, X, Image as ImageIcon, CheckCircle } from "lucide-react";
 import AuthGuard from "@/components/Auth/AuthGuard";
 import UnauthorizedMessage from "@/components/Auth/UnauthorizedMessage";

src/app/blog/edit/BlogEditClient.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback } from "react";
 import { cn } from "@/utils";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import {
   FileText,
   PenLine,

src/app/blog/my-posts/MyPostsClient.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect, Suspense } from "react";
 import { useSearchParams } from "next/navigation";
 import { cn } from "@/utils";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import {
   Calendar,
   ArrowLeft,

src/app/blog/post/BlogPostClient.tsx

@@ -3,7 +3,7 @@
 import { useState, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import { cn } from "@/utils";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { PenLine, Save, Tag, X, Image as ImageIcon } from "lucide-react";
 import AuthGuard from "@/components/Auth/AuthGuard";
 import { ContentEditor } from "@/components/ContentEditor";

src/app/blog/write/BlogWriteClient.tsx

@@ -8,7 +8,7 @@ import {
   useMotionValue,
   useSpring,
   useTransform,
-} from "framer-motion";
+} from "motion/react";
 import { useRef, useCallback } from "react";
 import {
   Users,

src/app/contact-us/ContactPageClient.tsx

@@ -2,7 +2,7 @@
 
 import { cn } from "@/utils";
 import MseLink from "@/components/Ui/MseLink/MseLink";
-import { motion, useInView, AnimatePresence } from "framer-motion";
+import { motion, useInView, AnimatePresence } from "motion/react";
 import { useRef, useState } from "react";
 import {
   BookOpen,

src/app/how-to/HowToPageClient.tsx

@@ -5,7 +5,7 @@ import Container from "@/components/Common/Container/Container";
 import EditorPane from "@/components/ProfileEditor/EditorPane";
 import PreviewPane from "@/components/ProfileEditor/PreviewPane";
 import { useProfileEditor } from "@/hooks/profile/useProfileEditor";
-import { motion, useInView } from "framer-motion";
+import { motion, useInView } from "motion/react";
 import { useRef } from "react";
 import {
   PenTool,