Implemented motion and removed framer motion

package-lock.json

@@ -19,9 +19,9 @@
         "@types/react-syntax-highlighter": "^15.5.13",
         "clsx": "^2.1.1",
         "dotenv": "^16.4.7",
-        "framer-motion": "^12.23.25",
         "katex": "^0.16.19",
         "lucide-react": "^0.554.0",
+        "motion": "^12.28.1",
         "next": "^16.0.7",
         "notion-to-md": "^3.1.3",
         "react": "^19.0.0",
@@ -1587,13 +1587,13 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "12.23.25",
+      "version": "12.28.1",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.25.tgz",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.28.1.tgz",
-      "integrity": "sha512-gUHGl2e4VG66jOcH0JHhuJQr6ZNwrET9g31ZG0xdXzT0CznP7fHX4P8Bcvuc4MiUB90ysNnWX2ukHRIggkl6hQ==",
+      "integrity": "sha512-72GkO7DS4FfcSjf26wx0v+rzkW8Fhn4Djh04aDbuEg7NYG8X8MhJZc6/5weG/YeEgIP+fCo8FS2y1HnXH8k8fQ==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.23.23",
+        "motion-dom": "^12.28.1",
-        "motion-utils": "^12.23.6",
+        "motion-utils": "^12.27.2",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -3265,19 +3265,45 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
-    "node_modules/motion-dom": {
+    "node_modules/motion": {
-      "version": "12.23.23",
+      "version": "12.28.1",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.28.1.tgz",
-      "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
+      "integrity": "sha512-qGq5+6r4IMivHbT2EUhCwxz2NgFBuba3sWDrxcHt06+nYqKMevYJiVh/N90nMRof+vIUpiq8C22ZeOXwkWWiZg==",
       "license": "MIT",
       "dependencies": {
-        "motion-utils": "^12.23.6"
+        "framer-motion": "^12.28.1",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.28.1",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.28.1.tgz",
+      "integrity": "sha512-xqgID69syDvXwFJnUd5bW6ajGUAr/qevRoUe/EqpsXUbVIopyWrAOiwQOhpgVQD+B7Ra60zTdj5gVkmwncebMg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.27.2"
       }
     },
     "node_modules/motion-utils": {
-      "version": "12.23.6",
+      "version": "12.27.2",
-      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.27.2.tgz",
-      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "integrity": "sha512-B55gcoL85Mcdt2IEStY5EEAsrMSVE2sI14xQ/uAdPL+mfQxhKKFaEag9JmfxedJOR4vZpBGoPeC/Gm13I/4g5Q==",
       "license": "MIT"
     },
     "node_modules/ms": {

package.json

@@ -20,9 +20,9 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "clsx": "^2.1.1",
     "dotenv": "^16.4.7",
-    "framer-motion": "^12.23.25",
     "katex": "^0.16.19",
     "lucide-react": "^0.554.0",
+    "motion": "^12.28.1",
     "next": "^16.0.7",
     "notion-to-md": "^3.1.3",
     "react": "^19.0.0",

src/app/about/page.tsx

@@ -22,8 +22,7 @@ import {
   SiDocker,
   SiLinux,
 } from "@icons-pack/react-simple-icons";
-import { cn } from "@/lib/utils";
+import { motion } from "motion/react";
-import { motion } from "framer-motion";
 import {
   staggerContainer,
   fadeInUp,
@@ -33,6 +32,7 @@ import {
   timelineItemRight,
   slowFloat,
 } from "@/lib/animations";
+import { cn } from "@/lib/utils";
 
 const timeline = [
   {

src/app/pricing/page.tsx

@@ -2,7 +2,7 @@
 
 import { Check, ArrowRight, Zap, Crown, Rocket } from "lucide-react";
 import { useState } from "react";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import {
   staggerContainer,
   fadeInUp,

src/components/home/HeroSection.tsx

@@ -2,7 +2,7 @@
 
 import { ArrowRight, Github, Linkedin, Youtube } from "lucide-react";
 import Link from "next/link";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { staggerContainer, fadeInUp, slowFloat } from "@/lib/animations";
 
 export function HeroSection() {

src/components/home/ProjectsSection.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { BookOpen, ExternalLink, Github, Star } from "lucide-react";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { fadeInUp, staggerContainer } from "@/lib/animations";
 
 const projects = [

src/components/home/SkillsSection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { fadeInUp, staggerContainer } from "@/lib/animations";
 
 const skills = [
@@ -21,7 +21,7 @@ const skills = [
       { name: "React", level: 95 },
       { name: "Next.js", level: 85 },
       { name: "Tailwind CSS", level: 80 },
-      { name: "Framer Motion", level: 80 },
+      { name: "Motion", level: 80 },
     ],
   },
   {

src/components/layout/Navbar.tsx

@@ -5,7 +5,7 @@ import { CoffeeIcon, Github, Menu, X } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useState } from "react";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 
 const navLinks = [
   { href: "/", label: "Home" },

src/lib/animations.ts

@@ -1,4 +1,4 @@
-import { Variants } from "framer-motion";
+import { stagger, Variants } from "motion/react";
 
 /**
  * Container
@@ -7,8 +7,7 @@ export const staggerContainer: Variants = {
   hidden: {},
   visible: {
     transition: {
-      staggerChildren: 0.15,
+      delayChildren: stagger(0.15),
-      delayChildren: 0.05,
     },
   },
 };