Update list to be animated

package.json

@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
+    "framer-motion": "^11.5.5",
     "hono": "^4.5.9",
     "lucide-react": "^0.436.0",
     "next": "^15.0.0-rc.0",

src/app/activity-item-animation.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export const ActivityItemAnimation = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return (
+    <motion.div
+      initial={{
+        margin: "0",
+
+        paddingTop: "0.5rem",
+        paddingBottom: "0.5rem",
+        paddingLeft: "2rem",
+        paddingRight: "2rem",
+
+        backgroundColor: "#222",
+        border: "1px solid transparent",
+      }}
+      whileInView={{
+        marginTop: "1rem",
+        marginLeft: "1rem",
+        marginRight: "1rem",
+
+        paddingLeft: "1rem",
+        paddingRight: "1rem",
+
+        borderRadius: "0.5rem",
+        border: "1px solid #333",
+      }}
+      transition={{
+        duration: 0.3,
+      }}
+      viewport={{
+        amount: 0.6,
+      }}
+    >
+      {children}
+    </motion.div>
+  );
+};

src/app/activity-item.tsx

@@ -4,6 +4,7 @@ import { DoneButton } from "../components/ui/done-button";
 import { formatRelativeDate } from "../lib/format";
 import { url } from "../lib/url";
 import type { ActivityWithLogs } from "../repositories/activity";
+import { ActivityItemAnimation } from "./activity-item-animation";
 
 export const ActivityItem = ({
   activity,
@@ -13,7 +14,7 @@ export const ActivityItem = ({
   const onClickDone = addLog.bind(null, activity);
 
   return (
-    <div key={activity.id} className="h-full w-full px-4">
+    <ActivityItemAnimation key={activity.id}>
       <div className="flex justify-between">
         <div className="flex flex-col gap-1">
           <AnimatedLink
@@ -32,6 +33,6 @@ export const ActivityItem = ({
         </div>
         <DoneButton className="h-10 w-10" onClick={onClickDone} />
       </div>
-    </div>
+    </ActivityItemAnimation>
   );
 };

src/app/page.tsx

@@ -6,7 +6,7 @@ export default async function HomePage() {
 
   return (
     <main className="flex flex-col items-center justify-center gap-10 py-10">
-      <div className="flex flex-col gap-5">
+      <div className="flex flex-col">
         {activities.map((activity) => (
           <ActivityItem key={activity.id} activity={activity} />
         ))}

yarn.lock

@@ -1,6 +1,6 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
-# bun ./bun.lockb --hash: 634C02F4512291B8-a85a4cb674430ee4-98A7E1478A1813B4-e8bc86a824ec6182
+# bun ./bun.lockb --hash: AADD39321BBDCB06-0c47b8cdf31192ea-133FAFE85F8F506C-ce829af826757a94
 
 
 "@alloc/quick-lru@^5.2.0":
@@ -801,6 +801,13 @@ foreground-child@^3.1.0:
     cross-spawn "^7.0.0"
     signal-exit "^4.0.1"
 
+framer-motion@^11.5.5:
+  version "11.5.5"
+  resolved "https://registry.npmjs.org/framer-motion/-/framer-motion-11.5.5.tgz"
+  integrity sha512-4srkT940jYA3bdQRglxod0KoqDvcghYri1A6bTjT02IXvq/EAd6A0tgUnJc5Q2ahhf8n959aLD3yO+XmLmE8OQ==
+  dependencies:
+    tslib "^2.4.0"
+
 fsevents@~2.3.2:
   version "2.3.3"
   resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"