Scrolling

src/components/Morph.tsx

@@ -14,30 +14,46 @@ const tokenize = (str: string) => {
 };
 
 export default function MorphText({ text }: MorphTextProps) {
-  const activeTokens = tokenize(text);
+  const lines = text.split("\n"); // 👈 split by newline
 
   return (
-    <div className="flex flex-wrap gap-x-[0.1em] font-mono text-5xl font-black text-indigo-400 p-10 bg-black rounded-2xl">
+    <div className="flex flex-col">
       <AnimatePresence mode="popLayout">
-        {activeTokens.map(({ char, id }) => (
-          <motion.span
-            key={id}
-            layoutId={id}
-            layout
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -10 }}
-            transition={{
-              type: "tween",
-              stiffness: 200,
-              damping: 20,
-              duration: 1,
-            }}
-            className="inline-block"
-          >
-            {char}
-          </motion.span>
-        ))}
+        {lines.map((line, lineIndex) => {
+          const tokens = tokenize(line);
+
+          // 👇 empty line = real vertical space
+          if (line === "") {
+            return (
+              <div
+                key={lineIndex}
+                className="h-4" // adjust spacing as needed
+              />
+            );
+          }
+
+          return (
+            <div key={lineIndex} className="flex flex-wrap">
+              {tokens.map(({ char, id }) => (
+                <motion.span
+                  key={`${lineIndex}-${id}`}
+                  layoutId={`${lineIndex}-${id}`}
+                  layout
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -10 }}
+                  transition={{
+                    type: "tween",
+                    duration: 1,
+                  }}
+                  className="inline-block"
+                >
+                  {char}
+                </motion.span>
+              ))}
+            </div>
+          );
+        })}
       </AnimatePresence>
     </div>
   );