1,641st Commit

Author: Shyam-Chen

app/package.json

@@ -24,6 +24,7 @@
     "exceljs": "4.4.0",
     "lodash": "4.17.21",
     "markdown-it": "14.1.0",
+    "motion-v": "^1.7.4",
     "nprogress": "0.2.0",
     "ofetch": "1.4.1",
     "valibot": "1.1.0",

app/src/routes/(landing)/motion-scroll/+page.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { Motion } from 'motion-v';
+</script>
+
+<template>
+  <!-- Spacer to force scroll -->
+  <div class="h-screen flex items-center justify-center">
+    <p class="text-xl text-gray-500 animate-bounce">Scroll down ↓</p>
+  </div>
+
+  <div class="flex flex-col items-center py-20 overflow-hidden">
+    <div class="flex flex-col gap-12 w-full max-w-4xl px-6">
+      <!-- Line 1: Appears from Left to Right -->
+      <Motion
+        :initial="{ opacity: 0, x: -100 }"
+        :in-view="{ opacity: 1, x: 0 }"
+        :transition="{ duration: 0.8, ease: 'easeOut' }"
+        class="text-4xl md:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-cyan-500 self-start"
+      >
+        Driven by Motion
+      </Motion>
+
+      <!-- Line 2: Appears from Right to Left -->
+      <Motion
+        :initial="{ opacity: 0, x: 100 }"
+        :in-view="{ opacity: 1, x: 0 }"
+        :transition="{ duration: 0.8, ease: 'easeOut', delay: 0.2 }"
+        class="text-4xl md:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-500 self-end text-right"
+      >
+        Limitless Possibilities
+      </Motion>
+    </div>
+  </div>
+
+  <!-- Extra space at bottom -->
+  <div class="h-screen"></div>
+</template>

app/src/routes/(landing)/stacking-cards/+page.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+// TODO: Refactor using Motion Vue
 import { onMounted, onUnmounted, useTemplateRef } from 'vue';
 
 const stackCards = useTemplateRef('stackCards');
@@ -158,8 +159,12 @@ onUnmounted(() => {
 
 <template>
   <!-- Hero -->
-  <div class="h-screen flex flex-col items-center justify-center text-center p-8">
-    <h1 class="text-4xl md:text-6xl font-black mb-4 tracking-tighter text-slate-900">
+  <div
+    class="h-screen flex flex-col items-center justify-center text-center p-8"
+  >
+    <h1
+      class="text-4xl md:text-6xl font-black mb-4 tracking-tighter text-slate-900"
+    >
       Stacking Cards
     </h1>
     <p class="text-lg text-slate-500">Scroll down to see the effect.</p>
@@ -193,9 +198,12 @@ onUnmounted(() => {
             <path d="m13.8 13a4 4 0 0 1 0 7.2" />
           </svg>
         </div>
-        <h2 class="text-4xl md:text-5xl font-bold mb-4 tracking-tight">Modern Design</h2>
+        <h2 class="text-4xl md:text-5xl font-bold mb-4 tracking-tight">
+          Modern Design
+        </h2>
         <p class="text-xl md:text-2xl opacity-90 max-w-2xl font-light">
-          Craft beautiful user interfaces with utility-first CSS and component-driven architecture.
+          Craft beautiful user interfaces with utility-first CSS and
+          component-driven architecture.
         </p>
       </div>
     </li>
@@ -227,11 +235,16 @@ onUnmounted(() => {
             <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
           </svg>
         </div>
-        <h2 class="relative z-10 text-4xl md:text-5xl font-bold mb-4 text-white tracking-tight">
+        <h2
+          class="relative z-10 text-4xl md:text-5xl font-bold mb-4 text-white tracking-tight"
+        >
           High Performance
         </h2>
-        <p class="relative z-10 text-xl md:text-2xl text-slate-400 max-w-2xl font-light">
-          Powered by Vue 3's reactive core for silky smooth animations and instant feedback.
+        <p
+          class="relative z-10 text-xl md:text-2xl text-slate-400 max-w-2xl font-light"
+        >
+          Powered by Vue 3's reactive core for silky smooth animations and
+          instant feedback.
         </p>
       </div>
     </li>
@@ -255,15 +268,20 @@ onUnmounted(() => {
             stroke-linejoin="round"
             class="w-12 h-12 text-blue-600"
           >
-            <path d="M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6" />
+            <path
+              d="M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6"
+            />
             <path d="m12 12 4 10 1.7-4.3L22 16Z" />
           </svg>
         </div>
-        <h2 class="text-4xl md:text-5xl font-bold mb-4 text-slate-900 tracking-tight">
+        <h2
+          class="text-4xl md:text-5xl font-bold mb-4 text-slate-900 tracking-tight"
+        >
           Interactive
         </h2>
         <p class="text-xl md:text-2xl text-slate-600 max-w-2xl mb-8 font-light">
-          Engage users with scroll-driven interactions that bring your content to life.
+          Engage users with scroll-driven interactions that bring your content
+          to life.
         </p>
         <button
           class="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-full transition-colors shadow-lg shadow-blue-600/30"