Text morph

src/app/(home)/page.tsx

@@ -1,16 +1,24 @@
-import Link from 'next/link';
+"use client";
+
+import MorphText from "@/components/Morph";
+import { useEffect, useState } from "react";
 
 export default function HomePage() {
+  const [showNext, setShowNext] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowNext(true);
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const text = showNext ? "world hello i32(" : "(hello i32 world";
+
   return (
     <div className="flex flex-col justify-center text-center flex-1">
-      <h1 className="text-2xl font-bold mb-4">Hello World</h1>
+      <MorphText text={text} />
-      <p>
-        You can open{' '}
-        <Link href="/docs" className="font-medium underline">
-          /docs
-        </Link>{' '}
-        and see the documentation.
-      </p>
     </div>
   );
 }

src/components/Morph.tsx

@@ -0,0 +1,44 @@
+import { motion, AnimatePresence } from "framer-motion";
+
+interface MorphTextProps {
+  text: string;
+}
+
+const tokenize = (str: string) => {
+  const counts: Record<string, number> = {};
+  return str.split("").map((char) => {
+    const displayChar = char === " " ? "\u00A0" : char;
+    counts[char] = (counts[char] || 0) + 1;
+    return { char: displayChar, id: `${char}-${counts[char]}` };
+  });
+};
+
+export default function MorphText({ text }: MorphTextProps) {
+  const activeTokens = tokenize(text);
+
+  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">
+      <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>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}