Scrolling

src/app/(home)/page.tsx

@@ -1,24 +1,109 @@
 "use client";
 
 import MorphText from "@/components/Morph";
+import { Card } from "fumadocs-ui/components/card";
 import { useEffect, useState } from "react";
 
+export const mistShowcase = [
+  {
+    title: "Hello World",
+    description:
+      "Mist starts with familiar syntax, designed to feel immediately readable while compiling into efficient Rust code.",
+    code: `fn main() {
+    println("Hello, world!");
+}`,
+  },
+
+  {
+    title: "Rust Compatibility",
+    description:
+      "Mist compiles directly into Rust, meaning you can use existing Rust libraries without breaking your workflow.",
+    code: `use std::fs;
+
+fn main() {
+    let data = fs::read_to_string("file.txt");
+    println(data);
+}`,
+  },
+
+  {
+    title: "Structs",
+    description:
+      "Mist keeps Rust’s struct model intact while making declaration more ergonomic.",
+    code: `struct User {
+    name: String,
+    age: int
+}`,
+  },
+
+  {
+    title: "Classes (Syntax Sugar)",
+    description:
+      "Classes provide a familiar authoring style over Rust structs without introducing a runtime object model.",
+    code: `class Logger {
+    String prefix;
+
+    fn info(self, msg: String) {
+        println(self.prefix + msg);
+    }
+}`,
+  },
+
+  {
+    title: "Inheritance-style Composition",
+    description:
+      "Extends provides inheritance-like syntax while compiling down to Rust-style composition.",
+    code: `struct B extends A {
+    extra: String
+}`,
+  },
+
+  {
+    title: "Zero-cost Abstractions",
+    description:
+      "Mist preserves Rust’s performance model — abstractions compile away entirely at runtime.",
+    code: `fn map<T, U>(arr: Vec<T>, f: fn(T) -> U) -> Vec<U> {
+    let mut out = Vec::new();
+    for x in arr {
+        out.push(f(x));
+    }
+    out
+}`,
+  },
+
+  {
+    title: "Ecosystem Integration",
+    description:
+      "All Rust crates work directly in Mist, keeping the ecosystem fully intact.",
+    code: `use serde_json::json;
+
+fn main() {
+    let data = json!({ "hello": "mist" });
+    println(data);
+}`,
+  },
+];
+
 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">
-      <MorphText text={text} />
+    <div className="flex w-full">
+      <div className="flex-1">
+        {mistShowcase.map((show) => (
+          <section
+            key={show.title}
+            className="h-svh p-20 flex flex-col gap-2 items-center justify-center"
+          >
+            <h1 className="text-5xl bg-linear-to-r from-fd-primary to-fd-muted-foreground bg-clip-text text-transparent">
+              {show.title}
+            </h1>
+            <p className="text-xl text-zinc-400">{show.description}</p>
+          </section>
+        ))}
+      </div>
+
+      <div className="w-[40vw] h-svh sticky top-0 flex items-center justify-center">
+        <Card className="w-full max-w-md h-[calc(100vh-300px)]" title></Card>
+      </div>
     </div>
   );
 }

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>
   );