Bouncy Cards

src/components/Card.svelte

@@ -31,20 +31,20 @@
         const centerX = boundingRect.left + boundingRect.width / 2;
         const centerY = boundingRect.top + boundingRect.height / 2;
 
-        const rotateX = (centerY - y) / 10;
+        const rotateX = (centerY - y) / 20;
-        const rotateY = -(centerX - x) / 10;
+        const rotateY = -(centerX - x) / 20;
 
-        cardElement.style.setProperty('--tw-rotate-x', `${rotateX}deg`);
+        cardElement.style.setProperty('--rotate-x', `${rotateX}deg`);
-        cardElement.style.setProperty('--tw-rotate-y', `${rotateY}deg`);
+        cardElement.style.setProperty('--rotate-y', `${rotateY}deg`);
     }
 
     function resetElement() {
-        cardElement.style.setProperty('--tw-rotate-x', "0");
+        cardElement.style.setProperty('--rotate-x', "0");
-        cardElement.style.setProperty('--tw-rotate-y', "0");
+        cardElement.style.setProperty('--rotate-y', "0");
     }
 
     export let extraClasses: string = '';
-    $: classes = twMerge("w-72 border-2 bg-zinc-50 border-gray-100 flex flex-col items-center p-8 m-4 rounded-xl shadow-lg scale-100 transition-transform duration-300 ease-in-out hover:scale-105 dark:bg-zinc-900 dark:border-gray-800 dark:text-gray-100", extraClasses)
+    $: classes = twMerge("w-72 border-2 bg-zinc-50 border-gray-100 flex flex-col items-center p-8 m-4 rounded-xl shadow-lg dark:bg-zinc-900 dark:border-gray-800 dark:text-gray-100", extraClasses)
 </script>
 
 <div class={classes} bind:this={cardElement} on:mousemove={rotateElement} on:mouseleave={resetElement}>
@@ -53,8 +53,13 @@
 
 <style lang="scss">
     div {
+      transform: perspective(1000px) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) !important;
 
-      transform: perspective(1000px) rotateX(var(--tw-rotate-x, 0)) rotateY(var(--tw-rotate-y, 0)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
+      transition: scale 300ms cubic-bezier(.2, 3, .67, .6);
+
+      &:hover {
+        scale: 105%;
+      }
 
       :global(h1) {
         @apply text-xl font-bold mt-4;

src/pages/index.astro

@@ -114,18 +114,18 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
     </div>
     <section class="w-full flex flex-col items-center justify-center shadow-2xl rounded-b-2xl pb-8">
         <div class="py-10 flex flex-col lg:flex-row">
-            <Card>
+            <Card client:idle>
                 <Archive heigth="64" width="64"/>
                 <h1>{t("home.benefits.historic.title")}</h1>
                 <p>{t("home.benefits.historic.description.1")}</p>
                 <p>{t("home.benefits.historic.description.2")}</p>
             </Card>
-            <Card>
+            <Card client:idle>
                 <Rocket heigth="64" width="64"/>
                 <h1>{t("home.benefits.server.title")}</h1>
                 <p>{t("home.benefits.server.description")}</p>
             </Card>
-            <Card>
+            <Card client:idle>
                 <Bell heigth="64" width="64"/>
                 <h1>{t("home.benefits.events.title")}</h1>
                 <p>{t("home.benefits.events.description.1")}</p>