tilt animation

Author: eugene0111

app/collections/page.jsx

@@ -2,16 +2,17 @@ import CollectionCard from "@/components/CollectionCard";
 import fetchData from "@/lib/sanity/fetchData";
 import dayjs from "dayjs";
 import _ from "lodash";
+import TiltWrapper from "@/components/TiltWrapper";
 
 export default async function Collections() {
   const collections = await fetchData("collection");
 
   const collectionGroups = _.groupBy(collections, (collection) =>
-    dayjs(collection.date).year()
+    dayjs(collection.date).year(),
   );
 
   const sortedCollectionGroups = Object.entries(collectionGroups).sort(
-    ([yearA], [yearB]) => yearB - yearA 
+    ([yearA], [yearB]) => yearB - yearA,
   );
 
   return (
@@ -28,7 +29,9 @@ export default async function Collections() {
             <div className="m-7 text-center text-3xl">{year}</div>
             <div className="flex flex-wrap items-center justify-around gap-20">
               {sortedCollections.map((collection) => (
-                <CollectionCard key={collection._id} collection={collection} />
+                <TiltWrapper key={collection._id}>
+                  <CollectionCard collection={collection} />
+                </TiltWrapper>
               ))}
             </div>
           </div>

components/TiltWrapper.jsx

@@ -0,0 +1,22 @@
+"use client";
+import { Tilt } from 'react-tilt';
+
+const defaultOptions = {
+	reverse:        false, 
+	max:            15,
+	perspective:    1000,
+	scale:          1.05,
+	speed:          1000,
+	transition:     true, 
+	axis:           null, 
+	reset:          true,
+	easing:         "cubic-bezier(.03,.98,.52,.99)",
+}
+
+export default function TiltWrapper({ children, className }) {
+  return (
+    <Tilt options={defaultOptions} className={className}>
+      {children}
+    </Tilt>
+  );
+}

package-lock.json

@@ -25,6 +25,7 @@
     "react-dom": "18.3.1",
     "react-icons": "^4.12.0",
     "react-pdf": "^6.2.2",
+    "react-tilt": "^1.0.2",
     "sharp": "^0.32.6",
     "swiper": "^10.3.1",
     "tailwind-merge": "^1.14.0",