chore: migrate Framer Motion imports to Motion (#51520)

## Problem

Closes #31221.
The applications and shared UI packages still import the former
`framer-motion` package instead of Motion's React entry point.

## Solution

Replace runtime imports, type imports, and three test mocks with
`motion/react` across the consuming workspaces.
Replace the seven direct dependency declarations with `motion:
^11.18.2`.
Preserve the existing animation engine version and all other dependency
resolutions, including the asynchronous `domMax` feature loader.
Historical blog examples remain as published; `framer-motion` remains a
transitive implementation dependency of Motion.

## Review instructions

1. Run `pnpm install --frozen-lockfile` and check the seven dependency
replacements in the lockfile.
2. Open the WWW Auth page and Docs homepage at desktop and mobile
widths, with normal and reduced motion preferences.
3. Open the mobile navigation, expand Product on WWW, and close the menu
using Escape and the close button.
4. Check the existing animation components, shared form validation, and
Studio tests for unchanged behavior.

Validation:

- Studio: 731 test files, 8,334 passing tests and one expected failure,
with `--maxWorkers=4`.
- Shared UI, UI patterns, WWW, and UI library: 615 passing tests.
- `pnpm run typecheck --concurrency=1`: all 16 repository tasks pass.
- All six application source lint scripts and lint ratchets pass;
generated Docs example copies are excluded from local lint.
- Repository Prettier source check, lockfile formatting, and case hazard
check pass.
- WWW: 10 existing end-to-end checks across nine pages.
- Docs: 5 existing guide link and accessibility checks across Database
and Auth.
- WWW and Docs mobile navigation pass at desktop/mobile sizes with
normal/reduced motion; SQL-to-REST translation tabs exercise the
asynchronous feature loader without browser errors.
- Frozen-lockfile installation passes; all existing package and snapshot
resolutions are unchanged.
- Learn and UI library command palettes open, filter results, and close
with Escape without browser errors.
- Independent code review finds no actionable defects.
- `npm run build -- --filter=www --filter=docs --filter=studio
--filter=learn --filter=library --concurrency=1 --continue=always`: all
five affected applications build successfully (9 tasks including
prerequisites); asset uploads disabled for local validation.

## Checklist

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [x] If I wrote a new docs topic or edited an existing topic, I used
the `/write-the-docs` or `/edit-the-docs` skill, which applies the docs
[style
guide](https://github.com/supabase/supabase/tree/master/apps/docs/style-guide)
(no docs topics changed)

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>

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'>) => {

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'

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",

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'

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:",

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,

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 {

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,

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'

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'
 

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'
 

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) => {

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'
 

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> },
 }))

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'

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'

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 {

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 {

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'

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'

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'
 

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'

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'

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'

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 {

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'

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'

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 {

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,

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'
 

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 {

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,

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'
 

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'
 

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'

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'
 

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 },

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'
 

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'
 

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 = () => {

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'

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'

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'

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'

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'

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 {

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 {

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'

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'

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'

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'

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'

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,

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 {

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'
 

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'
 

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'

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'

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>,

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 {

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'
 

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'

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'
 

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'

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 {

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'

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

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'

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'

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'
 

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'
 

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'

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. */

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",

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'

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",

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'

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'

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'

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'

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'

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'
 

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'

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'
 

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'
 

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'

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'
 

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'
 

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'
 

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'
 

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'
 

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'
 

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'
 

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'
 

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'
 

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'
 

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'
 

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'

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'

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'