Add landing page (web/) with Next.js + Tailwind

- Minimal centered layout with Geist sans font - Typing animation cycling through agent names - Light/dark mode toggle via next-themes - Download for Mac button linking to latest DMG - Feature list, GitHub + Docs footer links - Meta tags and Open Graph for SEO - CI: add web typecheck job (tsc --noEmit)
2026-02-09 20:51:27 -08:00 · 2026-02-09 20:51:27 -08:00 · d25f14a79f
commit d25f14a79f
parent 897a79e052
19 changed files with 6414 additions and 0 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@ -7,6 +7,26 @@ on:
  pull_request:

 jobs:
+  web-typecheck:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: web
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Typecheck
+        run: npx tsc --noEmit
+
  ui-tests:
    runs-on: self-hosted
    concurrency:
--- a/web/.gitignore
+++ b/web/.gitignore
@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/web/app/apple-icon.png
+++ b/web/app/apple-icon.png
--- a/web/app/favicon.ico
+++ b/web/app/favicon.ico
--- a/web/app/globals.css
+++ b/web/app/globals.css
@ -0,0 +1,45 @@
+@import "tailwindcss";
+
+:root {
+  --background: #fafafa;
+  --foreground: #171717;
+  --muted: #737373;
+  --border: #e5e5e5;
+  --code-bg: #f5f5f5;
+}
+
+.dark {
+  --background: #0a0a0a;
+  --foreground: #ededed;
+  --muted: #a3a3a3;
+  --border: #262626;
+  --code-bg: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-border: var(--border);
+  --color-code-bg: var(--code-bg);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+}
+
+::selection {
+  background: #3b82f620;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+.animate-blink {
+  animation: blink 1s step-end infinite;
+}
--- a/web/app/icon.png
+++ b/web/app/icon.png
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@ -0,0 +1,60 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { Providers } from "./providers";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "cmux — The terminal built for multitasking",
+  description:
+    "Native macOS terminal built on Ghostty. Vertical tabs, notification rings when agents need attention, split panes, and a socket API for automation.",
+  keywords: [
+    "terminal",
+    "macOS",
+    "coding agents",
+    "Claude Code",
+    "Codex",
+    "Ghostty",
+    "AI",
+  ],
+  openGraph: {
+    title: "cmux — The terminal built for multitasking",
+    description:
+      "Native macOS terminal built on Ghostty. Vertical tabs, notification rings, split panes, and a socket API.",
+    url: "https://cmux.dev",
+    siteName: "cmux",
+    type: "website",
+  },
+  twitter: {
+    card: "summary",
+    title: "cmux — The terminal built for multitasking",
+    description:
+      "Native macOS terminal built on Ghostty. Vertical tabs, notification rings, split panes, and a socket API.",
+  },
+  metadataBase: new URL("https://cmux.dev"),
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}
+      >
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@ -0,0 +1,132 @@
+import Image from "next/image";
+import { TypingTagline } from "./typing";
+import { ThemeToggle } from "./theme";
+
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen justify-center px-6 py-20 sm:py-32">
+      {/* Theme toggle */}
+      <div className="fixed top-5 right-5">
+        <ThemeToggle />
+      </div>
+
+      <main className="w-full max-w-xl">
+        {/* Header */}
+        <div className="flex items-center gap-4 mb-10">
+          <Image
+            src="/icon.png"
+            alt="cmux icon"
+            width={48}
+            height={48}
+            className="rounded-xl"
+            priority
+          />
+          <h1 className="text-2xl font-semibold tracking-tight">cmux</h1>
+        </div>
+
+        {/* Tagline */}
+        <p className="text-lg leading-relaxed mb-3 text-foreground">
+          A terminal built for <TypingTagline />
+        </p>
+        <p className="text-base leading-relaxed text-muted mb-12">
+          Native macOS app built on Ghostty. Vertical tabs, notification rings
+          when agents need attention, split panes, and a socket API for
+          automation.
+        </p>
+
+        {/* Download */}
+        <div className="mb-12">
+          <a
+            href="https://github.com/manaflow-ai/cmux/releases/latest/download/cmux-macos.dmg"
+            className="inline-flex items-center gap-2.5 rounded-full border border-border bg-background px-5 py-2.5 text-[15px] font-medium text-foreground hover:bg-code-bg transition-colors"
+          >
+            <svg width="16" height="19" viewBox="0 0 814 1000" fill="currentColor">
+              <path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57.8-155.5-127.4c-58.3-81.6-105.6-208.4-105.6-328.6 0-193 125.6-295.5 249.2-295.5 65.7 0 120.5 43.1 161.7 43.1 39.2 0 100.4-45.8 175.1-45.8 28.3 0 130.3 2.6 197.2 99.2zM554.1 159.4c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.9 32.4-57.2 83.6-57.2 135.4 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 137.6-71.2z" />
+            </svg>
+            Download for Mac
+          </a>
+        </div>
+
+        {/* Features */}
+        <section className="mb-12">
+          <h2 className="text-xs font-medium text-muted tracking-wider mb-3">
+            Features
+          </h2>
+          <ul className="space-y-3 text-[15px] leading-relaxed">
+            <li className="flex gap-3">
+              <span className="text-muted shrink-0">-</span>
+              <span>
+                <strong className="font-medium">Notification rings</strong>
+                <span className="text-muted">
+                  : tabs flash when agents need your input
+                </span>
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="text-muted shrink-0">-</span>
+              <span>
+                <strong className="font-medium">Vertical tabs</strong>
+                <span className="text-muted">
+                  : see all your terminals at a glance in a sidebar
+                </span>
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="text-muted shrink-0">-</span>
+              <span>
+                <strong className="font-medium">GPU-accelerated</strong>
+                <span className="text-muted">
+                  : powered by libghostty for smooth rendering
+                </span>
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="text-muted shrink-0">-</span>
+              <span>
+                <strong className="font-medium">Split panes</strong>
+                <span className="text-muted">
+                  : horizontal and vertical splits within each tab
+                </span>
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="text-muted shrink-0">-</span>
+              <span>
+                <strong className="font-medium">Socket API</strong>
+                <span className="text-muted">
+                  : programmatic control for creating tabs, sending input
+                </span>
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="text-muted shrink-0">-</span>
+              <span>
+                <strong className="font-medium">Lightweight</strong>
+                <span className="text-muted">
+                  : native Swift + AppKit, no Electron
+                </span>
+              </span>
+            </li>
+          </ul>
+        </section>
+
+        {/* Footer */}
+        <footer className="flex items-center gap-4 text-sm text-muted pt-4 border-t border-border">
+          <a
+            href="https://github.com/manaflow-ai/cmux"
+            className="hover:text-foreground transition-colors"
+          >
+            GitHub
+          </a>
+          <a
+            href="https://cmux.term.sh"
+            className="hover:text-foreground transition-colors"
+          >
+            Docs
+          </a>
+        </footer>
+      </main>
+    </div>
+  );
+}
--- a/web/app/providers.tsx
+++ b/web/app/providers.tsx
@ -0,0 +1,11 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="dark" disableTransitionOnChange>
+      {children}
+    </ThemeProvider>
+  );
+}
--- a/web/app/theme.tsx
+++ b/web/app/theme.tsx
@ -0,0 +1,57 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) return <div className="w-4 h-4" />;
+
+  return (
+    <button
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+      className="text-muted hover:text-foreground transition-colors cursor-pointer"
+      aria-label="Toggle theme"
+    >
+      {resolvedTheme === "dark" ? (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <circle cx="12" cy="12" r="5" />
+          <line x1="12" y1="1" x2="12" y2="3" />
+          <line x1="12" y1="21" x2="12" y2="23" />
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+          <line x1="1" y1="12" x2="3" y2="12" />
+          <line x1="21" y1="12" x2="23" y2="12" />
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+        </svg>
+      ) : (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+      )}
+    </button>
+  );
+}
--- a/web/app/typing.tsx
+++ b/web/app/typing.tsx
@ -0,0 +1,102 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const phrases = [
+  "coding agents",
+  "multitasking",
+  "Claude Code",
+  "Codex",
+  "Opencode",
+  "Gemini",
+];
+
+export function TypingTagline() {
+  const [phraseIndex, setPhraseIndex] = useState(0);
+  const [charIndex, setCharIndex] = useState(0);
+  const [deleting, setDeleting] = useState(false);
+  const [showControls, setShowControls] = useState(false);
+  const [topOffset, setTopOffset] = useState(0);
+  const [blink, setBlink] = useState(true);
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "." && e.metaKey) {
+        e.preventDefault();
+        setShowControls((s) => !s);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, []);
+
+  useEffect(() => {
+    const phrase = phrases[phraseIndex];
+
+    if (!deleting && charIndex === phrase.length) {
+      const timeout = setTimeout(() => setDeleting(true), 2000);
+      return () => clearTimeout(timeout);
+    }
+
+    if (deleting && charIndex === 0) {
+      setDeleting(false);
+      setPhraseIndex((i) => (i + 1) % phrases.length);
+      return;
+    }
+
+    const speed = deleting ? 30 : 60;
+    const timeout = setTimeout(() => {
+      setCharIndex((c) => c + (deleting ? -1 : 1));
+    }, speed);
+
+    return () => clearTimeout(timeout);
+  }, [charIndex, deleting, phraseIndex]);
+
+  const phrase = phrases[phraseIndex];
+  const displayed = phrase.slice(0, charIndex);
+  const tailwindClass =
+    topOffset > 0
+      ? `-top-[${topOffset}px]`
+      : topOffset < 0
+        ? `top-[${Math.abs(topOffset)}px]`
+        : "";
+
+  return (
+    <span>
+      {displayed}
+      <span
+        className={`inline-block w-[2px] h-[1.1em] bg-foreground/70 ml-[1px] ${blink ? "animate-blink" : ""}`}
+        style={{ position: "relative", top: `${-topOffset}px` }}
+        onDoubleClick={() => setShowControls((s) => !s)}
+      />
+      {showControls && (
+        <span className="fixed bottom-5 right-5 z-50 flex w-[420px] items-center gap-3 rounded-xl bg-[#222] px-4 py-3 font-mono text-xs text-white shadow-lg">
+          <label className="flex items-center gap-2">
+            top:
+            <input
+              type="range"
+              min={-5}
+              max={5}
+              step={0.5}
+              value={topOffset}
+              onChange={(e) => setTopOffset(parseFloat(e.target.value))}
+              className="w-24"
+            />
+            <span className="w-12">{topOffset}px</span>
+          </label>
+          <label className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={blink}
+              onChange={(e) => setBlink(e.target.checked)}
+            />
+            blink
+          </label>
+          <code className="select-all cursor-pointer rounded bg-[#333] px-2 py-0.5">
+            {tailwindClass || "0px"}
+          </code>
+        </span>
+      )}
+    </span>
+  );
+}
--- a/web/eslint.config.mjs
+++ b/web/eslint.config.mjs
@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;
--- a/web/next.config.ts
+++ b/web/next.config.ts
@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@ -0,0 +1,35 @@
+{
+  "name": "web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "next": "16.1.6",
+    "next-themes": "^0.4.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  },
+  "ignoreScripts": [
+    "sharp",
+    "unrs-resolver"
+  ],
+  "trustedDependencies": [
+    "sharp",
+    "unrs-resolver"
+  ]
+}
--- a/web/postcss.config.mjs
+++ b/web/postcss.config.mjs
@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;
--- a/web/public/icon.png
+++ b/web/public/icon.png
--- a/web/public/macos-badge.png
+++ b/web/public/macos-badge.png
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}