💥 Add motion to blog pages for testing

Author: EightBitByte

package.json

@@ -21,6 +21,7 @@
     "clsx": "^2.1.1",
     "gray-matter": "^4.0.3",
     "lucide-react": "^0.523.0",
+    "motion": "^12.23.12",
     "next": "15.3.4",
     "next-mdx-remote": "^5.0.0",
     "next-themes": "^0.4.6",

pnpm-lock.yaml

@@ -9,6 +9,7 @@ import { getMDXComponents } from "@/mdx-components";
 import { posts } from "@/utils/posts";
 import rehypeSlug from "rehype-slug";
 import BlogPostTracker from "@/components/blog-post-tracker";
+import Transition from "@/components/ui/transition";
 
 type PageProps = {
   params: Promise<{
@@ -34,24 +35,26 @@ export default async function Page({ params }: {
   return (
     <main className="md:max-w-3xl w-full px-8 m-auto">
       <BlogPostTracker postId={idx}/>
-      <h1
-        className={`${post.title.length <= 20 ? "text-4xl" : "text-3xl"} font-bold text-foreground`}
-      >
-        {post.title}
-      </h1>
-      <h2 className="text-xl mb-2 text-foreground/60">
-        {post.date} • {post.author}
-      </h2>
-      <MDXRemote
-        source={post.content}
-        components={components}
-        options={{
-          mdxOptions: {
-            remarkPlugins: [remarkGfm],
-            rehypePlugins: [rehypeUnwrapImages, rehypeSlug],
-          },
-        }}
-      />
+      <Transition>
+        <h1
+          className={`${post.title.length <= 20 ? "text-4xl" : "text-3xl"} font-bold text-foreground`}
+        >
+          {post.title}
+        </h1>
+        <h2 className="text-xl mb-2 text-foreground/60">
+          {post.date} • {post.author}
+        </h2>
+        <MDXRemote
+          source={post.content}
+          components={components}
+          options={{
+            mdxOptions: {
+              remarkPlugins: [remarkGfm],
+              rehypePlugins: [rehypeUnwrapImages, rehypeSlug],
+            },
+          }}
+        />
+      </Transition>
       {(prev || next) && (
         <BlogFooter prevSlug={prev?.slug} nextSlug={next?.slug} />
       )}

src/app/blog/posts/[slug]/page.tsx

@@ -9,6 +9,7 @@ import AchievementsProvider from "@/components/achievements-provider";
 import { posts } from "@/utils/posts";
 import { ToasterProvider } from "@/components/toaster-provider";
 import ShopProvider from "@/components/shop-provider";
+import Transition from "@/components/ui/transition";
 
 const karlaSans = Karla({
   variable: "--font-karla",

src/app/layout.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { motion } from 'motion/react';
+
+export default function Transition({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <motion.div
+      initial={{y: 20, opacity: 0}}
+      animate={{y: 0, opacity: 1}}
+      transition={{ease: 'easeInOut', duration: 0.75}}
+    >
+      {children}
+    </motion.div>
+  )
+}