From a60a7a3d1f9166110b07342f2b22b7b73fc327f3 Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Wed, 1 Apr 2026 04:02:41 -0500
Subject: [PATCH 1/2] Fix marketing Vercel output config

---
 apps/marketing/next-env.d.ts   | 2 +-
 apps/marketing/next.config.mjs | 3 +++
 turbo.json                     | 4 ++++
 vercel.json                    | 6 ++++++
 4 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 vercel.json

diff --git a/apps/marketing/next-env.d.ts b/apps/marketing/next-env.d.ts
index c4b7818fb..9edff1c7c 100644
--- a/apps/marketing/next-env.d.ts
+++ b/apps/marketing/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/marketing/next.config.mjs b/apps/marketing/next.config.mjs
index bd3419136..8ee7a7de9 100644
--- a/apps/marketing/next.config.mjs
+++ b/apps/marketing/next.config.mjs
@@ -1,5 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  turbopack: {
+    root: new URL("../..", import.meta.url).pathname,
+  },
   typescript: {
     ignoreBuildErrors: true,
   },
diff --git a/turbo.json b/turbo.json
index c9471e538..040ee2c39 100644
--- a/turbo.json
+++ b/turbo.json
@@ -18,6 +18,10 @@
       "dependsOn": ["^build"],
       "outputs": ["dist/**", "dist-electron/**"]
     },
+    "@okcode/marketing#build": {
+      "dependsOn": ["^build"],
+      "outputs": [".next/**", "!.next/cache/**"]
+    },
     "dev": {
       "dependsOn": ["@okcode/contracts#build"],
       "cache": false,
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 000000000..dc2a991dd
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "buildCommand": "bun run build:marketing",
+  "installCommand": "bun install",
+  "outputDirectory": "apps/marketing/.next"
+}

From 034e12478726c56b5bc4e2f02a440c6662c9f1a2 Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Wed, 1 Apr 2026 06:37:55 -0500
Subject: [PATCH 2/2] Add staged motion to marketing hero mockup

- Animate the 3D hero stage with a floating wrapper and pulsing CTA
- Stagger mockup chat content, typing indicator, and active file-tree state
---
 apps/marketing/components/hero-3d-stage.tsx |  64 +++---
 apps/marketing/components/okcode-mockup.tsx | 211 +++++++++++++++-----
 2 files changed, 199 insertions(+), 76 deletions(-)

diff --git a/apps/marketing/components/hero-3d-stage.tsx b/apps/marketing/components/hero-3d-stage.tsx
index dc57ade8a..7a6cf07ae 100644
--- a/apps/marketing/components/hero-3d-stage.tsx
+++ b/apps/marketing/components/hero-3d-stage.tsx
@@ -130,35 +130,53 @@ export function Hero3DStage() {
                 position: "relative",
               }}
             >
-              {/* Transformed base - Use CSS variables */}
+              {/* Floating animation wrapper */}
               <motion.div
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
+                animate={{
+                  y: [0, -10, 0],
+                  rotateZ: [0, -0.3, 0],
+                }}
                 transition={{
-                  delay: 0.5,
-                  duration: 1,
-                  ease: [0.22, 1, 0.36, 1] as const,
+                  duration: 6,
+                  repeat: Infinity,
+                  ease: "easeInOut",
                 }}
-                className="bg-background border border-border"
                 style={{
-                  transformOrigin: "0 0",
-                  backfaceVisibility: "hidden",
-                  WebkitBackfaceVisibility: "hidden",
-                  borderRadius: "10px",
-                  width: "1600px",
-                  height: "900px",
-                  margin: "280px auto auto",
-                  position: "absolute",
-                  top: 0,
-                  bottom: 0,
-                  left: 0,
-                  right: 0,
-                  transform: `translate(${baseTransform.translateX}%) scale(${baseTransform.scale}) rotateX(${baseTransform.rotateX}deg) rotateY(${baseTransform.rotateY}deg) rotate(${baseTransform.rotateZ}deg)`,
-                  transformStyle: "preserve-3d",
-                  overflow: "hidden",
+                  width: "100%",
+                  height: "100%",
+                  position: "relative",
                 }}
               >
-                <OKCodeMockup />
+                {/* Transformed base - Use CSS variables */}
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{
+                    delay: 0.5,
+                    duration: 1,
+                    ease: [0.22, 1, 0.36, 1] as const,
+                  }}
+                  className="bg-background border border-border"
+                  style={{
+                    transformOrigin: "0 0",
+                    backfaceVisibility: "hidden",
+                    WebkitBackfaceVisibility: "hidden",
+                    borderRadius: "10px",
+                    width: "1600px",
+                    height: "900px",
+                    margin: "280px auto auto",
+                    position: "absolute",
+                    top: 0,
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    transform: `translate(${baseTransform.translateX}%) scale(${baseTransform.scale}) rotateX(${baseTransform.rotateX}deg) rotateY(${baseTransform.rotateY}deg) rotate(${baseTransform.rotateZ}deg)`,
+                    transformStyle: "preserve-3d",
+                    overflow: "hidden",
+                  }}
+                >
+                  <OKCodeMockup />
+                </motion.div>
               </motion.div>
             </div>
           </div>
diff --git a/apps/marketing/components/okcode-mockup.tsx b/apps/marketing/components/okcode-mockup.tsx
index cdcac6a9b..2c5c19339 100644
--- a/apps/marketing/components/okcode-mockup.tsx
+++ b/apps/marketing/components/okcode-mockup.tsx
@@ -198,70 +198,126 @@ export function OKCodeMockup() {
         {/* Chat Content */}
         <div className="flex-1 overflow-auto scrollbar-hide p-4">
           {/* Task Title */}
-          <div className="flex justify-end mb-6">
+          <motion.div
+            className="flex justify-end mb-6"
+            initial={{ opacity: 0, y: 12 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 1.8 }}
+          >
             <div className="bg-[#1a1a1a] rounded-lg px-4 py-2 max-w-[200px]">
               <div className="text-[#e5e5e5] text-sm font-medium">install deps</div>
               <div className="text-[#666] text-[10px] mt-0.5">2:47:33 AM</div>
             </div>
-          </div>
+          </motion.div>
 
           {/* AI Response */}
           <div className="space-y-4">
-            <p className="text-[#b3b3b3] text-sm leading-relaxed">
-              {
-                "I'm checking the repo for its package manager and lockfiles first, then I'll install dependencies with the project's intended tool."
-              }
-            </p>
-            <div className="text-[#666] text-[10px]">2:47:44 AM • 11s</div>
+            <motion.div
+              initial={{ opacity: 0, y: 12 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 2.6 }}
+            >
+              <p className="text-[#b3b3b3] text-sm leading-relaxed">
+                {
+                  "I'm checking the repo for its package manager and lockfiles first, then I'll install dependencies with the project's intended tool."
+                }
+              </p>
+              <div className="text-[#666] text-[10px] mt-4">2:47:44 AM • 11s</div>
+            </motion.div>
 
             {/* Collapsed Command */}
-            <CollapsedCommand label="Ran command x3" />
-
-            <p className="text-[#b3b3b3] text-sm leading-relaxed">
-              The repo is pinned to <InlineCode>pnpm</InlineCode> via{" "}
-              <InlineCode>pnpm-lock.yaml</InlineCode>. {"I'm installing with"}{" "}
-              <InlineCode>pnpm install</InlineCode> from the workspace root now.
-            </p>
-            <div className="text-[#666] text-[10px]">2:47:46 AM • 2.5s</div>
-
-            <p className="text-[#b3b3b3] text-sm leading-relaxed">
-              <InlineCode>pnpm</InlineCode> has started linking packages from the lockfile.{" "}
-              {"I'm waiting for it to finish and checking for any postinstall failures."}
-            </p>
-            <div className="text-[#666] text-[10px]">2:47:50 AM • 4.1s</div>
+            <motion.div
+              initial={{ opacity: 0, y: 12 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 3.4 }}
+            >
+              <CollapsedCommand label="Ran command x3" />
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 12 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 4.2 }}
+            >
+              <p className="text-[#b3b3b3] text-sm leading-relaxed">
+                The repo is pinned to <InlineCode>pnpm</InlineCode> via{" "}
+                <InlineCode>pnpm-lock.yaml</InlineCode>. {"I'm installing with"}{" "}
+                <InlineCode>pnpm install</InlineCode> from the workspace root now.
+              </p>
+              <div className="text-[#666] text-[10px] mt-4">2:47:46 AM • 2.5s</div>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 12 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 5.0 }}
+            >
+              <p className="text-[#b3b3b3] text-sm leading-relaxed">
+                <InlineCode>pnpm</InlineCode> has started linking packages from the lockfile.{" "}
+                {"I'm waiting for it to finish and checking for any postinstall failures."}
+              </p>
+              <div className="text-[#666] text-[10px] mt-4">2:47:50 AM • 4.1s</div>
+            </motion.div>
 
             {/* Expanded Command */}
-            <div className="bg-[#111111] rounded-lg border border-[#1e1e1e] overflow-hidden">
-              <div className="px-3 py-2 flex items-center gap-2">
-                <ChevronDown className="w-4 h-4 text-[#666]" />
-                <span className="text-[#b3b3b3] text-xs">
-                  {"Ran command - /bin/zsh -lc 'pnpm install'"}
-                </span>
+            <motion.div
+              initial={{ opacity: 0, y: 12 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 5.8 }}
+            >
+              <div className="bg-[#111111] rounded-lg border border-[#1e1e1e] overflow-hidden">
+                <div className="px-3 py-2 flex items-center gap-2">
+                  <ChevronDown className="w-4 h-4 text-[#666]" />
+                  <span className="text-[#b3b3b3] text-xs">
+                    {"Ran command - /bin/zsh -lc 'pnpm install'"}
+                  </span>
+                </div>
               </div>
-            </div>
+            </motion.div>
 
             {/* Response Status */}
-            <div className="flex items-center justify-center py-2">
-              <div className="px-3 py-1 bg-[#1a1a1a] rounded-full text-[#666] text-[10px] flex items-center gap-1.5">
-                <Clock className="w-3 h-3" />
-                RESPONSE • WORKED FOR 22S
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.4, delay: 6.6 }}
+            >
+              <div className="flex items-center justify-center py-2">
+                <div className="px-3 py-1 bg-[#1a1a1a] rounded-full text-[#666] text-[10px] flex items-center gap-1.5">
+                  <Clock className="w-3 h-3" />
+                  RESPONSE • WORKED FOR 22S
+                </div>
               </div>
-            </div>
-
-            <p className="text-[#b3b3b3] text-sm leading-relaxed">
-              Dependencies are installed with <InlineCode>pnpm</InlineCode>.
-            </p>
-
-            <p className="text-[#b3b3b3] text-sm leading-relaxed">
-              <InlineCode>pnpm install</InlineCode> completed successfully in{" "}
-              <InlineCode>/Users/buns/.okcode/worktrees/psi-claw/okcode-ad7415a3</InlineCode>, and{" "}
-              <InlineCode>node_modules</InlineCode> is now populated. One note:{" "}
-              <InlineCode>pnpm</InlineCode> ignored the <InlineCode>msw</InlineCode> build script
-              under its build-approval policy. If this app depends on <InlineCode>msw</InlineCode>
-              {"'s"} postinstall behavior, run <InlineCode>pnpm approve-builds</InlineCode> and
-              allow it.
-            </p>
-            <div className="text-[#666] text-[10px]">2:47:55 AM • 4.2s</div>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 12 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 7.2 }}
+            >
+              <p className="text-[#b3b3b3] text-sm leading-relaxed">
+                Dependencies are installed with <InlineCode>pnpm</InlineCode>.
+              </p>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 12 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 7.8 }}
+            >
+              <p className="text-[#b3b3b3] text-sm leading-relaxed">
+                <InlineCode>pnpm install</InlineCode> completed successfully in{" "}
+                <InlineCode>/Users/buns/.okcode/worktrees/psi-claw/okcode-ad7415a3</InlineCode>, and{" "}
+                <InlineCode>node_modules</InlineCode> is now populated. One note:{" "}
+                <InlineCode>pnpm</InlineCode> ignored the <InlineCode>msw</InlineCode> build script
+                under its build-approval policy. If this app depends on <InlineCode>msw</InlineCode>
+                {"'s"} postinstall behavior, run <InlineCode>pnpm approve-builds</InlineCode> and
+                allow it.
+              </p>
+              <div className="text-[#666] text-[10px] mt-4">2:47:55 AM • 4.2s</div>
+            </motion.div>
+
+            {/* Typing indicator - appears while messages are loading, fades out after last message */}
+            <TypingIndicator />
           </div>
         </div>
 
@@ -298,9 +354,19 @@ export function OKCodeMockup() {
                 <button className="p-1.5 text-[#666] hover:text-[#999]">
                   <Plus className="w-4 h-4" />
                 </button>
-                <button className="p-2 bg-[#4ade80] rounded-full text-[#0d0d0d]">
+                <motion.button
+                  className="p-2 bg-[#4ade80] rounded-full text-[#0d0d0d]"
+                  animate={{
+                    boxShadow: [
+                      "0 0 0px rgba(74,222,128,0.0)",
+                      "0 0 12px rgba(74,222,128,0.4)",
+                      "0 0 0px rgba(74,222,128,0.0)",
+                    ],
+                  }}
+                  transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
+                >
                   <ChevronRight className="w-4 h-4" />
-                </button>
+                </motion.button>
               </div>
             </div>
           </div>
@@ -467,8 +533,10 @@ function FileTreeItem({
   const iconColor =
     type === "doc" ? "text-[#f59e0b]" : type === "config" ? "text-[#666]" : "text-[#999]";
 
+  const El = active ? motion.div : ("div" as unknown as typeof motion.div);
+
   return (
-    <div
+    <El
       className={`flex items-center gap-1 px-2 py-0.5 text-xs cursor-pointer rounded ${
         active
           ? "bg-[#1e3a5f] text-[#60a5fa]"
@@ -477,11 +545,19 @@ function FileTreeItem({
             : "text-[#999] hover:bg-[#1a1a1a]"
       }`}
       style={{ paddingLeft: `${8 + indent * 12}px` }}
+      {...(active
+        ? {
+            animate: {
+              backgroundColor: ["rgba(30,58,95,0.5)", "rgba(30,58,95,1)", "rgba(30,58,95,0.5)"],
+            },
+            transition: { duration: 3, repeat: Infinity, ease: "easeInOut" as const },
+          }
+        : {})}
     >
       <span className="w-3 h-3" /> {/* Spacer for alignment */}
       <FileText className={`w-3.5 h-3.5 ${iconColor}`} />
       <span>{name}</span>
-    </div>
+    </El>
   );
 }
 
@@ -524,6 +600,35 @@ function TabButton({ label, active = false }: { label: string; active?: boolean
   );
 }
 
+function TypingIndicator() {
+  return (
+    <motion.div
+      className="flex items-center gap-1.5 py-2"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: [0, 1, 1, 0] }}
+      transition={{
+        duration: 8,
+        delay: 2.0,
+        times: [0, 0.02, 0.95, 1],
+      }}
+    >
+      {[0, 1, 2].map((i) => (
+        <motion.div
+          key={i}
+          className="w-1.5 h-1.5 rounded-full bg-[#4ade80]"
+          animate={{ opacity: [0.3, 1, 0.3] }}
+          transition={{
+            duration: 1.2,
+            repeat: Infinity,
+            delay: i * 0.2,
+            ease: "easeInOut",
+          }}
+        />
+      ))}
+    </motion.div>
+  );
+}
+
 function TOCItem({ label }: { label: string }) {
   return (
     <li>