flags-sdk examples: upgrade framer-motion and next (#1147)

- Update framer-motion package to motion to fix build errors
- Update next
- Avoid rendering two html/body tags in growthbook example

closes #1146

Author: dferber90

flags-sdk/bucket/components/product-detail-page/add-to-cart-button.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { motion, AnimatePresence } from 'framer-motion'
+import { motion, AnimatePresence } from 'motion/react'
 
 function Spinner() {
   return (

flags-sdk/bucket/components/shopping-cart/shopping-cart-item.tsx

@@ -2,7 +2,7 @@
 import type { CartItem } from '@/components/utils/cart-types'
 import { ShoppingBagIcon } from '@heroicons/react/24/outline'
 import { colorToImage } from '@/components/utils/images'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import Image from 'next/image'
 import { ShoppingCartRemoveButton } from './shopping-cart-remove-button'
 import Link from 'next/link'

flags-sdk/bucket/components/shopping-cart/shopping-cart-list.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { AnimatePresence } from 'framer-motion'
+import { AnimatePresence } from 'motion/react'
 
 export function ShoppingCartList({ children }: { children: React.ReactNode }) {
   return (

flags-sdk/bucket/components/shopping-cart/shopping-cart-remove-button.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { removeFromCart } from '@/lib/actions'
-import { motion, AnimatePresence } from 'framer-motion'
+import { motion, AnimatePresence } from 'motion/react'
 import { useState } from 'react'
 import type { CartItem } from '@/components/utils/cart-types'
 

flags-sdk/bucket/package.json

@@ -21,9 +21,9 @@
     "@vercel/toolbar": "0.1.33",
     "clsx": "2.1.1",
     "flags": "^4.0.0",
-    "framer-motion": "12.4.7",
+    "motion": "12.17.0",
     "nanoid": "5.1.2",
-    "next": "15.2.1-canary.4",
+    "next": "15.4.0-canary.79",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "sonner": "2.0.1",

flags-sdk/bucket/pnpm-lock.yaml

@@ -1,6 +1,6 @@
 'use client'
 
-import { motion, AnimatePresence } from 'framer-motion'
+import { motion, AnimatePresence } from 'motion/react'
 
 function Spinner() {
   return (

flags-sdk/experimentation-statsig/components/product-detail-page/add-to-cart-button.tsx

@@ -2,7 +2,7 @@
 import type { CartItem } from '@/components/utils/cart-types'
 import { ShoppingBagIcon } from '@heroicons/react/24/outline'
 import { colorToImage } from '@/components/utils/images'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import Image from 'next/image'
 import { ShoppingCartRemoveButton } from './shopping-cart-remove-button'
 import Link from 'next/link'

flags-sdk/experimentation-statsig/components/shopping-cart/shopping-cart-item.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { AnimatePresence } from 'framer-motion'
+import { AnimatePresence } from 'motion/react'
 
 export function ShoppingCartList({ children }: { children: React.ReactNode }) {
   return (

flags-sdk/experimentation-statsig/components/shopping-cart/shopping-cart-list.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { removeFromCart } from '@/lib/actions'
-import { motion, AnimatePresence } from 'framer-motion'
+import { motion, AnimatePresence } from 'motion/react'
 import { useState } from 'react'
 import type { CartItem } from '@/components/utils/cart-types'