diff --git a/apps/docs/components/DocsCoverLogo.tsx b/apps/docs/components/DocsCoverLogo.tsx
index eebc87c0092..8ae457c4d49 100644
--- a/apps/docs/components/DocsCoverLogo.tsx
+++ b/apps/docs/components/DocsCoverLogo.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { domAnimation, LazyMotion, m } from 'framer-motion'
+import { domAnimation, LazyMotion, m } from 'motion/react'
 import React, { type ComponentPropsWithoutRef } from 'react'
 
 const DocsCoverLogo = ({ className, ...props }: ComponentPropsWithoutRef<'div'>) => {
diff --git a/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx
index 903373a09b3..4ec6d344e26 100644
--- a/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx
@@ -1,7 +1,7 @@
 import { getCustomContent } from '~/lib/custom-content/getCustomContent'
 import { useIsLoggedIn, useIsUserLoading } from 'common'
-import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion'
 import { X } from 'lucide-react'
+import { AnimatePresence, domAnimation, LazyMotion, m } from 'motion/react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 2dbce4280e0..b462b63e47a 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -74,7 +74,6 @@
     "config": "workspace:*",
     "dev-tools": "workspace:*",
     "eslint-config-supabase": "workspace:*",
-    "framer-motion": "^11.18.2",
     "github-slugger": "^2.0.0",
     "graphql": "^16.10.0",
     "graphql-validation-complexity": "^0.4.2",
@@ -99,6 +98,7 @@
     "mdast-util-to-string": "^3.1.1",
     "micromark-extension-gfm": "^2.0.3",
     "micromark-extension-mdxjs": "^1.0.0",
+    "motion": "catalog:",
     "next": "^15.5.24",
     "next-mdx-remote-client": "^1.1.7",
     "next-plugin-yaml": "^1.0.1",
diff --git a/apps/learn/components/command.tsx b/apps/learn/components/command.tsx
index fdc4064c4fa..dd33a367816 100644
--- a/apps/learn/components/command.tsx
+++ b/apps/learn/components/command.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from 'ui'
 
 import { CommandCopyButton } from './command-copy-button'
diff --git a/apps/learn/package.json b/apps/learn/package.json
index 4ad5ea1b9ce..393896cc20e 100644
--- a/apps/learn/package.json
+++ b/apps/learn/package.json
@@ -19,9 +19,9 @@
   },
   "dependencies": {
     "common": "workspace:*",
-    "framer-motion": "^11.18.2",
     "jotai": "^2.8.0",
     "lucide-react": "*",
+    "motion": "catalog:",
     "next": "catalog:",
     "next-themes": "catalog:",
     "react": "catalog:",
diff --git a/apps/studio/components/grid/components/footer/operations/SaveQueueActionBar.tsx b/apps/studio/components/grid/components/footer/operations/SaveQueueActionBar.tsx
index 5e096526974..355dc3c134d 100644
--- a/apps/studio/components/grid/components/footer/operations/SaveQueueActionBar.tsx
+++ b/apps/studio/components/grid/components/footer/operations/SaveQueueActionBar.tsx
@@ -1,5 +1,5 @@
-import { AnimatePresence, motion } from 'framer-motion'
 import { Eye, MoreVertical, Trash } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { createPortal } from 'react-dom'
 import {
   Button,
diff --git a/apps/studio/components/grid/components/header/Header.tsx b/apps/studio/components/grid/components/header/Header.tsx
index ea341a6c4fa..ea8fc957635 100644
--- a/apps/studio/components/grid/components/header/Header.tsx
+++ b/apps/studio/components/grid/components/header/Header.tsx
@@ -1,7 +1,7 @@
 import { keepPreviousData } from '@tanstack/react-query'
 import { useBreakpoint, useParams } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
 import { ChevronDown, Trash } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { ReactNode, useEffect, useRef, useState } from 'react'
 import { toast } from 'sonner'
 import {
diff --git a/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx b/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx
index ad6ed5b11c3..26ee45f7a66 100644
--- a/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx
+++ b/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx
@@ -1,6 +1,6 @@
 import { IS_PLATFORM } from 'common'
-import { motion } from 'framer-motion'
 import { MoreVertical } from 'lucide-react'
+import { motion } from 'motion/react'
 import {
   Button,
   DropdownMenu,
diff --git a/apps/studio/components/interfaces/App/GitHubConfigDriftBanner.tsx b/apps/studio/components/interfaces/App/GitHubConfigDriftBanner.tsx
index 88b11d93818..82d716b4748 100644
--- a/apps/studio/components/interfaces/App/GitHubConfigDriftBanner.tsx
+++ b/apps/studio/components/interfaces/App/GitHubConfigDriftBanner.tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'common'
-import { AnimatePresence } from 'framer-motion'
+import { AnimatePresence } from 'motion/react'
 import Link from 'next/link'
 
 import { HeaderBanner } from '../Organization/HeaderBanner'
diff --git a/apps/studio/components/interfaces/AuditLogs/AuditLogsSelectionHeader.tsx b/apps/studio/components/interfaces/AuditLogs/AuditLogsSelectionHeader.tsx
index 1a490671513..30db3672ca6 100644
--- a/apps/studio/components/interfaces/AuditLogs/AuditLogsSelectionHeader.tsx
+++ b/apps/studio/components/interfaces/AuditLogs/AuditLogsSelectionHeader.tsx
@@ -1,6 +1,6 @@
 import type { Table } from '@tanstack/react-table'
-import { AnimatePresence, motion } from 'framer-motion'
 import { Copy, X } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { toast } from 'sonner'
 import { copyToClipboard } from 'ui'
 
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/SpamValidation.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/SpamValidation.tsx
index 6ba73ea4962..cdf6e10e485 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/SpamValidation.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/SpamValidation.tsx
@@ -1,4 +1,4 @@
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import { CardContent, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
 
diff --git a/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.test.tsx b/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.test.tsx
index 8c268801283..4353ea49a46 100644
--- a/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.test.tsx
+++ b/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.test.tsx
@@ -13,7 +13,7 @@ import {
 import { customRender } from '@/tests/lib/custom-render'
 import { addAPIMock } from '@/tests/lib/msw'
 
-// FormMessage animates via framer-motion, which relies on the Web Animations API.
+// FormMessage animates via Motion, which relies on the Web Animations API.
 mockAnimationsApi()
 
 vi.mock('@/lib/constants', async (importOriginal) => {
diff --git a/apps/studio/components/interfaces/BranchManagement/WorkflowLogsCard.tsx b/apps/studio/components/interfaces/BranchManagement/WorkflowLogsCard.tsx
index c65e3ed9847..30910105e64 100644
--- a/apps/studio/components/interfaces/BranchManagement/WorkflowLogsCard.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/WorkflowLogsCard.tsx
@@ -1,5 +1,5 @@
-import { motion } from 'framer-motion'
 import { CircleDotDashed, GitMerge, X } from 'lucide-react'
+import { motion } from 'motion/react'
 import { useEffect, useRef } from 'react'
 import { Button, Card, CardContent, CardHeader, CardTitle } from 'ui'
 
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.test.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.test.tsx
index bbfcd09a7c6..461fa0d43b7 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.test.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.test.tsx
@@ -139,7 +139,7 @@ vi.mock('common', async (importOriginal) => {
   return { ...actual, useParams: () => ({ ref: 'project-ref' }) }
 })
 
-vi.mock('framer-motion', () => ({
+vi.mock('motion/react', () => ({
   AnimatePresence: ({ children }: PropsWithChildren) => children,
   motion: { div: ({ children }: PropsWithChildren) => <div>{children}</div> },
 }))
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
index 88d57dedf69..3714612ae6e 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
@@ -1,8 +1,8 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
 import { Loader2 } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { RefObject, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx b/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx
index f45cc9c68a4..ac680505521 100644
--- a/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import { useEffect, useRef, useState, type ReactNode } from 'react'
 import { useForm, useWatch } from 'react-hook-form'
 import { CloudProvider } from 'shared-data'
diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementRestartRequiredSection.tsx b/apps/studio/components/interfaces/DiskManagement/DiskManagementRestartRequiredSection.tsx
index 92955865826..b349d2adad9 100644
--- a/apps/studio/components/interfaces/DiskManagement/DiskManagementRestartRequiredSection.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/DiskManagementRestartRequiredSection.tsx
@@ -1,5 +1,5 @@
-import { AnimatePresence, motion } from 'framer-motion'
 import { RotateCcw } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { DialogSection, WarningIcon } from 'ui'
 
 interface DiskMangementRestartRequiredSectionProps {
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx
index fe0548e246c..274ccc460f3 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import { useEffect } from 'react'
 import { UseFormReturn, useWatch } from 'react-hook-form'
 import {
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/BillingChangeBadge.tsx b/apps/studio/components/interfaces/DiskManagement/ui/BillingChangeBadge.tsx
index 61b1e5bc135..c4e4b004d97 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/BillingChangeBadge.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/BillingChangeBadge.tsx
@@ -1,5 +1,5 @@
-import { AnimatePresence, motion } from 'framer-motion'
 import { ChevronRight } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { Badge, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 import { formatCurrency } from '@/lib/helpers'
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeRecommendationSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeRecommendationSection.tsx
index 302830f12a3..aa4a7a79e5d 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeRecommendationSection.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeRecommendationSection.tsx
@@ -1,4 +1,4 @@
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import { ReactNode } from 'react'
 import { UseFormReturn, useWatch } from 'react-hook-form'
 import { COMPUTE_BASELINE_IOPS, COMPUTE_MAX_IOPS } from 'shared-data'
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskCountdownRadial.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskCountdownRadial.tsx
index 053b28352e9..4fded1fac11 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/DiskCountdownRadial.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskCountdownRadial.tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import { useEffect, useState } from 'react'
 import { Card, CardContent } from 'ui'
 
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskManagementReadReplicas.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskManagementReadReplicas.tsx
index dcd2ae660e1..d504f6e8f14 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/DiskManagementReadReplicas.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskManagementReadReplicas.tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import { Alert, AlertDescription, AlertTitle, InfoIcon } from 'ui'
 
 import { BillingChangeBadge } from './BillingChangeBadge'
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx
index 8f5950d4d25..7d4dc6cecea 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx
@@ -1,7 +1,7 @@
 import MotionNumber from '@number-flow/react'
 import { useParams } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
 import { Info } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { useTheme } from 'next-themes'
 import { useMemo } from 'react'
 import { UseFormReturn, useWatch } from 'react-hook-form'
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeRecommendationSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeRecommendationSection.tsx
index ab237f10b8e..687c1cc854d 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeRecommendationSection.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeRecommendationSection.tsx
@@ -1,4 +1,4 @@
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import { ReactNode } from 'react'
 import { UseFormReturn, useWatch } from 'react-hook-form'
 import { Admonition } from 'ui-patterns/Admonition'
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/FormMessage.tsx b/apps/studio/components/interfaces/DiskManagement/ui/FormMessage.tsx
index 81cb935bfbd..5f85dcdf746 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/FormMessage.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/FormMessage.tsx
@@ -1,4 +1,4 @@
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import { Admonition } from 'ui-patterns/Admonition'
 
 interface FormMessageProps {
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/NoticeBar.tsx b/apps/studio/components/interfaces/DiskManagement/ui/NoticeBar.tsx
index 0ce27960ff8..95c2cec6f2b 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/NoticeBar.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/NoticeBar.tsx
@@ -1,4 +1,4 @@
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import { cn } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
 import { type AdmonitionProps } from 'ui-patterns/Admonition/Admonition.types'
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx
index 867315fea75..cacfa03ca8a 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx
@@ -1,4 +1,4 @@
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import Link from 'next/link'
 import { AlertDescription, AlertTitle, buttonVariants, cn } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx
index 2d9d4dea79a..3e4e79cfc40 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx
@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import { useEffect, useState } from 'react'
 import { UseFormReturn, useWatch } from 'react-hook-form'
 import {
diff --git a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTab.test.tsx b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTab.test.tsx
index 426e516a4d8..25a2a547042 100644
--- a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTab.test.tsx
+++ b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTab.test.tsx
@@ -18,7 +18,7 @@ vi.mock('../Landing/Integrations.constants', () => ({
   ],
 }))
 
-vi.mock('framer-motion', async (importOriginal) => {
+vi.mock('motion/react', async (importOriginal) => {
   const actual = (await importOriginal()) as any
   return {
     ...actual,
diff --git a/apps/studio/components/interfaces/Integrations/Integration/MarkdownContent.tsx b/apps/studio/components/interfaces/Integrations/Integration/MarkdownContent.tsx
index 105b7ac30e4..2095c3f07fd 100644
--- a/apps/studio/components/interfaces/Integrations/Integration/MarkdownContent.tsx
+++ b/apps/studio/components/interfaces/Integrations/Integration/MarkdownContent.tsx
@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import { useEffect, useState } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx
index 0a9d4f65061..1f31885a926 100644
--- a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx
+++ b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { IS_PLATFORM, useFlag, useParams } from 'common'
-import { AnimatePresence } from 'framer-motion'
 import { AlertCircle, RotateCw, Timer } from 'lucide-react'
+import { AnimatePresence } from 'motion/react'
 import { useMemo, useRef, useState } from 'react'
 import { toast } from 'sonner'
 import {
diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/signing-key-row.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/signing-key-row.tsx
index f962d84bfa6..4c08161246d 100644
--- a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/signing-key-row.tsx
+++ b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/signing-key-row.tsx
@@ -1,6 +1,5 @@
 import { components } from 'api-types'
 import dayjs from 'dayjs'
-import { motion } from 'framer-motion'
 import {
   CircleArrowDown,
   CircleArrowUp,
@@ -12,6 +11,7 @@ import {
   Timer,
   Trash2,
 } from 'lucide-react'
+import { motion } from 'motion/react'
 import {
   Badge,
   Button,
diff --git a/apps/studio/components/interfaces/LogDrains/AnimatedLogos.tsx b/apps/studio/components/interfaces/LogDrains/AnimatedLogos.tsx
index e12e7734fbe..bd702294714 100644
--- a/apps/studio/components/interfaces/LogDrains/AnimatedLogos.tsx
+++ b/apps/studio/components/interfaces/LogDrains/AnimatedLogos.tsx
@@ -1,6 +1,6 @@
-import { AnimatePresence, motion } from 'framer-motion'
 import { Axiom, Datadog, Grafana, Last9, Otlp, Sentry } from 'icons'
 import { BracesIcon, Cloud, Server } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { useEffect, useState } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx
index 8193eba8a86..a97f34d8aac 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx
@@ -1,5 +1,5 @@
-import { motion, type Variants } from 'framer-motion'
 import { Check } from 'lucide-react'
+import { motion, type Variants } from 'motion/react'
 import { PricingInformation } from 'shared-data'
 import { Button, cn } from 'ui'
 
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx
index f10474ccab3..045f1f77ce3 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx
@@ -1,6 +1,6 @@
-import { motion, type Variants } from 'framer-motion'
 import { isArray } from 'lodash'
 import { Check } from 'lucide-react'
+import { motion, type Variants } from 'motion/react'
 import type { PricingInformation } from 'shared-data'
 import { Button, cn } from 'ui'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.tsx
index bc97fa672d5..7dcbffb6fb3 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.tsx
@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import { useRouter } from 'next/router'
 import { plans as subscriptionsPlans } from 'shared-data/plans'
 
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.ts b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.ts
index cc1d4e294a8..bb6c751ccd3 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.ts
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.ts
@@ -1,4 +1,4 @@
-import type { Variants } from 'framer-motion'
+import type { Variants } from 'motion/react'
 
 const CARD_VARIANTS: Variants = {
   hidden: { opacity: 0, y: 8 },
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdatePanelShell.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdatePanelShell.tsx
index 329269f2bd3..142f1089bfb 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdatePanelShell.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdatePanelShell.tsx
@@ -1,5 +1,5 @@
-import { motion } from 'framer-motion'
 import { ArrowLeft, ExternalLink } from 'lucide-react'
+import { motion } from 'motion/react'
 import type { ReactNode } from 'react'
 import { Button } from 'ui'
 
diff --git a/apps/studio/components/interfaces/Organization/HeaderBanner.tsx b/apps/studio/components/interfaces/Organization/HeaderBanner.tsx
index 9e8b25208ab..332c837239d 100644
--- a/apps/studio/components/interfaces/Organization/HeaderBanner.tsx
+++ b/apps/studio/components/interfaces/Organization/HeaderBanner.tsx
@@ -1,5 +1,5 @@
-import { AnimatePresence, motion } from 'framer-motion'
 import { XIcon } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import type { ReactNode } from 'react'
 import { Button, cn, CriticalIcon, WarningIcon } from 'ui'
 
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/AnimatedCursors.tsx b/apps/studio/components/interfaces/Realtime/Inspector/AnimatedCursors.tsx
index 29afd32fecf..5bc69ac4b59 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/AnimatedCursors.tsx
+++ b/apps/studio/components/interfaces/Realtime/Inspector/AnimatedCursors.tsx
@@ -1,5 +1,5 @@
-import { motion } from 'framer-motion'
 import { MousePointer2 } from 'lucide-react'
+import { motion } from 'motion/react'
 import { useEffect, useState } from 'react'
 
 export const AnimatedCursors = () => {
diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx
index 932d2ca5fe6..249b8c8b448 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { AnimatePresence, motion } from 'framer-motion'
 import { Loader2 } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { useState } from 'react'
 import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
diff --git a/apps/studio/components/interfaces/Sidebar.tsx b/apps/studio/components/interfaces/Sidebar.tsx
index ec7b8db062b..b64a41b823e 100644
--- a/apps/studio/components/interfaces/Sidebar.tsx
+++ b/apps/studio/components/interfaces/Sidebar.tsx
@@ -1,8 +1,8 @@
 import { LOCAL_STORAGE_KEYS, useFlag, useIsMFAEnabled, useParams } from 'common'
-import { AnimatePresence, motion, MotionProps } from 'framer-motion'
 import { Home } from 'icons'
 import { isUndefined } from 'lodash'
 import { Blocks, Boxes, ChartArea, PanelLeftDashed, Receipt, Settings, Users } from 'lucide-react'
+import { AnimatePresence, motion, MotionProps } from 'motion/react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { ComponentProps, ComponentPropsWithoutRef, FC, ReactNode, useEffect } from 'react'
diff --git a/apps/studio/components/interfaces/SignIn/SignUpForm.tsx b/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
index 9b9ae4cfcb7..8dda979e629 100644
--- a/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
@@ -1,7 +1,7 @@
 import HCaptcha from '@hcaptcha/react-hcaptcha'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { motion } from 'framer-motion'
 import { Eye, EyeOff } from 'lucide-react'
+import { motion } from 'motion/react'
 import { useRouter } from 'next/router'
 import { parseAsString, useQueryStates } from 'nuqs'
 import { useRef, useState } from 'react'
diff --git a/apps/studio/components/interfaces/Storage/BucketFilePickerDialog/BucketFilePickerColumn.tsx b/apps/studio/components/interfaces/Storage/BucketFilePickerDialog/BucketFilePickerColumn.tsx
index 632268ac572..9b0f7e770f8 100644
--- a/apps/studio/components/interfaces/Storage/BucketFilePickerDialog/BucketFilePickerColumn.tsx
+++ b/apps/studio/components/interfaces/Storage/BucketFilePickerDialog/BucketFilePickerColumn.tsx
@@ -2,9 +2,9 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'
 import { useDebounce } from '@uidotdev/usehooks'
 import { useParams } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
 import { compact, get, sum, uniqBy } from 'lodash'
 import { Upload } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { DragEventHandler, useCallback, useMemo, useRef, useState } from 'react'
 import { toast } from 'sonner'
 import { Checkbox, cn } from 'ui'
diff --git a/apps/studio/components/interfaces/Storage/FilesBuckets/BucketVersioningFields/BucketVersioningFields.tsx b/apps/studio/components/interfaces/Storage/FilesBuckets/BucketVersioningFields/BucketVersioningFields.tsx
index 544ce50c1a1..97f715ca14b 100644
--- a/apps/studio/components/interfaces/Storage/FilesBuckets/BucketVersioningFields/BucketVersioningFields.tsx
+++ b/apps/studio/components/interfaces/Storage/FilesBuckets/BucketVersioningFields/BucketVersioningFields.tsx
@@ -1,4 +1,4 @@
-import { AnimatePresence } from 'framer-motion'
+import { AnimatePresence } from 'motion/react'
 import { useWatch, type UseFormReturn } from 'react-hook-form'
 import { Badge, DialogSection, DialogSectionSeparator, FormControl, FormField, Switch } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
diff --git a/apps/studio/components/interfaces/Storage/FilesBuckets/BucketVersioningFields/LifecyclePolicySection.tsx b/apps/studio/components/interfaces/Storage/FilesBuckets/BucketVersioningFields/LifecyclePolicySection.tsx
index b83642aa73f..ebf38c9b389 100644
--- a/apps/studio/components/interfaces/Storage/FilesBuckets/BucketVersioningFields/LifecyclePolicySection.tsx
+++ b/apps/studio/components/interfaces/Storage/FilesBuckets/BucketVersioningFields/LifecyclePolicySection.tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'common'
-import { AnimatePresence } from 'framer-motion'
+import { AnimatePresence } from 'motion/react'
 import { useEffect, useRef } from 'react'
 import type { UseFormReturn } from 'react-hook-form'
 import {
diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerColumn.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerColumn.tsx
index a023d1a0088..ebbe8262e91 100644
--- a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerColumn.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerColumn.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { AnimatePresence, motion } from 'framer-motion'
 import { get, noop, sum, uniqBy } from 'lodash'
 import { ChevronsDown, ChevronsUp, Copy, Eye, FolderPlus, Upload } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { toast } from 'sonner'
 import {
diff --git a/apps/studio/components/interfaces/Support/AIAssistantOption.tsx b/apps/studio/components/interfaces/Support/AIAssistantOption.tsx
index 1357c2268fd..1e7df2683f5 100644
--- a/apps/studio/components/interfaces/Support/AIAssistantOption.tsx
+++ b/apps/studio/components/interfaces/Support/AIAssistantOption.tsx
@@ -1,5 +1,5 @@
-import { AnimatePresence, motion } from 'framer-motion'
 import { MessageSquare } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import Link from 'next/link'
 import { useCallback, useEffect, useState } from 'react'
 import { AiIconAnimation, Button } from 'ui'
diff --git a/apps/studio/components/interfaces/Support/DiscordCTACard.tsx b/apps/studio/components/interfaces/Support/DiscordCTACard.tsx
index bc9d1a6167f..6beb6ffecb1 100644
--- a/apps/studio/components/interfaces/Support/DiscordCTACard.tsx
+++ b/apps/studio/components/interfaces/Support/DiscordCTACard.tsx
@@ -1,4 +1,4 @@
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import Link from 'next/link'
 import router from 'next/router'
 import { useEffect, useState } from 'react'
diff --git a/apps/studio/components/interfaces/Support/IncidentAdmonition.tsx b/apps/studio/components/interfaces/Support/IncidentAdmonition.tsx
index 52ab0dee0f6..cae79d7d889 100644
--- a/apps/studio/components/interfaces/Support/IncidentAdmonition.tsx
+++ b/apps/studio/components/interfaces/Support/IncidentAdmonition.tsx
@@ -1,5 +1,5 @@
-import { AnimatePresence, motion } from 'framer-motion'
 import { ExternalLink } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import Link from 'next/link'
 import { Button } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
diff --git a/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx b/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
index f38379ae4f1..016686c0572 100644
--- a/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
+++ b/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
@@ -1,8 +1,8 @@
 // End of third-party imports
 
 import { useParams } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
 import { Check, ChevronsUpDown, ExternalLink } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import Link from 'next/link'
 import type { UseFormReturn } from 'react-hook-form'
 import { toast } from 'sonner'
diff --git a/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.constants.tsx b/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.constants.tsx
index bfac9c16336..aa7947cb73f 100644
--- a/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.constants.tsx
+++ b/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.constants.tsx
@@ -1,5 +1,5 @@
-import { motion } from 'framer-motion'
 import { MessageSquare, NotebookText } from 'lucide-react'
+import { motion } from 'motion/react'
 import { type ComponentType, type PropsWithChildren } from 'react'
 import { cn } from 'ui'
 import { InnerSideBarFilters, InnerSideBarFilterSearchInput } from 'ui-patterns/InnerSideMenu'
diff --git a/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx b/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx
index 970c86cc7b1..4270f9a652f 100644
--- a/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx
+++ b/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx
@@ -1,5 +1,5 @@
-import { AnimatePresence, motion } from 'framer-motion'
 import { Home, MessageCirclePlus, NotebookText, Plus, SquareCode } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { ComponentProps, ReactNode, useEffect, useEffectEvent, useState } from 'react'
 import {
   cn,
diff --git a/apps/studio/components/layouts/ExplorerLayout/ExplorerNavHome.tsx b/apps/studio/components/layouts/ExplorerLayout/ExplorerNavHome.tsx
index 3e42cbcda54..1bc68aa29ce 100644
--- a/apps/studio/components/layouts/ExplorerLayout/ExplorerNavHome.tsx
+++ b/apps/studio/components/layouts/ExplorerLayout/ExplorerNavHome.tsx
@@ -1,6 +1,6 @@
 import { useParams } from 'common'
-import { motion } from 'framer-motion'
 import { ChevronRight, Plus, SquareCode } from 'lucide-react'
+import { motion } from 'motion/react'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
 import {
diff --git a/apps/studio/components/layouts/InterstitialLayout.tsx b/apps/studio/components/layouts/InterstitialLayout.tsx
index a2b54fbc78b..b3eab9435b9 100644
--- a/apps/studio/components/layouts/InterstitialLayout.tsx
+++ b/apps/studio/components/layouts/InterstitialLayout.tsx
@@ -1,5 +1,5 @@
-import { motion, useReducedMotion } from 'framer-motion'
 import { ArrowRightLeft } from 'lucide-react'
+import { motion, useReducedMotion } from 'motion/react'
 import type { PropsWithChildren, ReactNode } from 'react'
 import { Card, CardContent, CardHeader, cn } from 'ui'
 
diff --git a/apps/studio/components/layouts/Navigation/FloatingMobileToolbar/FloatingMobileToolbar.tsx b/apps/studio/components/layouts/Navigation/FloatingMobileToolbar/FloatingMobileToolbar.tsx
index da5b728cf82..2646a52a052 100644
--- a/apps/studio/components/layouts/Navigation/FloatingMobileToolbar/FloatingMobileToolbar.tsx
+++ b/apps/studio/components/layouts/Navigation/FloatingMobileToolbar/FloatingMobileToolbar.tsx
@@ -1,6 +1,6 @@
 import { useParams, useViewport } from 'common'
-import { AnimatePresence } from 'framer-motion'
 import { Menu, Search, X } from 'lucide-react'
+import { AnimatePresence } from 'motion/react'
 import { useRef } from 'react'
 import { Button, cn, KeyboardShortcut } from 'ui'
 
diff --git a/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx b/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
index 2b423b72b5b..be7363171f1 100644
--- a/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
+++ b/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
@@ -1,8 +1,8 @@
 import { useDebounce } from '@uidotdev/usehooks'
 import { LOCAL_STORAGE_KEYS, useParams } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
 import { toPng } from 'html-to-image'
 import { Camera, CircleCheck, Image as ImageIcon, Upload, X } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { useRouter } from 'next/router'
 import { ChangeEvent, useEffect, useRef, useState } from 'react'
 import { toast } from 'sonner'
diff --git a/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx b/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx
index 6668e5a79b9..0aede59b03d 100644
--- a/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx
+++ b/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx
@@ -1,7 +1,7 @@
 import { useParams } from 'common'
 import dayjs from 'dayjs'
-import { AnimatePresence, motion } from 'framer-motion'
 import { ChevronLeft } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { ReactNode, useMemo } from 'react'
diff --git a/apps/studio/components/layouts/ProjectLayout/index.test.tsx b/apps/studio/components/layouts/ProjectLayout/index.test.tsx
index f2603a560d3..b2606bd21e0 100644
--- a/apps/studio/components/layouts/ProjectLayout/index.test.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/index.test.tsx
@@ -88,7 +88,7 @@ vi.mock('common', () => ({
   useFlag: () => false,
 }))
 
-vi.mock('framer-motion', () => ({
+vi.mock('motion/react', () => ({
   AnimatePresence: ({ children }: { children: ReactNode }) => <>{children}</>,
   motion: {
     div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
diff --git a/apps/studio/components/layouts/ProjectLayout/index.tsx b/apps/studio/components/layouts/ProjectLayout/index.tsx
index 2a432a54e51..53317d665e0 100644
--- a/apps/studio/components/layouts/ProjectLayout/index.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/index.tsx
@@ -1,6 +1,6 @@
 import { LOCAL_STORAGE_KEYS, mergeRefs, useFlag, useParams } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
 import { XIcon } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import {
diff --git a/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.tsx b/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.tsx
index b3b96dc883b..97c3512d029 100644
--- a/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.tsx
+++ b/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.tsx
@@ -1,5 +1,5 @@
 import { LOCAL_STORAGE_KEYS, useFlag, useParams } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import { useRouter } from 'next/router'
 import { PropsWithChildren, useMemo } from 'react'
 
diff --git a/apps/studio/components/layouts/Tabs/RecentItems.tsx b/apps/studio/components/layouts/Tabs/RecentItems.tsx
index f2649b32f3b..6d86cb15509 100644
--- a/apps/studio/components/layouts/Tabs/RecentItems.tsx
+++ b/apps/studio/components/layouts/Tabs/RecentItems.tsx
@@ -1,6 +1,6 @@
 import { useParams } from 'common'
 import dayjs from 'dayjs'
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import Link from 'next/link'
 
 import { useEditorType } from '../editors/EditorsLayout.hooks'
diff --git a/apps/studio/components/layouts/Tabs/SortableTab.tsx b/apps/studio/components/layouts/Tabs/SortableTab.tsx
index 9d437c76491..af604094d36 100644
--- a/apps/studio/components/layouts/Tabs/SortableTab.tsx
+++ b/apps/studio/components/layouts/Tabs/SortableTab.tsx
@@ -1,7 +1,7 @@
 import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
-import { AnimatePresence, motion } from 'framer-motion'
 import { X } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { useMemo, type KeyboardEvent } from 'react'
 import { cn, TabsTrigger } from 'ui'
 
diff --git a/apps/studio/components/layouts/Tabs/TabPreview.tsx b/apps/studio/components/layouts/Tabs/TabPreview.tsx
index ef5825f49ba..373f07cefce 100644
--- a/apps/studio/components/layouts/Tabs/TabPreview.tsx
+++ b/apps/studio/components/layouts/Tabs/TabPreview.tsx
@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 
 import { EntityTypeIcon } from '@/components/ui/EntityTypeIcon'
 import { useTabsStateSnapshot } from '@/state/tabs'
diff --git a/apps/studio/components/layouts/Tabs/Tabs.tsx b/apps/studio/components/layouts/Tabs/Tabs.tsx
index 36839849c4c..830b64d2683 100644
--- a/apps/studio/components/layouts/Tabs/Tabs.tsx
+++ b/apps/studio/components/layouts/Tabs/Tabs.tsx
@@ -8,8 +8,8 @@ import {
 } from '@dnd-kit/core'
 import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable'
 import { useParams } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
 import { Plus, X } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { useRouter } from 'next/router'
 import { ReactNode, useState } from 'react'
 import {
diff --git a/apps/studio/components/ui/AIAssistantPanel/AssistantChat.tsx b/apps/studio/components/ui/AIAssistantPanel/AssistantChat.tsx
index e00a3da892c..7c396f12c5d 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AssistantChat.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AssistantChat.tsx
@@ -3,8 +3,8 @@ import { useChat } from '@ai-sdk/react'
 import { lastAssistantMessageIsCompleteWithApprovalResponses } from 'ai'
 import { LOCAL_STORAGE_KEYS, useFlag } from 'common'
 import { useParams, useSearchParamsShallow } from 'common/hooks'
-import { AnimatePresence, motion, useReducedMotion } from 'framer-motion'
 import { Eraser, Pencil, X } from 'lucide-react'
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import { Button, cn, KeyboardShortcut } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
diff --git a/apps/studio/components/ui/AIAssistantPanel/AssistantChatForm.tsx b/apps/studio/components/ui/AIAssistantPanel/AssistantChatForm.tsx
index 0c3a2d1600b..b0991cbab34 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AssistantChatForm.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AssistantChatForm.tsx
@@ -1,6 +1,6 @@
 import { useBreakpoint } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
 import { ArrowUp, Loader2, Square } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { ChangeEvent, FormEvent, forwardRef, KeyboardEvent, memo, ReactNode, useRef } from 'react'
 import { Button, cn, ExpandingTextArea } from 'ui'
 
@@ -56,7 +56,7 @@ export interface FormProps {
   submitLabel?: string
   /**
    * An additional action shown beside the main submit button, transitioned in/out with
-   * framer-motion. Pass undefined to hide it (e.g. when the input doesn't match its condition).
+   * Motion. Pass undefined to hide it (e.g. when the input doesn't match its condition).
    */
   secondaryAction?: {
     label: string
diff --git a/apps/studio/components/ui/AIEditor/index.tsx b/apps/studio/components/ui/AIEditor/index.tsx
index b9b8cb8ec23..81dad4f113e 100644
--- a/apps/studio/components/ui/AIEditor/index.tsx
+++ b/apps/studio/components/ui/AIEditor/index.tsx
@@ -1,6 +1,6 @@
 import { Monaco, OnMount } from '@monaco-editor/react'
-import { AnimatePresence, motion } from 'framer-motion'
 import type { editor as monacoEditor } from 'monaco-editor'
+import { AnimatePresence, motion } from 'motion/react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { toast } from 'sonner'
 import { KeyboardShortcut } from 'ui'
diff --git a/apps/studio/components/ui/BannerStack/BannerStack.tsx b/apps/studio/components/ui/BannerStack/BannerStack.tsx
index 28420784fe6..9ff52a91ed5 100644
--- a/apps/studio/components/ui/BannerStack/BannerStack.tsx
+++ b/apps/studio/components/ui/BannerStack/BannerStack.tsx
@@ -1,4 +1,4 @@
-import { AnimatePresence, motion, useReducedMotion } from 'framer-motion'
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
 import { useState } from 'react'
 
 import { useBannerStack } from './BannerStackProvider'
diff --git a/apps/studio/components/ui/BannerStack/Banners/BannerExplorer.tsx b/apps/studio/components/ui/BannerStack/Banners/BannerExplorer.tsx
index 212efb9b3bc..13b17cbd6df 100644
--- a/apps/studio/components/ui/BannerStack/Banners/BannerExplorer.tsx
+++ b/apps/studio/components/ui/BannerStack/Banners/BannerExplorer.tsx
@@ -1,5 +1,5 @@
 import { LOCAL_STORAGE_KEYS } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import { useEffect } from 'react'
 import { Badge, Button } from 'ui'
 
diff --git a/apps/studio/components/ui/FeatureBanner.tsx b/apps/studio/components/ui/FeatureBanner.tsx
index b6f0550b82d..7e37e670b99 100644
--- a/apps/studio/components/ui/FeatureBanner.tsx
+++ b/apps/studio/components/ui/FeatureBanner.tsx
@@ -1,6 +1,6 @@
 import { useParams } from 'common/hooks'
-import { HTMLMotionProps, motion } from 'framer-motion'
 import { X } from 'lucide-react'
+import { HTMLMotionProps, motion } from 'motion/react'
 import { ReactNode } from 'react'
 import { Button, cn } from 'ui'
 
diff --git a/apps/studio/components/ui/FileExplorerAndEditor/index.tsx b/apps/studio/components/ui/FileExplorerAndEditor/index.tsx
index c9a5cbebd1c..baeff77050b 100644
--- a/apps/studio/components/ui/FileExplorerAndEditor/index.tsx
+++ b/apps/studio/components/ui/FileExplorerAndEditor/index.tsx
@@ -1,6 +1,6 @@
 import { IS_PLATFORM } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
 import { Plus } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { useCallback, useEffect, useState } from 'react'
 import { toast } from 'sonner'
 import { Button, cn, flattenTree, INodeRendererProps, TreeView } from 'ui'
diff --git a/apps/studio/components/ui/FormSectionCollapse.tsx b/apps/studio/components/ui/FormSectionCollapse.tsx
index 9bf0a6818cc..8897c591545 100644
--- a/apps/studio/components/ui/FormSectionCollapse.tsx
+++ b/apps/studio/components/ui/FormSectionCollapse.tsx
@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import type { ReactNode } from 'react'
 
 /** Wrap the parent in `<AnimatePresence initial={false}>` to avoid animating on first paint. */
diff --git a/apps/studio/package.json b/apps/studio/package.json
index 0ef65f11522..a5bb605aec5 100644
--- a/apps/studio/package.json
+++ b/apps/studio/package.json
@@ -112,7 +112,6 @@
     "dev-tools": "workspace:*",
     "effect": "4.0.0-rc.112",
     "file-saver": "^2.0.5",
-    "framer-motion": "^11.18.2",
     "fuse.js": "^7.4.0",
     "generate-password-browser": "^1.1.0",
     "gqlmin": "^0.3.1",
@@ -131,6 +130,7 @@
     "markdown-table": "^3.0.3",
     "mime-db": "^1.53.0",
     "monaco-editor": "catalog:",
+    "motion": "catalog:",
     "next": "catalog:",
     "next-themes": "catalog:",
     "nuqs": "2.7.1",
diff --git a/apps/ui-library/components/command.tsx b/apps/ui-library/components/command.tsx
index 53f3cedda0f..bcff7921870 100644
--- a/apps/ui-library/components/command.tsx
+++ b/apps/ui-library/components/command.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from 'ui'
 
 import { CommandCopyButton } from './command-copy-button'
diff --git a/apps/ui-library/package.json b/apps/ui-library/package.json
index 92bce342e9a..9cd476c5932 100644
--- a/apps/ui-library/package.json
+++ b/apps/ui-library/package.json
@@ -37,11 +37,11 @@
     "common": "workspace:*",
     "common-tags": "^1.8.2",
     "eslint-config-supabase": "workspace:*",
-    "framer-motion": "^11.18.2",
     "icons": "workspace:*",
     "jotai": "^2.8.0",
     "lucide-react": "*",
     "monaco-editor": "catalog:",
+    "motion": "catalog:",
     "next": "catalog:",
     "next-themes": "catalog:",
     "openai": "^5.9.0",
diff --git a/apps/www/app/(home)/_components/CommunitySectionV2.tsx b/apps/www/app/(home)/_components/CommunitySectionV2.tsx
index 8f86731d8e7..59630241557 100644
--- a/apps/www/app/(home)/_components/CommunitySectionV2.tsx
+++ b/apps/www/app/(home)/_components/CommunitySectionV2.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { topTweets } from 'shared-data/tweets'
diff --git a/apps/www/app/(home)/_components/CustomerStoriesSection.tsx b/apps/www/app/(home)/_components/CustomerStoriesSection.tsx
index a06c3b8eb21..807be7f322d 100644
--- a/apps/www/app/(home)/_components/CustomerStoriesSection.tsx
+++ b/apps/www/app/(home)/_components/CustomerStoriesSection.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import Link from 'next/link'
 import { useState } from 'react'
 import { cn } from 'ui'
diff --git a/apps/www/app/(home)/_components/DashboardFeaturesSection.tsx b/apps/www/app/(home)/_components/DashboardFeaturesSection.tsx
index dca41fefd6f..a1088508cd5 100644
--- a/apps/www/app/(home)/_components/DashboardFeaturesSection.tsx
+++ b/apps/www/app/(home)/_components/DashboardFeaturesSection.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import BrowserFrame from '~/components/BrowserFrame'
-import { AnimatePresence, motion, useInView } from 'framer-motion'
+import { AnimatePresence, motion, useInView } from 'motion/react'
 import { useTheme } from 'next-themes'
 import React, { useRef, useState } from 'react'
 import { cn } from 'ui'
diff --git a/apps/www/app/(home)/_components/FrameworksSectionClient.tsx b/apps/www/app/(home)/_components/FrameworksSectionClient.tsx
index 608b7eccd52..085359d6d5f 100644
--- a/apps/www/app/(home)/_components/FrameworksSectionClient.tsx
+++ b/apps/www/app/(home)/_components/FrameworksSectionClient.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import Link from 'next/link'
 import { useState } from 'react'
 import { cn } from 'ui'
diff --git a/apps/www/app/(home)/_components/OpenSourceSection.tsx b/apps/www/app/(home)/_components/OpenSourceSection.tsx
index 4271c8a3276..9502ea15b51 100644
--- a/apps/www/app/(home)/_components/OpenSourceSection.tsx
+++ b/apps/www/app/(home)/_components/OpenSourceSection.tsx
@@ -2,7 +2,7 @@
 
 import staticContent from '.generated/staticContent/_index.json'
 import { useSendTelemetryEvent } from '~/lib/telemetry'
-import { useInView } from 'framer-motion'
+import { useInView } from 'motion/react'
 import Link from 'next/link'
 import { useRef } from 'react'
 import { Button } from 'ui'
diff --git a/apps/www/app/(products)/auth/_components/ApiSectionClient.tsx b/apps/www/app/(products)/auth/_components/ApiSectionClient.tsx
index ad30e36cbee..73fdf8aa75f 100644
--- a/apps/www/app/(products)/auth/_components/ApiSectionClient.tsx
+++ b/apps/www/app/(products)/auth/_components/ApiSectionClient.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn'
-import { AnimatePresence, motion, useInView } from 'framer-motion'
 import { ChevronDown, Globe, KeyRound, LogIn, UserPlus } from 'lucide-react'
+import { AnimatePresence, motion, useInView } from 'motion/react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/www/app/(products)/auth/_components/FeaturesSection.tsx b/apps/www/app/(products)/auth/_components/FeaturesSection.tsx
index 83f66e8b78b..8c7939a9af6 100644
--- a/apps/www/app/(products)/auth/_components/FeaturesSection.tsx
+++ b/apps/www/app/(products)/auth/_components/FeaturesSection.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn'
-import { AnimatePresence, motion } from 'framer-motion'
 import { Link as LinkIcon } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import Image from 'next/image'
 import { useEffect, useRef, useState } from 'react'
 import { cn } from 'ui'
diff --git a/apps/www/app/(products)/auth/_components/RLSSectionClient.tsx b/apps/www/app/(products)/auth/_components/RLSSectionClient.tsx
index af4d867dce3..cacdc70648f 100644
--- a/apps/www/app/(products)/auth/_components/RLSSectionClient.tsx
+++ b/apps/www/app/(products)/auth/_components/RLSSectionClient.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn'
-import { AnimatePresence, motion, useInView } from 'framer-motion'
+import { AnimatePresence, motion, useInView } from 'motion/react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/www/app/(products)/compute/_components/ComputeVisual.tsx b/apps/www/app/(products)/compute/_components/ComputeVisual.tsx
index c2f4922c572..7944b815b9b 100644
--- a/apps/www/app/(products)/compute/_components/ComputeVisual.tsx
+++ b/apps/www/app/(products)/compute/_components/ComputeVisual.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import SectionContainerWithCn from 'components/Layouts/SectionContainerWithCn'
-import { AnimatePresence, motion, useReducedMotion } from 'framer-motion'
 import { Database } from 'icons'
 import type { LucideIcon } from 'lucide-react'
 import { Bot, User } from 'lucide-react'
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
 import { useCallback, useEffect, useId, useRef, useState } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/www/app/(products)/compute/_components/DeploySection.tsx b/apps/www/app/(products)/compute/_components/DeploySection.tsx
index 3c2aadb192b..f53420e461f 100644
--- a/apps/www/app/(products)/compute/_components/DeploySection.tsx
+++ b/apps/www/app/(products)/compute/_components/DeploySection.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn'
-import { AnimatePresence, motion, useInView, useReducedMotion } from 'framer-motion'
+import { AnimatePresence, motion, useInView, useReducedMotion } from 'motion/react'
 import Link from 'next/link'
 import { useEffect, useRef, useState } from 'react'
 import { Button } from 'ui'
diff --git a/apps/www/app/(products)/database/_components/ApiSectionClient.tsx b/apps/www/app/(products)/database/_components/ApiSectionClient.tsx
index 10ffae261a4..d29e163cfec 100644
--- a/apps/www/app/(products)/database/_components/ApiSectionClient.tsx
+++ b/apps/www/app/(products)/database/_components/ApiSectionClient.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn'
-import { AnimatePresence, motion, useInView } from 'framer-motion'
 import { ArrowDownUp, ChevronDown, Filter, Plus, Search } from 'lucide-react'
+import { AnimatePresence, motion, useInView } from 'motion/react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/www/app/(products)/database/_components/FeaturesSection.tsx b/apps/www/app/(products)/database/_components/FeaturesSection.tsx
index d85dc3ee53a..3d35d695383 100644
--- a/apps/www/app/(products)/database/_components/FeaturesSection.tsx
+++ b/apps/www/app/(products)/database/_components/FeaturesSection.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn'
-import { AnimatePresence, motion } from 'framer-motion'
 import { Key } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { useEffect, useRef, useState } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/www/app/(products)/database/_components/SqlEditorSection.tsx b/apps/www/app/(products)/database/_components/SqlEditorSection.tsx
index fe8683b4008..80ad0406932 100644
--- a/apps/www/app/(products)/database/_components/SqlEditorSection.tsx
+++ b/apps/www/app/(products)/database/_components/SqlEditorSection.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn'
-import { AnimatePresence, motion, useInView } from 'framer-motion'
 import { Code, FileDown, Heart, MousePointerClick } from 'lucide-react'
+import { AnimatePresence, motion, useInView } from 'motion/react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/www/app/(products)/database/_components/TableEditorSection.tsx b/apps/www/app/(products)/database/_components/TableEditorSection.tsx
index af733dc5fc6..9efbc0d0f3a 100644
--- a/apps/www/app/(products)/database/_components/TableEditorSection.tsx
+++ b/apps/www/app/(products)/database/_components/TableEditorSection.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn'
-import { AnimatePresence, motion, useInView } from 'framer-motion'
 import { FileDown, Link2, Table, TableProperties } from 'lucide-react'
+import { AnimatePresence, motion, useInView } from 'motion/react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/www/app/(products)/database/_components/VisualDemo.tsx b/apps/www/app/(products)/database/_components/VisualDemo.tsx
index db2e18f1105..bf140f64b33 100644
--- a/apps/www/app/(products)/database/_components/VisualDemo.tsx
+++ b/apps/www/app/(products)/database/_components/VisualDemo.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn'
-import { AnimatePresence, motion } from 'framer-motion'
 import { ChevronDown, Filter, Key, List } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { useEffect, useRef, useState } from 'react'
 import { Button } from 'ui'
 
diff --git a/apps/www/app/(products)/edge-functions/_components/CTASection.tsx b/apps/www/app/(products)/edge-functions/_components/CTASection.tsx
index a13b23887ec..9d5800ae9cc 100644
--- a/apps/www/app/(products)/edge-functions/_components/CTASection.tsx
+++ b/apps/www/app/(products)/edge-functions/_components/CTASection.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn'
-import { AnimatePresence, motion, useInView } from 'framer-motion'
+import { AnimatePresence, motion, useInView } from 'motion/react'
 import { useEffect, useRef, useState } from 'react'
 import { Button } from 'ui'
 
diff --git a/apps/www/app/(products)/edge-functions/_components/IntegratesSectionClient.tsx b/apps/www/app/(products)/edge-functions/_components/IntegratesSectionClient.tsx
index 56dddfac327..1744e5c6318 100644
--- a/apps/www/app/(products)/edge-functions/_components/IntegratesSectionClient.tsx
+++ b/apps/www/app/(products)/edge-functions/_components/IntegratesSectionClient.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn'
-import { AnimatePresence, motion, useInView } from 'framer-motion'
 import { Database, HardDrive, Shield, Webhook, Zap } from 'lucide-react'
+import { AnimatePresence, motion, useInView } from 'motion/react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/www/app/(products)/realtime/_components/ApiSectionClient.tsx b/apps/www/app/(products)/realtime/_components/ApiSectionClient.tsx
index 86a16180b91..763daa5af99 100644
--- a/apps/www/app/(products)/realtime/_components/ApiSectionClient.tsx
+++ b/apps/www/app/(products)/realtime/_components/ApiSectionClient.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn'
-import { AnimatePresence, motion, useInView } from 'framer-motion'
 import { Database, Radio, Users } from 'lucide-react'
+import { AnimatePresence, motion, useInView } from 'motion/react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/www/app/(products)/realtime/_components/FeaturesSection.tsx b/apps/www/app/(products)/realtime/_components/FeaturesSection.tsx
index 1f31b8f6938..412d814243c 100644
--- a/apps/www/app/(products)/realtime/_components/FeaturesSection.tsx
+++ b/apps/www/app/(products)/realtime/_components/FeaturesSection.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn'
-import { motion } from 'framer-motion'
 import { Key } from 'lucide-react'
+import { motion } from 'motion/react'
 import { useEffect, useRef, useState } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/www/app/(products)/storage/_components/ApiSectionClient.tsx b/apps/www/app/(products)/storage/_components/ApiSectionClient.tsx
index 3809e5106b8..bcf2e9a1972 100644
--- a/apps/www/app/(products)/storage/_components/ApiSectionClient.tsx
+++ b/apps/www/app/(products)/storage/_components/ApiSectionClient.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn'
-import { AnimatePresence, motion, useInView } from 'framer-motion'
 import { ArrowRightLeft, ChevronDown, Download, List, Upload } from 'lucide-react'
+import { AnimatePresence, motion, useInView } from 'motion/react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/www/app/(products)/storage/_components/PermissionsSectionClient.tsx b/apps/www/app/(products)/storage/_components/PermissionsSectionClient.tsx
index 57af15fd110..7562daa5999 100644
--- a/apps/www/app/(products)/storage/_components/PermissionsSectionClient.tsx
+++ b/apps/www/app/(products)/storage/_components/PermissionsSectionClient.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn'
-import { AnimatePresence, motion, useInView } from 'framer-motion'
+import { AnimatePresence, motion, useInView } from 'motion/react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/www/app/blog/BlogHero.tsx b/apps/www/app/blog/BlogHero.tsx
index 4f63439d718..2c00ad20c00 100644
--- a/apps/www/app/blog/BlogHero.tsx
+++ b/apps/www/app/blog/BlogHero.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import FeaturedThumb from 'components/Blog/FeaturedThumb'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
diff --git a/apps/www/app/partners/catalog/[slug]/PartnerCatalogDetail.tsx b/apps/www/app/partners/catalog/[slug]/PartnerCatalogDetail.tsx
index f98bf9969a0..577520bf67a 100644
--- a/apps/www/app/partners/catalog/[slug]/PartnerCatalogDetail.tsx
+++ b/apps/www/app/partners/catalog/[slug]/PartnerCatalogDetail.tsx
@@ -6,8 +6,8 @@ import { CH } from '@code-hike/mdx/components'
 import DefaultLayout from '~/components/Layouts/Default'
 import { type ListingDetail, type Partner } from '~/types/partners'
 import { useBreakpoint } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
 import { ArrowUpRight, ChevronLeft, ExternalLink } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import type { SerializeResult as MDXRemoteSerializeResult } from 'next-mdx-remote-client'
 import { MDXClient } from 'next-mdx-remote-client/csr'
 import Image from 'next/image'
diff --git a/apps/www/app/state-of-startups/StateOfStartups2026Content.tsx b/apps/www/app/state-of-startups/StateOfStartups2026Content.tsx
index 892f97c71b3..cf1b72c0e6a 100644
--- a/apps/www/app/state-of-startups/StateOfStartups2026Content.tsx
+++ b/apps/www/app/state-of-startups/StateOfStartups2026Content.tsx
@@ -3,7 +3,7 @@
 import DefaultLayout from '~/components/Layouts/Default'
 import pageData from '~/data/surveys/state-of-startups-2026'
 import { useSendTelemetryEvent } from '~/lib/telemetry'
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import Link from 'next/link'
 import { forwardRef, useEffect, useRef, useState, type RefObject } from 'react'
 import { Button, cn } from 'ui'
diff --git a/apps/www/app/state-of-startups/components/StateOfStartupsAuroraHeader.tsx b/apps/www/app/state-of-startups/components/StateOfStartupsAuroraHeader.tsx
index 3ddf412a970..b0b4cb4ca3c 100644
--- a/apps/www/app/state-of-startups/components/StateOfStartupsAuroraHeader.tsx
+++ b/apps/www/app/state-of-startups/components/StateOfStartupsAuroraHeader.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useReducedMotion } from 'framer-motion'
+import { useReducedMotion } from 'motion/react'
 import { useTheme } from 'next-themes'
 import { useEffect, useState } from 'react'
 import UnicornScene from 'unicornstudio-react/next'
diff --git a/apps/www/app/state-of-startups/components/SurveyChart.tsx b/apps/www/app/state-of-startups/components/SurveyChart.tsx
index 6d7d7311e27..e749985d911 100644
--- a/apps/www/app/state-of-startups/components/SurveyChart.tsx
+++ b/apps/www/app/state-of-startups/components/SurveyChart.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import CodeBlock from '~/components/CodeBlock/CodeBlock'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import { useMemo, useState } from 'react'
 import { Button } from 'ui'
 
diff --git a/apps/www/app/state-of-startups/components/YearToggle.tsx b/apps/www/app/state-of-startups/components/YearToggle.tsx
index 5aa2955f4df..ec6279ddc6c 100644
--- a/apps/www/app/state-of-startups/components/YearToggle.tsx
+++ b/apps/www/app/state-of-startups/components/YearToggle.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import { cn } from 'ui'
 
 import { SURVEY_YEARS, useYear, type SurveyYear } from './year-context'
diff --git a/apps/www/app/state-of-startups/register/RegisterContent.tsx b/apps/www/app/state-of-startups/register/RegisterContent.tsx
index e02aee634c0..2d25368c32c 100644
--- a/apps/www/app/state-of-startups/register/RegisterContent.tsx
+++ b/apps/www/app/state-of-startups/register/RegisterContent.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { motion, useReducedMotion } from 'framer-motion'
 import { ArrowRight } from 'lucide-react'
+import { motion, useReducedMotion } from 'motion/react'
 import dynamic from 'next/dynamic'
 import Image from 'next/image'
 import Link from 'next/link'
diff --git a/apps/www/components/AIDemo/DotGrid.tsx b/apps/www/components/AIDemo/DotGrid.tsx
index bbcc267198f..4a0662c41c0 100644
--- a/apps/www/components/AIDemo/DotGrid.tsx
+++ b/apps/www/components/AIDemo/DotGrid.tsx
@@ -1,5 +1,5 @@
+import { motion } from 'motion/react'
 import React from 'react'
-import { motion } from 'framer-motion'
 
 interface DotGridProps {
   rows: number
diff --git a/apps/www/components/AIDemo/Panel.tsx b/apps/www/components/AIDemo/Panel.tsx
index 613384a2ce1..5899eb96627 100644
--- a/apps/www/components/AIDemo/Panel.tsx
+++ b/apps/www/components/AIDemo/Panel.tsx
@@ -1,5 +1,5 @@
 // components/AIDemoPanel.tsx
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import Image from 'next/image'
 import errorGif from 'public/images/ai/error.gif'
 import { useEffect, useRef, useState } from 'react'
diff --git a/apps/www/components/AIDemo/SqlSnippet.tsx b/apps/www/components/AIDemo/SqlSnippet.tsx
index f096ee9cae8..2e6025ab733 100644
--- a/apps/www/components/AIDemo/SqlSnippet.tsx
+++ b/apps/www/components/AIDemo/SqlSnippet.tsx
@@ -1,5 +1,5 @@
-import { motion } from 'framer-motion'
 import { Code, DatabaseIcon, Play } from 'lucide-react'
+import { motion } from 'motion/react'
 import { useEffect, useState } from 'react'
 import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
 import { Button, ChartContainer, ChartTooltip, ChartTooltipContent, cn, SQL_ICON } from 'ui'
diff --git a/apps/www/components/Blog/BlogFilters.tsx b/apps/www/components/Blog/BlogFilters.tsx
index c330e5cbc7b..b91ec5108c7 100644
--- a/apps/www/components/Blog/BlogFilters.tsx
+++ b/apps/www/components/Blog/BlogFilters.tsx
@@ -3,9 +3,9 @@
 import { type BlogView } from 'app/blog/blog-view'
 import { useBreakpoint } from 'common'
 import BlogViewToggle from 'components/Blog/BlogViewToggle'
-import { motion } from 'framer-motion'
 import { startCase } from 'lib/helpers'
 import { ChevronDown, X as CloseIcon, Search } from 'lucide-react'
+import { motion } from 'motion/react'
 import Link from 'next/link'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useEffect, useState } from 'react'
diff --git a/apps/www/components/Blog/BlogViewToggle.tsx b/apps/www/components/Blog/BlogViewToggle.tsx
index 770e03beb1c..f293f33b564 100644
--- a/apps/www/components/Blog/BlogViewToggle.tsx
+++ b/apps/www/components/Blog/BlogViewToggle.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { setBlogViewCookie, type BlogView } from 'app/blog/blog-view'
-import { motion } from 'framer-motion'
 import { AlignJustify, Grid } from 'lucide-react'
+import { motion } from 'motion/react'
 import { cn } from 'ui'
 
 export default function BlogViewToggle({
diff --git a/apps/www/components/CustomerStories/CustomersFilters.tsx b/apps/www/components/CustomerStories/CustomersFilters.tsx
index bc08d9a439a..21cbc1ec368 100644
--- a/apps/www/components/CustomerStories/CustomersFilters.tsx
+++ b/apps/www/components/CustomerStories/CustomersFilters.tsx
@@ -2,9 +2,9 @@
 
 import type PostTypes from '~/types/post'
 import { useBreakpoint } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
 import { startCase } from 'lib/helpers'
 import { ChevronDown, X as CloseIcon } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { useRouter } from 'next/compat/router'
 import { usePathname } from 'next/navigation'
 import { useEffect, useState } from 'react'
diff --git a/apps/www/components/EnterpriseFormQuotes.tsx b/apps/www/components/EnterpriseFormQuotes.tsx
index 3d1e1e548cc..f34da4bc2e5 100644
--- a/apps/www/components/EnterpriseFormQuotes.tsx
+++ b/apps/www/components/EnterpriseFormQuotes.tsx
@@ -1,4 +1,4 @@
-import { AnimatePresence, motion, useAnimation } from 'framer-motion'
+import { AnimatePresence, motion, useAnimation } from 'motion/react'
 import { useEffect, useState, type ReactNode } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/www/components/Events/EventsFilters.tsx b/apps/www/components/Events/EventsFilters.tsx
index fb852432e89..e23bd3044f8 100644
--- a/apps/www/components/Events/EventsFilters.tsx
+++ b/apps/www/components/Events/EventsFilters.tsx
@@ -1,7 +1,7 @@
 import { useBreakpoint } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
 import { startCase } from 'lib/helpers'
 import { ChevronDown, X as CloseIcon, Search } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { useRouter } from 'next/compat/router'
 import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
diff --git a/apps/www/components/Hero/HeroFrameworks.tsx b/apps/www/components/Hero/HeroFrameworks.tsx
index f6b50c7b4b9..4fa476f0b21 100644
--- a/apps/www/components/Hero/HeroFrameworks.tsx
+++ b/apps/www/components/Hero/HeroFrameworks.tsx
@@ -1,10 +1,11 @@
+import { EASE_IN, EASE_OUT } from '~/lib/animations'
+import { useSendTelemetryEvent } from '~/lib/telemetry'
 import { useBreakpoint } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import Link from 'next/link'
 import { useState } from 'react'
 import { cn } from 'ui'
-import { EASE_IN, EASE_OUT } from '~/lib/animations'
-import { useSendTelemetryEvent } from '~/lib/telemetry'
+
 import SectionContainer from '../Layouts/SectionContainer'
 
 type Framework = {
diff --git a/apps/www/components/ImageGrid.tsx b/apps/www/components/ImageGrid.tsx
index 73fd6e500a9..30339f1c4c3 100644
--- a/apps/www/components/ImageGrid.tsx
+++ b/apps/www/components/ImageGrid.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { cn } from 'ui'
diff --git a/apps/www/components/LaunchWeek/11/Releases/BuildStage.tsx b/apps/www/components/LaunchWeek/11/Releases/BuildStage.tsx
index b2141cda262..a6fb69f96ad 100644
--- a/apps/www/components/LaunchWeek/11/Releases/BuildStage.tsx
+++ b/apps/www/components/LaunchWeek/11/Releases/BuildStage.tsx
@@ -1,6 +1,6 @@
 import { buildDays as days } from '~/components/LaunchWeek/11/Releases/data'
 import SectionContainer from '~/components/Layouts/SectionContainer'
-import { motion, useInView } from 'framer-motion'
+import { motion, useInView } from 'motion/react'
 import React, { FC } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/www/components/LaunchWeek/11/Releases/components/AdventCard.tsx b/apps/www/components/LaunchWeek/11/Releases/components/AdventCard.tsx
index 04abca107f9..65a91123c17 100644
--- a/apps/www/components/LaunchWeek/11/Releases/components/AdventCard.tsx
+++ b/apps/www/components/LaunchWeek/11/Releases/components/AdventCard.tsx
@@ -1,10 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react'
+import { useBreakpoint } from 'common'
+import { motion } from 'motion/react'
 import Link from 'next/link'
-import { motion } from 'framer-motion'
-import Tilt from 'vanilla-tilt'
+import React, { useEffect, useRef, useState } from 'react'
 import { useWindowSize } from 'react-use'
 import { cn } from 'ui'
-import { useBreakpoint } from 'common'
+import Tilt from 'vanilla-tilt'
 
 import { AdventDay } from '../data'
 import { AdventLink } from '../data/lw11_build_stage'
diff --git a/apps/www/components/LaunchWeek/12/Releases/BuildStage.tsx b/apps/www/components/LaunchWeek/12/Releases/BuildStage.tsx
index 34f870bb40e..edc63d1c0df 100644
--- a/apps/www/components/LaunchWeek/12/Releases/BuildStage.tsx
+++ b/apps/www/components/LaunchWeek/12/Releases/BuildStage.tsx
@@ -1,6 +1,6 @@
 import { buildDays as days } from '~/components/LaunchWeek/12/Releases/data'
 import SectionContainer from '~/components/Layouts/SectionContainer'
-import { motion, useInView } from 'framer-motion'
+import { motion, useInView } from 'motion/react'
 import React, { FC } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/www/components/LaunchWeek/12/Releases/components/BuildCard.tsx b/apps/www/components/LaunchWeek/12/Releases/components/BuildCard.tsx
index 9d872e9a0ef..20bea6cd4f4 100644
--- a/apps/www/components/LaunchWeek/12/Releases/components/BuildCard.tsx
+++ b/apps/www/components/LaunchWeek/12/Releases/components/BuildCard.tsx
@@ -1,10 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react'
+import { useBreakpoint } from 'common'
+import { motion } from 'motion/react'
 import Link from 'next/link'
-import { motion } from 'framer-motion'
-import Tilt from 'vanilla-tilt'
+import React, { useEffect, useRef, useState } from 'react'
 import { useWindowSize } from 'react-use'
 import { cn } from 'ui'
-import { useBreakpoint } from 'common'
+import Tilt from 'vanilla-tilt'
 
 import { AdventDay } from '../data'
 import { AdventLink } from '../data/lw12_build_stage'
diff --git a/apps/www/components/LaunchWeek/13/Releases/BuildStage.tsx b/apps/www/components/LaunchWeek/13/Releases/BuildStage.tsx
index f9c3cfa539d..39c48db8f4f 100644
--- a/apps/www/components/LaunchWeek/13/Releases/BuildStage.tsx
+++ b/apps/www/components/LaunchWeek/13/Releases/BuildStage.tsx
@@ -1,6 +1,6 @@
 import { buildDays as days } from '~/components/LaunchWeek/13/Releases/data'
 import SectionContainer from '~/components/Layouts/SectionContainer'
-import { motion, useInView } from 'framer-motion'
+import { motion, useInView } from 'motion/react'
 import React, { FC } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/www/components/LaunchWeek/13/Releases/components/BuildCard.tsx b/apps/www/components/LaunchWeek/13/Releases/components/BuildCard.tsx
index b62d411201d..adccfee0526 100644
--- a/apps/www/components/LaunchWeek/13/Releases/components/BuildCard.tsx
+++ b/apps/www/components/LaunchWeek/13/Releases/components/BuildCard.tsx
@@ -1,10 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react'
+import { useBreakpoint } from 'common'
+import { motion } from 'motion/react'
 import Link from 'next/link'
-import { motion } from 'framer-motion'
-import Tilt from 'vanilla-tilt'
+import React, { useEffect, useRef, useState } from 'react'
 import { useWindowSize } from 'react-use'
 import { cn } from 'ui'
-import { useBreakpoint } from 'common'
+import Tilt from 'vanilla-tilt'
 
 import { AdventDay } from '../data'
 import { AdventLink } from '../data/lw13_build_stage'
diff --git a/apps/www/components/LaunchWeek/14/Releases/BuildStage.tsx b/apps/www/components/LaunchWeek/14/Releases/BuildStage.tsx
index b2fbe8e20fd..69b85a43c55 100644
--- a/apps/www/components/LaunchWeek/14/Releases/BuildStage.tsx
+++ b/apps/www/components/LaunchWeek/14/Releases/BuildStage.tsx
@@ -1,6 +1,6 @@
 import { buildDays as days } from '~/components/LaunchWeek/14/Releases/data'
 import SectionContainer from '~/components/Layouts/SectionContainer'
-import { motion, useInView } from 'framer-motion'
+import { motion, useInView } from 'motion/react'
 import React, { FC } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/www/components/LaunchWeek/14/Releases/components/BuildCard.tsx b/apps/www/components/LaunchWeek/14/Releases/components/BuildCard.tsx
index b4be1dc409f..4cf8bf54d95 100644
--- a/apps/www/components/LaunchWeek/14/Releases/components/BuildCard.tsx
+++ b/apps/www/components/LaunchWeek/14/Releases/components/BuildCard.tsx
@@ -1,10 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react'
+import { useBreakpoint } from 'common'
+import { motion } from 'motion/react'
 import Link from 'next/link'
-import { motion } from 'framer-motion'
-import Tilt from 'vanilla-tilt'
+import React, { useEffect, useRef, useState } from 'react'
 import { useWindowSize } from 'react-use'
 import { cn } from 'ui'
-import { useBreakpoint } from 'common'
+import Tilt from 'vanilla-tilt'
 
 import { AdventDay } from '../data'
 import { AdventLink } from '../data/lw14_build_stage'
diff --git a/apps/www/components/LaunchWeek/15/LW15BuildStage.tsx b/apps/www/components/LaunchWeek/15/LW15BuildStage.tsx
index 333d7bdce07..392ad0dad04 100644
--- a/apps/www/components/LaunchWeek/15/LW15BuildStage.tsx
+++ b/apps/www/components/LaunchWeek/15/LW15BuildStage.tsx
@@ -1,10 +1,9 @@
-import React, { FC } from 'react'
-import Link from 'next/link'
-import { motion, useInView } from 'framer-motion'
-import { cn } from 'ui'
-
 import { buildDays as days } from 'components/LaunchWeek/15/data'
 import SectionContainer from 'components/Layouts/SectionContainer'
+import { motion, useInView } from 'motion/react'
+import Link from 'next/link'
+import React, { FC } from 'react'
+import { cn } from 'ui'
 
 const LW15BuildStage: FC = () => {
   const ref = React.useRef(null)
diff --git a/apps/www/components/LaunchWeek/15/LW15Hackathon.tsx b/apps/www/components/LaunchWeek/15/LW15Hackathon.tsx
index a0e7eaafdc0..18544726518 100644
--- a/apps/www/components/LaunchWeek/15/LW15Hackathon.tsx
+++ b/apps/www/components/LaunchWeek/15/LW15Hackathon.tsx
@@ -1,6 +1,6 @@
 import SectionContainer from 'components/Layouts/SectionContainer'
-import { motion, useInView } from 'framer-motion'
 import { DEFAULT_EASE } from 'lib/animations'
+import { motion, useInView } from 'motion/react'
 import Image from 'next/image'
 import Link from 'next/link'
 import React, { FC } from 'react'
diff --git a/apps/www/components/LaunchWeek/15/LW15Meetups.tsx b/apps/www/components/LaunchWeek/15/LW15Meetups.tsx
index c14b489d869..7f097098138 100644
--- a/apps/www/components/LaunchWeek/15/LW15Meetups.tsx
+++ b/apps/www/components/LaunchWeek/15/LW15Meetups.tsx
@@ -1,12 +1,13 @@
-import React, { PropsWithChildren, useState, useRef, useCallback, useEffect } from 'react'
-import { cn } from 'ui'
-import Image from 'next/image'
-import Link from 'next/link'
-import { motion, useInView } from 'framer-motion'
-import { FifteenSVG, LWSVG } from './lw15.components'
+import { LumaEvent } from 'app/api-v2/luma-events/route'
 import SectionContainer from 'components/Layouts/SectionContainer'
 import { DEFAULT_EASE } from 'lib/animations'
-import { LumaEvent } from 'app/api-v2/luma-events/route'
+import { motion, useInView } from 'motion/react'
+import Image from 'next/image'
+import Link from 'next/link'
+import React, { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react'
+import { cn } from 'ui'
+
+import { FifteenSVG, LWSVG } from './lw15.components'
 
 interface Props {
   className?: string
diff --git a/apps/www/components/LaunchWeek/7/BlogLinks.tsx b/apps/www/components/LaunchWeek/7/BlogLinks.tsx
index e3e78bd5d85..35241aaba7d 100644
--- a/apps/www/components/LaunchWeek/7/BlogLinks.tsx
+++ b/apps/www/components/LaunchWeek/7/BlogLinks.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import days from '~/components/LaunchWeek/7/lw7_days'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import Image from 'next/image'
 import Link from 'next/link'
 import React from 'react'
diff --git a/apps/www/components/LaunchWeek/7/LW7BgGraphic.tsx b/apps/www/components/LaunchWeek/7/LW7BgGraphic.tsx
index ca1bd8a9298..e4a2390a50e 100644
--- a/apps/www/components/LaunchWeek/7/LW7BgGraphic.tsx
+++ b/apps/www/components/LaunchWeek/7/LW7BgGraphic.tsx
@@ -1,6 +1,7 @@
-import { motion, useScroll, useTransform } from 'framer-motion'
-import Image from 'next/image'
 import { useBreakpoint } from 'common/hooks/useBreakpoint'
+import { motion, useScroll, useTransform } from 'motion/react'
+import Image from 'next/image'
+
 import styles from './lw7-bg-graphic.module.css'
 
 export default function LW7BgGraphic() {
diff --git a/apps/www/components/LaunchWeek/7/LaunchSection/LaunchWeekLogoHeader.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/LaunchWeekLogoHeader.tsx
index 7c16bd8b40e..3310747e641 100644
--- a/apps/www/components/LaunchWeek/7/LaunchSection/LaunchWeekLogoHeader.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/LaunchWeekLogoHeader.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
-import Image from 'next/image'
-import { motion } from 'framer-motion'
 import { useBreakpoint } from 'common/hooks/useBreakpoint'
+import { motion } from 'motion/react'
+import Image from 'next/image'
 
 export function LaunchWeekLogoHeader() {
   const isMobile = useBreakpoint(640)
diff --git a/apps/www/components/LaunchWeek/7/LaunchWeekPrizeCard.tsx b/apps/www/components/LaunchWeek/7/LaunchWeekPrizeCard.tsx
index 79e630df958..47ae9b31735 100644
--- a/apps/www/components/LaunchWeek/7/LaunchWeekPrizeCard.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchWeekPrizeCard.tsx
@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import Image from 'next/image'
 import React from 'react'
 
diff --git a/apps/www/components/LaunchWeek/7/LaunchWeekPrizeSection.tsx b/apps/www/components/LaunchWeek/7/LaunchWeekPrizeSection.tsx
index 8087b96e367..718a88c3d37 100644
--- a/apps/www/components/LaunchWeek/7/LaunchWeekPrizeSection.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchWeekPrizeSection.tsx
@@ -1,7 +1,8 @@
+import { motion } from 'motion/react'
 import React from 'react'
+
 import LabelBadge from './LabelBadge'
 import LaunchWeekPrizeCard from './LaunchWeekPrizeCard'
-import { motion } from 'framer-motion'
 
 export default function LaunchWeekPrizeSection({
   className,
diff --git a/apps/www/components/LaunchWeek/7/Releases/Day5.tsx b/apps/www/components/LaunchWeek/7/Releases/Day5.tsx
index 7de82e27489..40f15aa2d42 100644
--- a/apps/www/components/LaunchWeek/7/Releases/Day5.tsx
+++ b/apps/www/components/LaunchWeek/7/Releases/Day5.tsx
@@ -1,7 +1,11 @@
-import React from 'react'
-import Image from 'next/image'
-import { motion } from 'framer-motion'
+import { opacityVariant4, scaleOpacityVariant2 } from '.'
+import { WeekDayProps } from '~/components/LaunchWeek/7/lw7_days'
 import { useBreakpoint } from 'common/hooks/useBreakpoint'
+import { motion } from 'motion/react'
+import Image from 'next/image'
+import Link from 'next/link'
+import React from 'react'
+
 import {
   ArrowTopRightSvg,
   CartTitle,
@@ -10,12 +14,7 @@ import {
   SectionButtons,
   StyledArticleBadge,
 } from './components'
-
-import { WeekDayProps } from '~/components/LaunchWeek/7/lw7_days'
-import { opacityVariant4, scaleOpacityVariant2 } from '.'
-
 import styles from './day5.module.css'
-import Link from 'next/link'
 
 const getDay5Motion = (index: number) => {
   switch (index) {
diff --git a/apps/www/components/LaunchWeek/7/Releases/index.tsx b/apps/www/components/LaunchWeek/7/Releases/index.tsx
index ff934000b3f..50ca97f4973 100644
--- a/apps/www/components/LaunchWeek/7/Releases/index.tsx
+++ b/apps/www/components/LaunchWeek/7/Releases/index.tsx
@@ -1,7 +1,7 @@
 import days, { endOfLW7, WeekDayProps } from '~/components/LaunchWeek/7/lw7_days'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import { useBreakpoint } from 'common/hooks/useBreakpoint'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import Image from 'next/image'
 import { useEffect } from 'react'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'ui'
diff --git a/apps/www/components/LaunchWeek/8/LaunchWeekPrizeCard.tsx b/apps/www/components/LaunchWeek/8/LaunchWeekPrizeCard.tsx
index 0f49cdeb121..00e59482a65 100644
--- a/apps/www/components/LaunchWeek/8/LaunchWeekPrizeCard.tsx
+++ b/apps/www/components/LaunchWeek/8/LaunchWeekPrizeCard.tsx
@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import Image from 'next/image'
 import React from 'react'
 import { cn } from 'ui'
diff --git a/apps/www/components/LaunchWeek/X/Releases/BuildStage.tsx b/apps/www/components/LaunchWeek/X/Releases/BuildStage.tsx
index 7963d675e79..e1c3c99965f 100644
--- a/apps/www/components/LaunchWeek/X/Releases/BuildStage.tsx
+++ b/apps/www/components/LaunchWeek/X/Releases/BuildStage.tsx
@@ -1,11 +1,11 @@
-import React, { FC } from 'react'
 import { buildDays as days } from '~/components/LaunchWeek/X/Releases/data'
-
 import SectionContainer from '~/components/Layouts/SectionContainer'
-import AdventCard from './components/AdventCard'
-import { motion, useInView } from 'framer-motion'
+import { motion, useInView } from 'motion/react'
+import React, { FC } from 'react'
 import { cn } from 'ui'
 
+import AdventCard from './components/AdventCard'
+
 const BuildStage: FC = () => {
   const ref = React.useRef(null)
   const isInView = useInView(ref, { margin: '-25%', once: true })
diff --git a/apps/www/components/LaunchWeek/X/Releases/components/AdventCard.tsx b/apps/www/components/LaunchWeek/X/Releases/components/AdventCard.tsx
index 7802c0a4b45..79832101281 100644
--- a/apps/www/components/LaunchWeek/X/Releases/components/AdventCard.tsx
+++ b/apps/www/components/LaunchWeek/X/Releases/components/AdventCard.tsx
@@ -1,10 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react'
+import { useBreakpoint } from 'common'
+import { motion } from 'motion/react'
 import Link from 'next/link'
-import { motion } from 'framer-motion'
-import Tilt from 'vanilla-tilt'
+import React, { useEffect, useRef, useState } from 'react'
 import { useWindowSize } from 'react-use'
 import { cn } from 'ui'
-import { useBreakpoint } from 'common'
+import Tilt from 'vanilla-tilt'
 
 import { AdventDay } from '../data'
 import { AdventLink } from '../data/lwx_advent_days'
diff --git a/apps/www/components/MagnifiedProducts.tsx b/apps/www/components/MagnifiedProducts.tsx
index 685dabbcc10..1d2c6b7afd8 100644
--- a/apps/www/components/MagnifiedProducts.tsx
+++ b/apps/www/components/MagnifiedProducts.tsx
@@ -1,18 +1,15 @@
-import { useRef } from 'react'
-import Link from 'next/link'
+import { DEFAULT_TRANSITION } from '~/lib/animations'
+import { useBreakpoint } from 'common'
 import {
-  MotionValue,
   motion,
+  MotionValue,
   useInView,
   useMotionValue,
   useSpring,
   useTransform,
-} from 'framer-motion'
-import { useBreakpoint } from 'common'
-import { Products } from './Sections/ProductsCta'
-import { cn } from 'ui'
-
-import { DEFAULT_TRANSITION } from '~/lib/animations'
+} from 'motion/react'
+import Link from 'next/link'
+import { useRef } from 'react'
 import {
   PRODUCT_MODULES,
   PRODUCT_MODULES_NAMES,
@@ -21,6 +18,9 @@ import {
   PRODUCT_SHORTNAMES,
   products as PRODUCTS,
 } from 'shared-data/products'
+import { cn } from 'ui'
+
+import { Products } from './Sections/ProductsCta'
 
 function MagnifiedProducts({ currentProduct }: { currentProduct: Products | string }) {
   let mouseX = useMotionValue(Infinity)
diff --git a/apps/www/components/Nav/MobileMenu.tsx b/apps/www/components/Nav/MobileMenu.tsx
index 1898ac58d1b..58dc3c6bf37 100644
--- a/apps/www/components/Nav/MobileMenu.tsx
+++ b/apps/www/components/Nav/MobileMenu.tsx
@@ -2,8 +2,8 @@
 
 import { type Menu } from '~/data/nav'
 import { useIsLoggedIn, useIsUserLoading } from 'common'
-import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion'
 import { ChevronRight } from 'lucide-react'
+import { AnimatePresence, domAnimation, LazyMotion, m } from 'motion/react'
 import Link from 'next/link'
 import { useEffect } from 'react'
 import type { Dispatch, SetStateAction } from 'react'
diff --git a/apps/www/components/Nav/SolutionsDropdown.tsx b/apps/www/components/Nav/SolutionsDropdown.tsx
index 2bb7fc0c930..8491cfe8be8 100644
--- a/apps/www/components/Nav/SolutionsDropdown.tsx
+++ b/apps/www/components/Nav/SolutionsDropdown.tsx
@@ -1,7 +1,7 @@
 import { useBreakpoint, useReducedMotion } from 'common'
 import { navData as DevelopersData } from 'data/Solutions'
-import { AnimatePresence, motion } from 'framer-motion'
 import { ArrowLeftRight, ChevronRight } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import Link from 'next/link'
 import { useState } from 'react'
 import { useMedia } from 'react-use'
diff --git a/apps/www/components/OpenSource/OSSHero.tsx b/apps/www/components/OpenSource/OSSHero.tsx
index 16d5dad67db..d08a6fbfef7 100644
--- a/apps/www/components/OpenSource/OSSHero.tsx
+++ b/apps/www/components/OpenSource/OSSHero.tsx
@@ -1,5 +1,5 @@
 import { useBreakpoint } from 'common'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import { useTheme } from 'next-themes'
 import React from 'react'
 import { useWindowSize } from 'react-use'
diff --git a/apps/www/components/OpenSource/RepoCard.tsx b/apps/www/components/OpenSource/RepoCard.tsx
index 85eb2cc2a26..9cfab2ed617 100644
--- a/apps/www/components/OpenSource/RepoCard.tsx
+++ b/apps/www/components/OpenSource/RepoCard.tsx
@@ -1,9 +1,8 @@
-import { motion } from 'framer-motion'
-import { Star } from 'lucide-react'
-import Link from 'next/link'
-
 import Panel from '~/components/Panel'
 import { useSendTelemetryEvent } from '~/lib/telemetry'
+import { Star } from 'lucide-react'
+import { motion } from 'motion/react'
+import Link from 'next/link'
 
 const RepoCard = ({ repo, activeTab, index }: { repo: any; activeTab: number; index: number }) => {
   const sendTelemetryEvent = useSendTelemetryEvent()
diff --git a/apps/www/components/OpenSource/Repos.tsx b/apps/www/components/OpenSource/Repos.tsx
index 6027a2f9127..3b1e5b9ed28 100644
--- a/apps/www/components/OpenSource/Repos.tsx
+++ b/apps/www/components/OpenSource/Repos.tsx
@@ -1,5 +1,5 @@
-import { AnimatePresence } from 'framer-motion'
 import { Pencil, Users, Users2 } from 'lucide-react'
+import { AnimatePresence } from 'motion/react'
 import Link from 'next/link'
 import React, { useEffect, useState } from 'react'
 import { Swiper, SwiperSlide } from 'swiper/react'
diff --git a/apps/www/components/Panel/Panel.tsx b/apps/www/components/Panel/Panel.tsx
index ad3bddf340b..5a3531b877a 100644
--- a/apps/www/components/Panel/Panel.tsx
+++ b/apps/www/components/Panel/Panel.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { detectBrowser, isBrowser } from 'common'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import React, { PropsWithChildren, useEffect, useRef } from 'react'
 import { cn } from 'ui'
 
diff --git a/apps/www/components/Pricing/CostControlAnimation.tsx b/apps/www/components/Pricing/CostControlAnimation.tsx
index 7e247cc7466..5498811dfd5 100644
--- a/apps/www/components/Pricing/CostControlAnimation.tsx
+++ b/apps/www/components/Pricing/CostControlAnimation.tsx
@@ -1,8 +1,8 @@
 'use client'
 
+import { AnimatePresence, motion, useInView } from 'motion/react'
 import React, { FC, useRef, useState } from 'react'
-import { AnimatePresence, motion, useInView } from 'framer-motion'
-import { Switch, cn } from 'ui'
+import { cn, Switch } from 'ui'
 
 interface Props {
   className?: string
diff --git a/apps/www/components/Products/Functions/CI.tsx b/apps/www/components/Products/Functions/CI.tsx
index a2c546e92f8..ee51728eeaf 100644
--- a/apps/www/components/Products/Functions/CI.tsx
+++ b/apps/www/components/Products/Functions/CI.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import { useEffect, useState } from 'react'
 
 const CODE_LINES = [
diff --git a/apps/www/components/Products/Functions/LocalDXImage.tsx b/apps/www/components/Products/Functions/LocalDXImage.tsx
index bc01d4a5ee2..9accd4227f6 100644
--- a/apps/www/components/Products/Functions/LocalDXImage.tsx
+++ b/apps/www/components/Products/Functions/LocalDXImage.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { AnimatePresence, motion } from 'framer-motion'
 import { Check, Copy } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import Image from 'next/image'
 import { useEffect, useRef, useState } from 'react'
 import CopyToClipboard from 'react-copy-to-clipboard'
diff --git a/apps/www/components/Products/Functions/NpmEcosystem.tsx b/apps/www/components/Products/Functions/NpmEcosystem.tsx
index 4557551de6d..67dc33a46ae 100644
--- a/apps/www/components/Products/Functions/NpmEcosystem.tsx
+++ b/apps/www/components/Products/Functions/NpmEcosystem.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 
 const npmList = [
   'fetch',
diff --git a/apps/www/components/Products/Functions/ParityImage.tsx b/apps/www/components/Products/Functions/ParityImage.tsx
index 6b9417247cc..cb32cdb6e8e 100644
--- a/apps/www/components/Products/Functions/ParityImage.tsx
+++ b/apps/www/components/Products/Functions/ParityImage.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import Image from 'next/image'
 import { cn } from 'ui'
 
diff --git a/apps/www/components/Products/Functions/QueryLogs.tsx b/apps/www/components/Products/Functions/QueryLogs.tsx
index f00c6bcf7c8..4718c0effa8 100644
--- a/apps/www/components/Products/Functions/QueryLogs.tsx
+++ b/apps/www/components/Products/Functions/QueryLogs.tsx
@@ -1,6 +1,6 @@
 import dayjs from 'dayjs'
-import { AnimatePresence, motion } from 'framer-motion'
 import { AlertCircle, Info } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
 import { useEffect, useState } from 'react'
 import { useInterval } from 'react-use'
 import { cn } from 'ui'
diff --git a/apps/www/components/Products/Functions/RealtimeLogs.tsx b/apps/www/components/Products/Functions/RealtimeLogs.tsx
index 66500433799..133f604c30a 100644
--- a/apps/www/components/Products/Functions/RealtimeLogs.tsx
+++ b/apps/www/components/Products/Functions/RealtimeLogs.tsx
@@ -1,5 +1,5 @@
 import dayjs from 'dayjs'
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import { FC, useEffect, useState } from 'react'
 import { useInterval } from 'react-use'
 import { Badge, cn } from 'ui'
diff --git a/apps/www/components/Products/VectorAI/CustomersVisual.tsx b/apps/www/components/Products/VectorAI/CustomersVisual.tsx
index 4e731029508..d2d48e4a51d 100644
--- a/apps/www/components/Products/VectorAI/CustomersVisual.tsx
+++ b/apps/www/components/Products/VectorAI/CustomersVisual.tsx
@@ -1,5 +1,5 @@
 import { DEFAULT_EASE } from '~/lib/animations'
-import { m } from 'framer-motion'
+import { m } from 'motion/react'
 import React from 'react'
 
 const CustomersVisual = () => {
diff --git a/apps/www/components/Products/VectorAI/IntegrationsImage.tsx b/apps/www/components/Products/VectorAI/IntegrationsImage.tsx
index b3341becd10..dadd737fe1d 100644
--- a/apps/www/components/Products/VectorAI/IntegrationsImage.tsx
+++ b/apps/www/components/Products/VectorAI/IntegrationsImage.tsx
@@ -1,9 +1,9 @@
-import React, { useRef } from 'react'
-import Image from 'next/image'
-import { useTheme } from 'next-themes'
-import { LazyMotion, domAnimation, m, useInView } from 'framer-motion'
-import { INITIAL_BOTTOM, getAnimation } from '~/lib/animations'
+import { getAnimation, INITIAL_BOTTOM } from '~/lib/animations'
 import { useBreakpoint } from 'common'
+import { domAnimation, LazyMotion, m, useInView } from 'motion/react'
+import { useTheme } from 'next-themes'
+import Image from 'next/image'
+import React, { useRef } from 'react'
 
 const IntegrationsImage = () => {
   const ref = useRef(null)
diff --git a/apps/www/components/Products/VectorAI/OpenAIImage.tsx b/apps/www/components/Products/VectorAI/OpenAIImage.tsx
index 62cba18db9d..368fc86d23e 100644
--- a/apps/www/components/Products/VectorAI/OpenAIImage.tsx
+++ b/apps/www/components/Products/VectorAI/OpenAIImage.tsx
@@ -1,7 +1,7 @@
+import { domAnimation, LazyMotion, m, useInView } from 'motion/react'
+import { useTheme } from 'next-themes'
 import Image from 'next/image'
 import React from 'react'
-import { useTheme } from 'next-themes'
-import { LazyMotion, domAnimation, m, useInView } from 'framer-motion'
 
 const OpenAIImage = ({ isHovered }: { isHovered: boolean }) => {
   const { resolvedTheme } = useTheme()
diff --git a/apps/www/components/Products/VectorAI/PGvectorImg.tsx b/apps/www/components/Products/VectorAI/PGvectorImg.tsx
index c7f21fdea3c..8d6cfc46590 100644
--- a/apps/www/components/Products/VectorAI/PGvectorImg.tsx
+++ b/apps/www/components/Products/VectorAI/PGvectorImg.tsx
@@ -1,5 +1,5 @@
 import { DEFAULT_EASE } from '~/lib/animations'
-import { domAnimation, LazyMotion, m } from 'framer-motion'
+import { domAnimation, LazyMotion, m } from 'motion/react'
 import { useTheme } from 'next-themes'
 import React, { useEffect, useRef } from 'react'
 
diff --git a/apps/www/components/Sections/CustomerQuotesSection.tsx b/apps/www/components/Sections/CustomerQuotesSection.tsx
index 746258b53d7..4e606e8d7d8 100644
--- a/apps/www/components/Sections/CustomerQuotesSection.tsx
+++ b/apps/www/components/Sections/CustomerQuotesSection.tsx
@@ -1,8 +1,8 @@
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import CustomersVisual from '~/components/Products/VectorAI/CustomersVisual'
 import { getAnimation, INITIAL_BOTTOM } from '~/lib/animations'
-import { domAnimation, LazyMotion, m, useInView } from 'framer-motion'
 import { ArrowUpRight } from 'lucide-react'
+import { domAnimation, LazyMotion, m, useInView } from 'motion/react'
 import { useTheme } from 'next-themes'
 import Image from 'next/image'
 import Link from 'next/link'
diff --git a/apps/www/components/Sections/FeaturesSection.tsx b/apps/www/components/Sections/FeaturesSection.tsx
index 7951da6102e..a34f72b75c3 100644
--- a/apps/www/components/Sections/FeaturesSection.tsx
+++ b/apps/www/components/Sections/FeaturesSection.tsx
@@ -1,7 +1,7 @@
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import { getAnimation, INITIAL_BOTTOM } from '~/lib/animations'
-import { domAnimation, LazyMotion, m, useInView } from 'framer-motion'
 import { ArrowUpRight } from 'lucide-react'
+import { domAnimation, LazyMotion, m, useInView } from 'motion/react'
 import Link from 'next/link'
 import { ReactNode, useRef } from 'react'
 import ReactMarkdown from 'react-markdown'
diff --git a/apps/www/components/Sections/HighlightCards.tsx b/apps/www/components/Sections/HighlightCards.tsx
index 554ecd93462..07093b7d8b5 100644
--- a/apps/www/components/Sections/HighlightCards.tsx
+++ b/apps/www/components/Sections/HighlightCards.tsx
@@ -1,7 +1,7 @@
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import Panel from '~/components/Panel'
 import { getAnimation, INITIAL_BOTTOM } from '~/lib/animations'
-import { domAnimation, LazyMotion, m, useInView } from 'framer-motion'
+import { domAnimation, LazyMotion, m, useInView } from 'motion/react'
 import React, { useRef, useState } from 'react'
 
 interface Highlight {
diff --git a/apps/www/components/Sections/TimedAccordionPanels.tsx b/apps/www/components/Sections/TimedAccordionPanels.tsx
index 15e1c5973a8..1278b4fd884 100644
--- a/apps/www/components/Sections/TimedAccordionPanels.tsx
+++ b/apps/www/components/Sections/TimedAccordionPanels.tsx
@@ -1,7 +1,7 @@
 import 'swiper/css'
 
 import { useBreakpoint } from 'common'
-import { domAnimation, LazyMotion, m, useAnimation, useInView } from 'framer-motion'
+import { domAnimation, LazyMotion, m, useAnimation, useInView } from 'motion/react'
 import React, { useEffect, useRef, useState } from 'react'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { cn } from 'ui'
diff --git a/apps/www/components/Sections/TimedAccordionSection.tsx b/apps/www/components/Sections/TimedAccordionSection.tsx
index acffd19388b..8c28a556883 100644
--- a/apps/www/components/Sections/TimedAccordionSection.tsx
+++ b/apps/www/components/Sections/TimedAccordionSection.tsx
@@ -1,7 +1,7 @@
 import 'swiper/css'
 
 import { useBreakpoint } from 'common'
-import { domAnimation, LazyMotion, m, useAnimation, useInView } from 'framer-motion'
+import { domAnimation, LazyMotion, m, useAnimation, useInView } from 'motion/react'
 import React, { useEffect, useRef, useState, type ReactNode } from 'react'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { cn } from 'ui'
diff --git a/apps/www/components/Sections/TimedTabsSection.tsx b/apps/www/components/Sections/TimedTabsSection.tsx
index ef700dec426..0f250979622 100644
--- a/apps/www/components/Sections/TimedTabsSection.tsx
+++ b/apps/www/components/Sections/TimedTabsSection.tsx
@@ -2,8 +2,8 @@ import 'swiper/css'
 
 import CodeBlock from '~/components/CodeBlock/CodeBlock'
 import SectionContainer from '~/components/Layouts/SectionContainer'
-import { AnimatePresence, motion, useAnimation } from 'framer-motion'
 import { ArrowUpRight } from 'lucide-react'
+import { AnimatePresence, motion, useAnimation } from 'motion/react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useEffect, useState, type ReactNode } from 'react'
diff --git a/apps/www/components/Sections/UseCasesSection.tsx b/apps/www/components/Sections/UseCasesSection.tsx
index 1bf2ca9b202..14f1be19873 100644
--- a/apps/www/components/Sections/UseCasesSection.tsx
+++ b/apps/www/components/Sections/UseCasesSection.tsx
@@ -1,8 +1,8 @@
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import Panel from '~/components/Panel'
 import { getAnimation, INITIAL_BOTTOM } from '~/lib/animations'
-import { domAnimation, LazyMotion, m, useInView } from 'framer-motion'
 import { ArrowUpRight } from 'lucide-react'
+import { domAnimation, LazyMotion, m, useInView } from 'motion/react'
 import Link from 'next/link'
 import { ReactNode, useRef } from 'react'
 import { Button } from 'ui'
diff --git a/apps/www/components/SurveyResults/SurveyChart.tsx b/apps/www/components/SurveyResults/SurveyChart.tsx
index 4dbb2435996..715b0346136 100644
--- a/apps/www/components/SurveyResults/SurveyChart.tsx
+++ b/apps/www/components/SurveyResults/SurveyChart.tsx
@@ -2,8 +2,8 @@
 
 import { createClient } from '@supabase/supabase-js'
 import CodeBlock from '~/components/CodeBlock/CodeBlock'
-import { motion } from 'framer-motion'
 import { ChevronsUpDown } from 'lucide-react'
+import { motion } from 'motion/react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import {
   Button,
diff --git a/apps/www/components/TabsWithHighlights.tsx b/apps/www/components/TabsWithHighlights.tsx
index 17ac3ddf7a0..7e300602d8b 100644
--- a/apps/www/components/TabsWithHighlights.tsx
+++ b/apps/www/components/TabsWithHighlights.tsx
@@ -1,5 +1,5 @@
-import { AnimatePresence, motion, useInView } from 'framer-motion'
 import { Check } from 'lucide-react'
+import { AnimatePresence, motion, useInView } from 'motion/react'
 import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import React, { useRef, useState } from 'react'
diff --git a/apps/www/components/UsersGrowthChart.tsx b/apps/www/components/UsersGrowthChart.tsx
index af92bc2139c..8551890c9e1 100644
--- a/apps/www/components/UsersGrowthChart.tsx
+++ b/apps/www/components/UsersGrowthChart.tsx
@@ -1,5 +1,5 @@
 import { companyStats } from '~/data/company-stats'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import { FC, useEffect, useMemo, useState } from 'react'
 import { useMedia } from 'react-use'
 import { AnimatedCounter, Badge, cn } from 'ui'
diff --git a/apps/www/components/Wrapped/AnimatedGridBackground.tsx b/apps/www/components/Wrapped/AnimatedGridBackground.tsx
index c6455ca32c8..59a9e6fc527 100644
--- a/apps/www/components/Wrapped/AnimatedGridBackground.tsx
+++ b/apps/www/components/Wrapped/AnimatedGridBackground.tsx
@@ -1,7 +1,8 @@
 'use client'
 
-import { motion, useInView } from 'framer-motion'
-import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
+import { motion, useInView } from 'motion/react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
 import { Dots, Stripes } from './Visuals'
 
 const STAGGER_DELAY = 0.05
diff --git a/apps/www/components/Wrapped/Pages/Home.tsx b/apps/www/components/Wrapped/Pages/Home.tsx
index 2be854ea4cc..d2f9ce05c5d 100644
--- a/apps/www/components/Wrapped/Pages/Home.tsx
+++ b/apps/www/components/Wrapped/Pages/Home.tsx
@@ -1,9 +1,10 @@
 'use client'
 
-import { AnimatePresence, motion } from 'framer-motion'
+import { useBreakpoint } from 'common'
+import { AnimatePresence, motion } from 'motion/react'
 import { useEffect, useRef, useState } from 'react'
 import { cn } from 'ui'
-import { useBreakpoint } from 'common'
+
 import { AnimatedGridBackground } from '../AnimatedGridBackground'
 
 const stats = [
diff --git a/apps/www/components/Wrapped/Pages/Intro.tsx b/apps/www/components/Wrapped/Pages/Intro.tsx
index cf28e509f4e..d3fefbc258a 100644
--- a/apps/www/components/Wrapped/Pages/Intro.tsx
+++ b/apps/www/components/Wrapped/Pages/Intro.tsx
@@ -1,11 +1,12 @@
 'use client'
 
 import * as Scrollytelling from '@bsmnt/scrollytelling'
-import { useRef, useState, useEffect } from 'react'
-import { motion, AnimatePresence, useInView } from 'framer-motion'
-import { Dots, Stripes } from '../Visuals'
+import { AnimatePresence, motion, useInView } from 'motion/react'
+import { useEffect, useRef, useState } from 'react'
 import { cn } from 'ui'
 
+import { Dots, Stripes } from '../Visuals'
+
 const titles = [
   'Thank you to our community.',
   'You created more Supabase databases in 2025 than in all previous years combined.',
diff --git a/apps/www/components/Wrapped/Pages/SupabaseSelect.tsx b/apps/www/components/Wrapped/Pages/SupabaseSelect.tsx
index 749237160db..7d4930210a1 100644
--- a/apps/www/components/Wrapped/Pages/SupabaseSelect.tsx
+++ b/apps/www/components/Wrapped/Pages/SupabaseSelect.tsx
@@ -1,8 +1,9 @@
 'use client'
 
-import { AnimatePresence, motion, useInView } from 'framer-motion'
+import { AnimatePresence, motion, useInView } from 'motion/react'
 import Image from 'next/image'
 import { useCallback, useEffect, useRef, useState } from 'react'
+
 import { AnimatedGridBackground } from '../AnimatedGridBackground'
 
 // All available images from Supabase Select event
diff --git a/apps/www/package.json b/apps/www/package.json
index 3c2dd50222f..e7c007f6106 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -56,7 +56,6 @@
     "dayjs": "^1.11.12",
     "dev-tools": "workspace:*",
     "eslint-config-supabase": "workspace:*",
-    "framer-motion": "^11.18.2",
     "globby": "^13.2.2",
     "gray-matter": "^4.0.3",
     "gsap": "^3.13.0",
@@ -72,6 +71,7 @@
     "mdast-util-to-markdown": "^1.5.0",
     "micromark-extension-gfm": "^2.0.3",
     "micromark-extension-mdxjs": "^1.0.1",
+    "motion": "catalog:",
     "next": "^15.5.24",
     "next-mdx-remote-client": "^1.1.7",
     "next-seo": "^6.5.0",
diff --git a/apps/www/pages/assistant.tsx b/apps/www/pages/assistant.tsx
index 024e834e94b..3c3f22d355b 100644
--- a/apps/www/pages/assistant.tsx
+++ b/apps/www/pages/assistant.tsx
@@ -2,7 +2,7 @@ import DotGrid from '~/components/AIDemo/DotGrid'
 import { AIDemoPanel } from '~/components/AIDemo/Panel'
 import { SqlSnippet } from '~/components/AIDemo/SqlSnippet'
 import { useIsLoggedIn, useIsUserLoading } from 'common'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import { NextSeo } from 'next-seo'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
diff --git a/apps/www/pages/customers.tsx b/apps/www/pages/customers.tsx
index 3cb92c9dcb1..ae080c63a65 100644
--- a/apps/www/pages/customers.tsx
+++ b/apps/www/pages/customers.tsx
@@ -4,7 +4,7 @@ import { getSortedPosts } from '~/lib/posts'
 import { generateRss } from '~/lib/rss'
 import styles from '~/styles/customers.module.css'
 import type PostTypes from '~/types/post'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import { NextSeo } from 'next-seo'
 import Head from 'next/head'
 import Link from 'next/link'
diff --git a/apps/www/pages/features.tsx b/apps/www/pages/features.tsx
index c7c892e89e3..e07032d1ca5 100644
--- a/apps/www/pages/features.tsx
+++ b/apps/www/pages/features.tsx
@@ -1,6 +1,6 @@
-import { motion } from 'framer-motion'
 import { debounce } from 'lib/helpers'
 import { LayoutGrid, Search, Table2 } from 'lucide-react'
+import { motion } from 'motion/react'
 import { NextSeo } from 'next-seo'
 import { useRouter } from 'next/compat/router'
 import Head from 'next/head'
diff --git a/apps/www/pages/state-of-startups-2025.tsx b/apps/www/pages/state-of-startups-2025.tsx
index 1a34e53bee8..0ae9d8b838d 100644
--- a/apps/www/pages/state-of-startups-2025.tsx
+++ b/apps/www/pages/state-of-startups-2025.tsx
@@ -5,7 +5,7 @@ import { SurveyChapterSection } from '~/components/SurveyResults/SurveyChapterSe
 import { SurveySectionBreak } from '~/components/SurveyResults/SurveySectionBreak'
 import pageData from '~/data/surveys/state-of-startups-2025'
 import { useSendTelemetryEvent } from '~/lib/telemetry'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import { NextSeo } from 'next-seo'
 import Link from 'next/link'
 import { forwardRef, useEffect, useRef, useState } from 'react'
diff --git a/packages/ui-patterns/package.json b/packages/ui-patterns/package.json
index 47ad8e52f2b..c7a22c82323 100644
--- a/packages/ui-patterns/package.json
+++ b/packages/ui-patterns/package.json
@@ -766,7 +766,6 @@
     "common": "workspace:*",
     "common-tags": "^1.8.2",
     "dayjs": "^1.11.13",
-    "framer-motion": "^11.18.2",
     "github-slugger": "^2.0.0",
     "highlightjs-curl": "^1.3.0",
     "icons": "workspace:*",
@@ -777,6 +776,7 @@
     "mdast-jsx": "^0.1.1",
     "mermaid": "^11.12.1",
     "monaco-editor": "*",
+    "motion": "catalog:",
     "next-themes": "catalog:",
     "openai": "^4.75.1",
     "prism-react-renderer": "^2.3.1",
diff --git a/packages/ui-patterns/src/FilterBar/FilterBar.tsx b/packages/ui-patterns/src/FilterBar/FilterBar.tsx
index 84cc0753af7..5bc4791b30c 100644
--- a/packages/ui-patterns/src/FilterBar/FilterBar.tsx
+++ b/packages/ui-patterns/src/FilterBar/FilterBar.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { motion } from 'framer-motion'
 import { Search } from 'lucide-react'
+import { motion } from 'motion/react'
 import React, { forwardRef } from 'react'
 import { cn } from 'ui'
 
diff --git a/packages/ui-patterns/src/SqlToRest/syntax-highlighter/framer-features.ts b/packages/ui-patterns/src/SqlToRest/syntax-highlighter/framer-features.ts
index e0013ea7cd5..3feb81ce3bd 100644
--- a/packages/ui-patterns/src/SqlToRest/syntax-highlighter/framer-features.ts
+++ b/packages/ui-patterns/src/SqlToRest/syntax-highlighter/framer-features.ts
@@ -1,3 +1,3 @@
-import { domMax } from 'framer-motion'
+import { domMax } from 'motion/react'
 
 export default domMax
diff --git a/packages/ui-patterns/src/SqlToRest/syntax-highlighter/transform-renderer.tsx b/packages/ui-patterns/src/SqlToRest/syntax-highlighter/transform-renderer.tsx
index 3dac2d54b1f..0bdec6b311a 100644
--- a/packages/ui-patterns/src/SqlToRest/syntax-highlighter/transform-renderer.tsx
+++ b/packages/ui-patterns/src/SqlToRest/syntax-highlighter/transform-renderer.tsx
@@ -1,4 +1,4 @@
-import { LazyMotion, m } from 'framer-motion'
+import { LazyMotion, m } from 'motion/react'
 import React, { PropsWithChildren } from 'react'
 import { createElement, SyntaxHighlighterProps } from 'react-syntax-highlighter'
 
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 7f1db51b2d8..b18c4c7e003 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -22,10 +22,10 @@
     "cmdk": "^1.1.1",
     "color": "^4.2.3",
     "date-fns": "^2.30.0",
-    "framer-motion": "^11.18.2",
     "input-otp": "^1.4.2",
     "lodash": "catalog:",
     "lucide-react": "^0.436.0",
+    "motion": "catalog:",
     "prop-types": "^15.7.2",
     "radix-ui": "catalog:",
     "react": "catalog:",
diff --git a/packages/ui/src/components/AnimatedCounter/AnimatedCounter.tsx b/packages/ui/src/components/AnimatedCounter/AnimatedCounter.tsx
index b50199fbcb2..0fe178f7df0 100644
--- a/packages/ui/src/components/AnimatedCounter/AnimatedCounter.tsx
+++ b/packages/ui/src/components/AnimatedCounter/AnimatedCounter.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { animate, motion, useInView, useMotionValue, useTransform } from 'framer-motion'
+import { animate, motion, useInView, useMotionValue, useTransform } from 'motion/react'
 import { FC, useEffect, useRef } from 'react'
 
 import { cn } from '../../lib/utils/cn'
diff --git a/packages/ui/src/components/shadcn/ui/form.tsx b/packages/ui/src/components/shadcn/ui/form.tsx
index f1bfd096cbb..0accbb37719 100644
--- a/packages/ui/src/components/shadcn/ui/form.tsx
+++ b/packages/ui/src/components/shadcn/ui/form.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import { Label as LabelPrimitive, Slot as SlotPrimitive } from 'radix-ui'
 import * as React from 'react'
 import {
diff --git a/packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx b/packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx
index c4bbbf51ca6..0d73ebefab1 100644
--- a/packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx
+++ b/packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { motion, useMotionValue, useSpring } from 'framer-motion'
+import { motion, useMotionValue, useSpring } from 'motion/react'
 import { memo, useRef, useState } from 'react'
 
 import { cn } from '../../lib/utils'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index daa119338a4..417869d4686 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -63,6 +63,9 @@ catalogs:
     cn:
       specifier: ^0.4.0
       version: 0.4.0
+    motion:
+      specifier: ^11.18.2
+      version: 11.18.2
     next:
       specifier: ^16.3.6
       version: 16.3.6
@@ -416,9 +419,6 @@ importers:
       eslint-config-supabase:
         specifier: workspace:*
         version: link:../../packages/eslint-config-supabase
-      framer-motion:
-        specifier: ^11.18.2
-        version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       github-slugger:
         specifier: ^2.0.0
         version: 2.0.0
@@ -491,6 +491,9 @@ importers:
       micromark-extension-mdxjs:
         specifier: ^1.0.0
         version: 1.0.1
+      motion:
+        specifier: 'catalog:'
+        version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       next:
         specifier: ^15.5.24
         version: 15.5.25(@babel/core@7.29.7(supports-color@8.1.1))(@opentelemetry/api@1.9.1)(@playwright/test@1.59.1)(@types/node@22.13.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(sass@1.77.4)
@@ -841,15 +844,15 @@ importers:
       common:
         specifier: workspace:*
         version: link:../../packages/common
-      framer-motion:
-        specifier: ^11.18.2
-        version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       jotai:
         specifier: ^2.8.0
         version: 2.8.1(@types/react@19.2.14)(react@19.2.6)
       lucide-react:
         specifier: '*'
         version: 0.511.0(react@19.2.6)
+      motion:
+        specifier: 'catalog:'
+        version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       next:
         specifier: 'catalog:'
         version: 16.3.6(@babel/core@7.29.7(supports-color@8.1.1))(@opentelemetry/api@1.9.1)(@playwright/test@1.59.1)(@types/node@22.13.14)(babel-plugin-macros@3.1.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(sass@1.77.4)
@@ -1212,9 +1215,6 @@ importers:
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
-      framer-motion:
-        specifier: ^11.18.2
-        version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       fuse.js:
         specifier: ^7.4.0
         version: 7.4.0
@@ -1269,6 +1269,9 @@ importers:
       monaco-editor:
         specifier: 0.52.2
         version: 0.52.2
+      motion:
+        specifier: 'catalog:'
+        version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       next:
         specifier: 'catalog:'
         version: 16.3.6(@babel/core@7.29.7(supports-color@8.1.1))(@opentelemetry/api@1.9.1)(@playwright/test@1.59.1)(@types/node@22.13.14)(babel-plugin-macros@3.1.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(sass@1.77.4)
@@ -1600,9 +1603,6 @@ importers:
       eslint-config-supabase:
         specifier: workspace:*
         version: link:../../packages/eslint-config-supabase
-      framer-motion:
-        specifier: ^11.18.2
-        version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       icons:
         specifier: workspace:*
         version: link:../../packages/icons
@@ -1615,6 +1615,9 @@ importers:
       monaco-editor:
         specifier: 0.52.2
         version: 0.52.2
+      motion:
+        specifier: 'catalog:'
+        version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       next:
         specifier: 'catalog:'
         version: 16.3.6(@babel/core@7.29.7(supports-color@8.1.1))(@opentelemetry/api@1.9.1)(@playwright/test@1.59.1)(@types/node@22.13.14)(babel-plugin-macros@3.1.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(sass@1.77.4)
@@ -1904,9 +1907,6 @@ importers:
       eslint-config-supabase:
         specifier: workspace:*
         version: link:../../packages/eslint-config-supabase
-      framer-motion:
-        specifier: ^11.18.2
-        version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       globby:
         specifier: ^13.2.2
         version: 13.2.2
@@ -1952,6 +1952,9 @@ importers:
       micromark-extension-mdxjs:
         specifier: ^1.0.1
         version: 1.0.1
+      motion:
+        specifier: 'catalog:'
+        version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       next:
         specifier: ^15.5.24
         version: 15.5.25(@babel/core@7.29.7(supports-color@8.1.1))(@opentelemetry/api@1.9.1)(@playwright/test@1.59.1)(@types/node@24.19.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(sass@1.77.4)
@@ -2748,9 +2751,6 @@ importers:
       date-fns:
         specifier: ^2.30.0
         version: 2.30.0
-      framer-motion:
-        specifier: ^11.18.2
-        version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       input-otp:
         specifier: ^1.4.2
         version: 1.4.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -2760,6 +2760,9 @@ importers:
       lucide-react:
         specifier: ^0.436.0
         version: 0.436.0(react@19.2.6)
+      motion:
+        specifier: 'catalog:'
+        version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       prop-types:
         specifier: ^15.7.2
         version: 15.8.1
@@ -2890,9 +2893,6 @@ importers:
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
-      framer-motion:
-        specifier: ^11.18.2
-        version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       github-slugger:
         specifier: ^2.0.0
         version: 2.0.0
@@ -2923,6 +2923,9 @@ importers:
       monaco-editor:
         specifier: 0.52.2
         version: 0.52.2
+      motion:
+        specifier: 'catalog:'
+        version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       next:
         specifier: 'catalog:'
         version: 16.3.6(@babel/core@7.29.7(supports-color@8.1.1))(@opentelemetry/api@1.9.1)(@playwright/test@1.59.1)(@types/node@22.13.14)(babel-plugin-macros@3.1.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(sass@1.77.4)
@@ -14896,6 +14899,20 @@ packages:
   motion-utils@12.9.4:
     resolution: {integrity: sha512-BW3I65zeM76CMsfh3kHid9ansEJk9Qvl+K5cu4DVHKGsI52n76OJ4z2CUJUV+Mn3uEP9k1JJA3tClG0ggSrRcg==}
 
+  motion@11.18.2:
+    resolution: {integrity: sha512-JLjvFDuFr42NFtcVoMAyC2sEjnpA8xpy6qWPyzQvCloznAyQ8FIXioxWfHiLtgYhoVpfUqSWpn1h9++skj9+Wg==}
+    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
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -33544,6 +33561,15 @@ snapshots:
 
   motion-utils@12.9.4: {}
 
+  motion@11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+    dependencies:
+      framer-motion: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@emotion/is-prop-valid': 1.4.0
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
   mri@1.2.0: {}
 
   mrmime@2.0.1: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index f3fd62613ac..e918b6a3279 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -38,6 +38,7 @@ catalog:
   lodash: ^4.18.1
   lodash-es: ^4.18.1
   monaco-editor: 0.52.2
+  motion: ^11.18.2
   next: ^16.3.6
   next-themes: ^0.4.6
   postcss: ^8.5.18