From 602fc0158527f435e802501b04b854b36ac784b2 Mon Sep 17 00:00:00 2001 From: Leo dev Date: Wed, 21 Jan 2026 17:09:27 +0100 Subject: [PATCH] Implemented motion and removed framer motion --- package-lock.json | 54 ++++++++++++++++++------- package.json | 2 +- src/app/about/page.tsx | 4 +- src/app/pricing/page.tsx | 2 +- src/components/home/HeroSection.tsx | 2 +- src/components/home/ProjectsSection.tsx | 2 +- src/components/home/SkillsSection.tsx | 4 +- src/components/layout/Navbar.tsx | 2 +- src/lib/animations.ts | 5 +-- 9 files changed, 51 insertions(+), 26 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8ca4957..f85c9b1 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.25.tgz", - "integrity": "sha512-gUHGl2e4VG66jOcH0JHhuJQr6ZNwrET9g31ZG0xdXzT0CznP7fHX4P8Bcvuc4MiUB90ysNnWX2ukHRIggkl6hQ==", + "version": "12.28.1", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.28.1.tgz", + "integrity": "sha512-72GkO7DS4FfcSjf26wx0v+rzkW8Fhn4Djh04aDbuEg7NYG8X8MhJZc6/5weG/YeEgIP+fCo8FS2y1HnXH8k8fQ==", "license": "MIT", "dependencies": { - "motion-dom": "^12.23.23", - "motion-utils": "^12.23.6", + "motion-dom": "^12.28.1", + "motion-utils": "^12.27.2", "tslib": "^2.4.0" }, "peerDependencies": { @@ -3265,19 +3265,45 @@ "node": ">=16 || 14 >=14.17" } }, - "node_modules/motion-dom": { - "version": "12.23.23", - "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz", - "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==", + "node_modules/motion": { + "version": "12.28.1", + "resolved": "https://registry.npmjs.org/motion/-/motion-12.28.1.tgz", + "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", - "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz", - "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==", + "version": "12.27.2", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.27.2.tgz", + "integrity": "sha512-B55gcoL85Mcdt2IEStY5EEAsrMSVE2sI14xQ/uAdPL+mfQxhKKFaEag9JmfxedJOR4vZpBGoPeC/Gm13I/4g5Q==", "license": "MIT" }, "node_modules/ms": { diff --git a/package.json b/package.json index 1656a1f..d81eb2e 100644 --- a/package.json +++ b/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", diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index 237813a..996ef04 100644 --- a/src/app/about/page.tsx +++ b/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 "framer-motion"; +import { motion } from "motion/react"; import { staggerContainer, fadeInUp, @@ -33,6 +32,7 @@ import { timelineItemRight, slowFloat, } from "@/lib/animations"; +import { cn } from "@/lib/utils"; const timeline = [ { diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx index 708c53b..9417343 100644 --- a/src/app/pricing/page.tsx +++ b/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, diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx index afb31cf..61daf88 100644 --- a/src/components/home/HeroSection.tsx +++ b/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() { diff --git a/src/components/home/ProjectsSection.tsx b/src/components/home/ProjectsSection.tsx index 6cf1d96..94209cf 100644 --- a/src/components/home/ProjectsSection.tsx +++ b/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 = [ diff --git a/src/components/home/SkillsSection.tsx b/src/components/home/SkillsSection.tsx index 500ddea..e188c29 100644 --- a/src/components/home/SkillsSection.tsx +++ b/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 }, ], }, { diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx index 002c2f8..5ffdd92 100644 --- a/src/components/layout/Navbar.tsx +++ b/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" }, diff --git a/src/lib/animations.ts b/src/lib/animations.ts index f4ee4e0..13180a7 100644 --- a/src/lib/animations.ts +++ b/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: 0.05, + delayChildren: stagger(0.15), }, }, };