Replace framer-motion with motion

Author: jerboa88

.pnp.cjs

@@ -48,7 +48,6 @@
 		"@tsparticles/shape-square": "^3.7.1",
 		"daisyui": "^4.12.20",
 		"dotenv": "^16.4.7",
-		"framer-motion": "^11.13.3",
 		"gatsby": "^5.14.0",
 		"gatsby-plugin-component-to-image": "^1.0.1",
 		"gatsby-plugin-fontawesome": "^1.3.1",
@@ -65,6 +64,7 @@
 		"gatsby-transformer-remark": "^6.14.0",
 		"isomorphic-dompurify": "^2.18.0",
 		"jsdom": "^24.1.3",
+		"motion": "^11.15.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-hook-form": "^7.54.0"

package.json

@@ -11,7 +11,7 @@ import {
 	useReducedMotion,
 	useSpring,
 	useTransform,
-} from 'framer-motion';
+} from 'motion/react';
 import type { PropsWithChildren } from 'react';
 import { SPRING_TRANSITION_PROPS } from '../config/constants.ts';
 import {
@@ -48,7 +48,7 @@ const HOVER_PROPS = {
 	transition: getTransitionWithoutRestProps(SPRING_TRANSITION_PROPS.transition),
 };
 
-// Remove the restDelta and restSpeed properties from a Framer Motion transition object
+// Remove the restDelta and restSpeed properties from a Motion transition object
 function getTransitionWithoutRestProps(
 	transition: Spring,
 ): AnimationProps['transition'] {

src/components/card.tsx

@@ -10,7 +10,7 @@ import {
 	faTriangleExclamation,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 import { FADE_IN_ANIMATION_PROPS } from '../config/constants.ts';
 import { AlertType } from '../types/components.ts';
 import type { PropsWithClassName } from '../types/components.ts';

src/components/ghost-alert.tsx

@@ -5,7 +5,7 @@
 */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 import { FADE_IN_ANIMATION_PROPS } from '../../config/constants.ts';
 import type { Button } from '../../types/components.ts';
 import { getClassNameProps, isDefined } from '../../utils/other.ts';

src/components/input/base-button.tsx

@@ -4,7 +4,7 @@
 	----------------------------------------------------------------------------------
 */
 
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import type { FieldValues } from 'react-hook-form';
 import {
 	AlertType,

src/components/input/base-input.tsx

@@ -5,7 +5,7 @@
 
 import Botpoison from '@botpoison/browser';
 import { faCircleNotch, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
-import { LayoutGroup, motion } from 'framer-motion';
+import { LayoutGroup, motion } from 'motion/react';
 import { useEffect, useState } from 'react';
 import { type SubmitHandler, useForm, useFormState } from 'react-hook-form';
 import {

src/components/input/contact-form.tsx

@@ -3,7 +3,7 @@
 	---------------------------------------------------------------
 */
 
-import { MotionConfig } from 'framer-motion';
+import { MotionConfig } from 'motion/react';
 import { type PropsWithChildren, StrictMode } from 'react';
 import { SPRING_TRANSITION_PROPS } from '../../config/constants.ts';
 import type { PropsWithClassName } from '../../types/components.ts';

src/components/layout/document-page-layout.tsx

@@ -3,7 +3,7 @@
 	---------------------------------
 */
 
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { TITLE_LAYOUT_ID } from '../../config/constants.ts';
 import { getSiteMetadata } from '../../managers/config.ts';
 import { Breakpoint, type PageSection } from '../../types/components.ts';

src/components/layout/header.tsx

@@ -3,7 +3,7 @@
 	---------------------------------------------------------------
 */
 
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { Heading } from '../../components/text/heading.tsx';
 import { TITLE_LAYOUT_ID } from '../../config/constants.ts';
 import { getSiteMetadata } from '../../managers/config.ts';

src/components/layout/hero-header.tsx

@@ -3,7 +3,7 @@
 	--------------------------------------------------------------
 */
 
-import { MotionConfig } from 'framer-motion';
+import { MotionConfig } from 'motion/react';
 import { type PropsWithChildren, StrictMode, lazy } from 'react';
 import { SPRING_TRANSITION_PROPS } from '../../config/constants.ts';
 import type { PageSection } from '../../types/components.ts';

src/components/layout/page-layout.tsx

@@ -7,7 +7,7 @@ import { loadBasic } from '@tsparticles/basic';
 import type { IOptions, RecursivePartial } from '@tsparticles/engine';
 import Particles, { initParticlesEngine } from '@tsparticles/react';
 import { loadSquareShape } from '@tsparticles/shape-square';
-import { useReducedMotion } from 'framer-motion';
+import { useReducedMotion } from 'motion/react';
 import { memo, useEffect, useState } from 'react';
 import { getTheme } from '../../managers/config.ts';
 import { info } from '../../node/logger.ts';

src/components/layout/particles-background.tsx

@@ -3,7 +3,7 @@
 	----------------------------------------------
 */
 
-import { motion, useInView } from 'framer-motion';
+import { motion, useInView } from 'motion/react';
 import { USE_IN_VIEW_OPTIONS } from '../config/constants.ts';
 import { type PageSection, TooltipPosition } from '../types/components.ts';
 import { getClassNameProps } from '../utils/other.ts';

src/components/tabs.tsx

@@ -56,14 +56,14 @@ export const USE_IN_VIEW_OPTIONS = {
 	margin: '-68px',
 } as const;
 
-// Props for enabling a fade-in animation for a Framer Motion component
+// Props for enabling a fade-in animation for a Motion component
 export const FADE_IN_ANIMATION_PROPS = {
 	initial: FADE_TRANSITION_VARIANTS.hidden,
 	animate: FADE_TRANSITION_VARIANTS.show,
 	exit: FADE_TRANSITION_VARIANTS.hidden,
 } as const;
 
-// Props for setting a spring transition on a Framer Motion component
+// Props for setting a spring transition on a Motion component
 export const SPRING_TRANSITION_PROPS = {
 	transition: {
 		type: 'spring',

src/config/constants.ts

@@ -7,8 +7,8 @@ import {
 	faAngleDown,
 	faArrowUpRightFromSquare,
 } from '@fortawesome/free-solid-svg-icons';
-import { useInView } from 'framer-motion';
 import type { HeadProps, PageProps } from 'gatsby';
+import { useInView } from 'motion/react';
 import { Suspense, lazy, useCallback, useRef } from 'react';
 import { HeroHeader } from '../../components/layout/hero-header.tsx';
 import { PageLayout } from '../../components/layout/page-layout.tsx';

src/templates/page/index.tsx

@@ -3,7 +3,7 @@
  */
 
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import type { LayoutProps } from 'framer-motion';
+import type { LayoutProps } from 'motion/react';
 import type { RefObject } from 'react';
 import type {
 	FieldErrors,
@@ -21,7 +21,7 @@ export interface PropsWithClassName {
 }
 
 /**
- * Props for components that accept optional layout animations using Framer Motion
+ * Props for components that accept optional layout animations using Motion
  */
 export interface PropsWithLayoutAnimations {
 	layout?: LayoutProps['layout'];

src/types/components.ts

@@ -1378,8 +1378,11 @@ type GithubDataSortInput = {
 /** Define schema for custom GithubRepo nodes */
 type GithubRepo = Node & {
   readonly category: ProjectCategory;
+  /** Returns the first child node of type MarkdownRemark or null if there are no children of given type on this node */
   readonly childMarkdownRemark: Maybe<MarkdownRemark>;
   readonly children: ReadonlyArray<Node>;
+  /** Returns all children nodes filtered by type MarkdownRemark */
+  readonly childrenMarkdownRemark: Maybe<ReadonlyArray<Maybe<MarkdownRemark>>>;
   readonly createdAt: Scalars['Date'];
   readonly description: Scalars['String'];
   readonly descriptionHtml: Maybe<Scalars['String']>;
@@ -1453,6 +1456,7 @@ type GithubRepoFieldSelector = {
   readonly category: InputMaybe<ProjectCategoryFieldSelector>;
   readonly childMarkdownRemark: InputMaybe<MarkdownRemarkFieldSelector>;
   readonly children: InputMaybe<NodeFieldSelector>;
+  readonly childrenMarkdownRemark: InputMaybe<MarkdownRemarkFieldSelector>;
   readonly createdAt: InputMaybe<FieldSelectorEnum>;
   readonly description: InputMaybe<FieldSelectorEnum>;
   readonly descriptionHtml: InputMaybe<FieldSelectorEnum>;
@@ -1481,6 +1485,7 @@ type GithubRepoFilterInput = {
   readonly category: InputMaybe<ProjectCategoryFilterInput>;
   readonly childMarkdownRemark: InputMaybe<MarkdownRemarkFilterInput>;
   readonly children: InputMaybe<NodeFilterListInput>;
+  readonly childrenMarkdownRemark: InputMaybe<MarkdownRemarkFilterListInput>;
   readonly createdAt: InputMaybe<DateQueryOperatorInput>;
   readonly description: InputMaybe<StringQueryOperatorInput>;
   readonly descriptionHtml: InputMaybe<StringQueryOperatorInput>;
@@ -1550,6 +1555,7 @@ type GithubRepoSortInput = {
   readonly category: InputMaybe<ProjectCategorySortInput>;
   readonly childMarkdownRemark: InputMaybe<MarkdownRemarkSortInput>;
   readonly children: InputMaybe<NodeSortInput>;
+  readonly childrenMarkdownRemark: InputMaybe<MarkdownRemarkSortInput>;
   readonly createdAt: InputMaybe<SortOrderEnum>;
   readonly description: InputMaybe<SortOrderEnum>;
   readonly descriptionHtml: InputMaybe<SortOrderEnum>;
@@ -2175,6 +2181,7 @@ type Query_githubRepoArgs = {
   category: InputMaybe<ProjectCategoryFilterInput>;
   childMarkdownRemark: InputMaybe<MarkdownRemarkFilterInput>;
   children: InputMaybe<NodeFilterListInput>;
+  childrenMarkdownRemark: InputMaybe<MarkdownRemarkFilterListInput>;
   createdAt: InputMaybe<DateQueryOperatorInput>;
   description: InputMaybe<StringQueryOperatorInput>;
   descriptionHtml: InputMaybe<StringQueryOperatorInput>;