moved to motion.dev

bad

@@ -1 +0,0 @@
-f7360d42-dcc1-4e1e-a90b-ef2295298872

package.json

@@ -35,9 +35,9 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "drizzle-orm": "0.33.0",
-    "framer-motion": "^11.11.8",
     "jotai": "^2.10.0",
     "lucide-react": "^0.452.0",
+    "motion": "^12.18.1",
     "pixi-viewport": "^5.0.3",
     "pixi.js": "^7.0.0",
     "pixi.js-legacy": "^7.4.2",
@@ -69,6 +69,7 @@
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.8.1",
     "vite": "^5.4.8",
+    "vite-bundle-analyzer": "^0.22.3",
     "vite-imagetools": "^7.0.4"
   }
 }

src/Shell.tsx

@@ -1,6 +1,6 @@
 import { type PropsWithChildren, useEffect, useRef, useState } from "react";
 import { Button } from "./components/Button";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import {
   GitBranch,
   History,

src/components/Board.tsx

@@ -10,8 +10,8 @@ import {
   type LoadedTexture,
   type LoadedTheme,
   type Theme,
-  useTheme,
 } from "../themes/Theme";
+import { useTheme } from "../themes/useTheme";
 import { Container, Sprite, Stage, useTick } from "@pixi/react";
 import Viewport from "./pixi/PixiViewport";
 import type { Viewport as PixiViewport } from "pixi-viewport";

src/components/BounceImg.tsx

@@ -1,4 +1,4 @@
-import { animate, motion } from "framer-motion";
+import { animate, motion } from "motion/react";
 import { useRef } from "react";
 
 const BounceImg = ({ src, className }: { src: string; className?: string }) => {

src/components/Feed/Feed.tsx

@@ -1,4 +1,4 @@
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 import { useAtom } from "jotai";
 import { feedItemsAtom, lootboxResultAtom } from "../../atoms";
 import FeedItemElement from "./FeedItem";

src/components/Feed/FeedItem.tsx

@@ -1,4 +1,4 @@
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import type { PropsWithChildren } from "react";
 import { formatTimeSpan } from "../../../shared/time";
 import GemsIcon from "../GemIcon";

src/components/LazyBoard.tsx

@@ -0,0 +1,3 @@
+import { lazy } from "react";
+
+export const Board = lazy(() => import("./Board"));

src/main.tsx

@@ -12,7 +12,7 @@ import Home from "./views/home/Home.tsx";
 import Settings from "./views/settings/Settings.tsx";
 import MatchHistory from "./views/match-history/MatchHistory.tsx";
 import Collection from "./views/collection/Collection.tsx";
-import { AnimatePresence } from "framer-motion";
+import { AnimatePresence } from "motion/react";
 import Store from "./views/store/Store.tsx";
 import Profile from "./views/profile/Profile.tsx";
 

src/themes/Theme.ts

@@ -1,10 +1,9 @@
-import { Assets, Texture } from "pixi.js";
-import { useEffect, useState } from "react";
+import type { Texture } from "pixi.js";
 
 type Png = typeof import("*.png");
 type LazySprite = () => Promise<Png>;
 
-interface WeightedLazySprites {
+export interface WeightedLazySprites {
   weight: number;
   sprite: LazySprite;
 }
@@ -54,36 +53,3 @@ export const mainWithSpecials = (
     ...specials.map((sprite) => ({ weight: 0.05, sprite })),
   ];
 };
-
-export const useTheme = (theme: Theme) => {
-  const [loadedTheme, setLoadedTheme] = useState<LoadedTheme | undefined>(
-    undefined
-  );
-  useEffect(() => {
-    const loadTheme = async () => {
-      const loadedEntries = await Promise.all(
-        Object.entries(theme).map(async ([key, value]) => {
-          let loaded = value;
-          if (typeof value === "function") {
-            loaded = await Assets.load((await value()).default);
-          }
-          if (Array.isArray(value)) {
-            loaded = await Promise.all(
-              loaded.map(async (sprite: WeightedLazySprites) => {
-                return {
-                  weight: sprite.weight,
-                  sprite: await Assets.load((await sprite.sprite()).default),
-                };
-              })
-            );
-          }
-
-          return [key, loaded] as const;
-        })
-      );
-      setLoadedTheme(Object.fromEntries(loadedEntries) as LoadedTheme);
-    };
-    loadTheme();
-  }, [theme]);
-  return loadedTheme;
-};

src/themes/useTheme.ts

@@ -0,0 +1,36 @@
+import { Assets } from "pixi.js";
+import { useState, useEffect } from "react";
+import type { Theme, LoadedTheme, WeightedLazySprites } from "./Theme";
+
+export const useTheme = (theme: Theme) => {
+  const [loadedTheme, setLoadedTheme] = useState<LoadedTheme | undefined>(
+    undefined,
+  );
+  useEffect(() => {
+    const loadTheme = async () => {
+      const loadedEntries = await Promise.all(
+        Object.entries(theme).map(async ([key, value]) => {
+          let loaded = value;
+          if (typeof value === "function") {
+            loaded = await Assets.load((await value()).default);
+          }
+          if (Array.isArray(value)) {
+            loaded = await Promise.all(
+              loaded.map(async (sprite: WeightedLazySprites) => {
+                return {
+                  weight: sprite.weight,
+                  sprite: await Assets.load((await sprite.sprite()).default),
+                };
+              }),
+            );
+          }
+
+          return [key, loaded] as const;
+        }),
+      );
+      setLoadedTheme(Object.fromEntries(loadedEntries) as LoadedTheme);
+    };
+    loadTheme();
+  }, [theme]);
+  return loadedTheme;
+};

src/views/collection/Collection.tsx

@@ -1,6 +1,6 @@
 import { Ellipsis } from "lucide-react";
 import { testBoard } from "../../../shared/testBoard";
-import Board from "../../components/Board";
+import { Board } from "../../components/LazyBoard";
 import { Button } from "../../components/Button";
 import { themes } from "../../themes";
 import {

src/views/endless/Endless.tsx

@@ -1,10 +1,10 @@
-import Board from "../../components/Board";
 import { useWSMutation, useWSQuery } from "../../hooks";
 import { useAtom } from "jotai";
 import { gameIdAtom } from "../../atoms";
 import { Button } from "../../components/Button";
 import LeaderboardButton from "../../components/LeaderboardButton";
 import { Fragment, useEffect } from "react";
+import { Board } from "../../components/LazyBoard";
 
 interface EndlessProps {
   gameId?: string;

src/views/home/Home.tsx

@@ -1,4 +1,4 @@
-import { animate, motion, useMotionValue, useTransform } from "framer-motion";
+import { animate, motion, useMotionValue, useTransform } from "motion/react";
 import { useEffect } from "react";
 import { useWSQuery } from "../../hooks";
 import { Tag } from "../../components/Tag";

src/views/home/Section.tsx

@@ -4,7 +4,7 @@ import {
   useMotionTemplate,
   useScroll,
   useTransform,
-} from "framer-motion";
+} from "motion/react";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "../../lib/utils";
 
@@ -48,8 +48,10 @@ const Section = ({ text, image, left }: SectionProps) => {
         className="md:w-[50%] h-90"
         // float up and down
         animate={{
-          translateY: [0, 10, 0],
-          translateX: [0, 5, 0],
+          // translate: ["0 0", "5 10", "0 0"],
+          // transform: ["translate"]
+          x: [0, 10, 0],
+          y: [0, 5, 0],
         }}
         transition={{
           repeat: Infinity,
@@ -71,7 +73,7 @@ const Section = ({ text, image, left }: SectionProps) => {
               translateY,
             }}
             transition={{
-              type: "just",
+              type: "spring",
               delay: 0.5,
             }}
             srcSet={image.map((i) => `${i.src} ${i.width}w`).join(", ")}

src/views/profile/Profile.tsx

@@ -40,7 +40,9 @@ const Profile: React.FC = () => {
         <div className="border-l-white border-l p-2 text-lg">
           <p>Total Games: {profile?.totalGames}</p>
           <p>Highest Stage: {profile?.highestStage}</p>
-          <p>Average Stage: {profile?.averageStage}</p>
+          <p>
+            Average Stage: {Math.round(profile?.averageStage ?? 1 * 100) / 100}
+          </p>
         </div>
       </div>
       <div className="flex flex-col gap-4">

src/views/store/Store.tsx

@@ -16,9 +16,7 @@ import { lootboxResultAtom } from "../../atoms";
 import { useAtom } from "jotai";
 import { useEffect } from "react";
 import Particles, { initParticlesEngine } from "@tsparticles/react";
-import { loadSlim } from "@tsparticles/slim";
-import { loadSeaAnemonePreset } from "@tsparticles/preset-sea-anemone";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import BounceImg from "../../components/BounceImg";
 
 const Store = () => {
@@ -29,17 +27,24 @@ const Store = () => {
 
   // this should be run only once per application lifetime
   useEffect(() => {
-    initParticlesEngine(async (engine) => {
-      // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
-      // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
-      // starting from v2 you can add only the features you need reducing the bundle size
-      //await loadAll(engine);
-      //await loadFull(engine);
-      await loadSlim(engine);
-      await loadSeaAnemonePreset(engine);
+    const cb = async () => {
+      const { loadSlim } = await import("@tsparticles/slim");
+      const { loadSeaAnemonePreset } = await import(
+        "@tsparticles/preset-sea-anemone"
+      );
+      initParticlesEngine(async (engine) => {
+        // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
+        // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+        // starting from v2 you can add only the features you need reducing the bundle size
+        //await loadAll(engine);
+        //await loadFull(engine);
+        await loadSlim(engine);
+        await loadSeaAnemonePreset(engine);
 
-      //await loadBasic(engine);
-    });
+        //await loadBasic(engine);
+      });
+    };
+    cb();
   }, []);
 
   return (

vite.config.ts

@@ -2,11 +2,12 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import tailwindcss from "@tailwindcss/vite";
 import { imagetools } from "vite-imagetools";
+import { analyzer } from "vite-bundle-analyzer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
     port: 3003,
   },
-  plugins: [react(), tailwindcss(), imagetools()],
+  plugins: [react(), tailwindcss(), imagetools(), analyzer()],
 });