+
-
- {/* Primary differentiators - 2x2 */}
-
- {[
- {
- title: "Self-hosted",
- description:
- "Agents run on your machine with your full dev environment. Use your tools, your configs and your skills.",
- icon: (
-
- ),
- },
- {
- title: "Multi-provider",
- description:
- "Claude Code, Codex, and OpenCode through the same interface. Pick the right model for each job.",
- icon: (
-
- ),
- },
- {
- title: "Voice control",
- description:
- "Dictate tasks or talk through problems in voice mode. Hands-free when you need it.",
- icon: (
-
- ),
- },
- {
- title: "Cross-device",
- description:
- "iOS, Android, desktop, web, and CLI. Start work at your desk, check in from your phone, script it from the terminal.",
- icon: (
-
- ),
- },
- ].map((feature, i) => (
-
+
+
+ );
+}
+
+function MultiProviderSection() {
+ const providers = [
+ { name: "Claude Code", icon:
+
+ );
+}
+
+function SelfHostedDiagram() {
+ const clients = [
+ { name: "Desktop", icon: },
+ { name: "Web", icon: },
+ { name: "Mobile", icon: },
+ { name: "CLI", icon: },
+ ];
+ const hosts = ["MacBook Pro", "Hetzner VM", "Dev server"];
+ const containerRef = React.useRef(null);
+ const clientRefs = React.useRef<(HTMLDivElement | null)[]>([]);
+ const hostRefs = React.useRef<(HTMLDivElement | null)[]>([]);
+ const centerRef = React.useRef(null);
+ const [paths, setPaths] = React.useState<{ left: string[]; right: string[] }>({ left: [], right: [] });
+
+ React.useEffect(() => {
+ function computePaths() {
+ const container = containerRef.current;
+ const center = centerRef.current;
+ if (!container || !center) return;
+
+ const cRect = container.getBoundingClientRect();
+ const mRect = center.getBoundingClientRect();
+ const midL = mRect.left - cRect.left;
+ const midR = mRect.right - cRect.left;
+ const midY = mRect.top - cRect.top + mRect.height / 2;
+
+ const left = clientRefs.current.map((el) => {
+ if (!el) return "";
+ const r = el.getBoundingClientRect();
+ const x1 = r.right - cRect.left;
+ const y1 = r.top - cRect.top + r.height / 2;
+ const cpx = x1 + (midL - x1) * 0.6;
+ return `M${x1},${y1} C${cpx},${y1} ${midL - (midL - x1) * 0.3},${midY} ${midL},${midY}`;
+ });
+
+ const right = hostRefs.current.map((el) => {
+ if (!el) return "";
+ const r = el.getBoundingClientRect();
+ const x2 = r.left - cRect.left;
+ const y2 = r.top - cRect.top + r.height / 2;
+ const cpx = midR + (x2 - midR) * 0.4;
+ return `M${midR},${midY} C${cpx},${midY} ${x2 - (x2 - midR) * 0.3},${y2} ${x2},${y2}`;
+ });
+
+ setPaths({ left, right });
+ }
+
+ computePaths();
+ window.addEventListener("resize", computePaths);
+ return () => window.removeEventListener("resize", computePaths);
+ }, []);
+
+ return (
+ <>
+ {/* Mobile: vertical stack */}
+
+
+ );
+}
+
+
+function ShortcutsSection() {
+ const shortcuts = [
+ { keys: ["⌘", "1-9"], action: "Switch panels" },
+ { keys: ["⌘", "D"], action: "Split vertical" },
+ { keys: ["⌘", "Shift", "D"], action: "Split horizontal" },
+ { keys: ["⌘", "W"], action: "Close panel" },
+ { keys: ["⌘", "N"], action: "New agent" },
+ { keys: ["⌘", "K"], action: "Command palette" },
+ ];
+
+ return (
+
+
+ );
+}
+
+function VoiceWaveform() {
+ const barCount = 48;
+ return (
+ ("dictation");
+ const [wordIndex, setWordIndex] = React.useState(0);
+
+ React.useEffect(() => {
+ if (phase === "dictation") {
+ if (wordIndex < USER_WORDS.length) {
+ const t = setTimeout(() => setWordIndex((w) => w + 1), WORD_APPEAR_MS);
+ return () => clearTimeout(t);
+ }
+ setPhase("dictation-flush");
+ setWordIndex(0);
+ return;
+ }
+ if (phase === "dictation-flush") {
+ if (wordIndex < DICTATION_LAG) {
+ const t = setTimeout(() => setWordIndex((w) => w + 1), WORD_APPEAR_MS);
+ return () => clearTimeout(t);
+ }
+ const t = setTimeout(() => { setPhase("pause"); }, PHASE_GAP_MS);
+ return () => clearTimeout(t);
+ }
+ if (phase === "pause") {
+ const t = setTimeout(() => { setPhase("response"); setWordIndex(0); }, PHASE_GAP_MS);
+ return () => clearTimeout(t);
+ }
+ if (phase === "response") {
+ if (wordIndex < RESPONSE_WORDS.length) {
+ const t = setTimeout(() => setWordIndex((w) => w + 1), RESPONSE_WORD_MS);
+ return () => clearTimeout(t);
+ }
+ setPhase("response-flush");
+ setWordIndex(0);
+ return;
+ }
+ if (phase === "response-flush") {
+ if (wordIndex < RESPONSE_LAG) {
+ const t = setTimeout(() => setWordIndex((w) => w + 1), RESPONSE_WORD_MS);
+ return () => clearTimeout(t);
+ }
+ const t = setTimeout(() => { setPhase("done"); }, LOOP_PAUSE_MS);
+ return () => clearTimeout(t);
+ }
+ if (phase === "done") {
+ const t = setTimeout(() => { setPhase("dictation"); setWordIndex(0); }, 0);
+ return () => clearTimeout(t);
+ }
+ }, [phase, wordIndex]);
+
+ // Compute effective word indices for rendering
+ let dictationWordIndex: number;
+ if (phase === "dictation") {
+ dictationWordIndex = wordIndex;
+ } else if (phase === "dictation-flush") {
+ dictationWordIndex = USER_WORDS.length + wordIndex;
+ } else {
+ dictationWordIndex = USER_WORDS.length + DICTATION_LAG;
+ }
+
+ let responseWordIndex: number;
+ if (phase === "response") {
+ responseWordIndex = wordIndex;
+ } else if (phase === "response-flush") {
+ responseWordIndex = RESPONSE_WORDS.length + wordIndex;
+ } else if (phase === "done") {
+ responseWordIndex = RESPONSE_WORDS.length + RESPONSE_LAG;
+ } else {
+ responseWordIndex = 0;
+ }
+
+ const showResponse = phase === "response" || phase === "response-flush" || phase === "done";
+
+ return { dictationWordIndex, responseWordIndex, showResponse };
+}
+
+function StreamingWords({ words, wordIndex, confirmLag = 2 }: { words: string[]; wordIndex: number; confirmLag?: number }) {
+ return (
+
+
);
}
@@ -849,94 +1184,131 @@ interface CLIExample {
const cliExamples: CLIExample[] = [
{
- title: "Launch and monitor",
+ title: "Run agents",
description:
- "Give an agent a task and watch it work. The --worktree flag spins up an isolated git branch so you can run multiple agents on the same repo without conflicts.",
- code: `paseo run --provider claude/opus-4.6 "implement user authentication"
-paseo run --provider codex/gpt-5.4 --worktree feature-x "implement feature X"
+ "Launch agents locally or on any remote host. The --worktree flag spins up an isolated git branch so you can run multiple agents on the same repo without conflicts.",
+ code: `paseo run "implement user authentication"
+paseo run --provider codex --worktree feature-x "implement feature X"
+paseo run --host devbox:6767 "run the full test suite"
paseo ls # list running agents
paseo attach abc123 # stream live output
paseo send abc123 "also add tests" # follow-up task`,
},
{
- title: "Orchestration",
+ title: "Loops",
description:
- "Agents can use the CLI too. Tell one agent to spawn others, split up the work, and pull everything together when they're done.",
- code: `# Spawn two agents in parallel, wait, then synthesize
-paseo run --detach "implement the frontend" --name frontend
-paseo run --detach "implement the API layer" --name api
+ "Have one agent do the work, another verify the result, and loop until it passes. Built-in, no shell scripting needed.",
+ code: `# Worker-verifier loop: fix tests until they pass
+paseo loop run "make all tests pass" \\
+ --verify "verify tests pass and the code is production-ready" \\
+ --verify-check "npm test" \\
+ --max-iterations 5
-paseo wait frontend api
-
-paseo run "review both branches and write an integration plan"`,
+paseo loop ls # list running loops
+paseo loop logs abc123 # stream loop output`,
},
{
- title: "Structured output",
+ title: "Schedules",
description:
- "Pass a JSON schema and get typed data back from any agent run. No output parsing, just the structured result you asked for.",
- code: `result=$(paseo run \\
- --output-schema '{
- "type": "object",
- "properties": {
- "severity": { "type": "string", "enum": ["low", "medium", "high"] },
- "issues": { "type": "array", "items": { "type": "string" } }
- },
- "required": ["severity", "issues"]
- }' \\
- "audit this codebase for security issues")
+ "Run agents on a cron schedule. Automate recurring tasks like dependency updates, security audits, or report generation.",
+ code: `# Run a security audit every Monday at 9am
+paseo schedule create --cron "0 9 * * 1" \\
+ "audit the codebase for security issues and open PRs for fixes"
-echo $result | jq '.severity' # "high"
-echo $result | jq '.issues[0]' # "SQL injection on line 42"`,
- },
- {
- title: "Remote",
- description:
- "Point at any daemon on your network or over the internet. Run agents on a beefy server from your laptop.",
- code: `# Set once for the session
-export PASEO_HOST=workstation.local:6767
-paseo run "run the full test suite"
-paseo ls
-
-# Or per-command
-paseo --host gpu-server:6767 run "train the model"
-paseo --host gpu-server:6767 attach abc123`,
- },
- {
- title: "Worker-judge loops",
- description:
- "Have one agent do the work and another judge the result. Loop until it passes. Good for test fixes, code review, or any task with clear acceptance criteria.",
- code: `while true; do
- paseo run "make all tests pass"
-
- verdict=$(paseo run \\
- --output-schema '{"type":"object","properties":{"passed":{"type":"boolean"}},"required":["passed"]}' \\
- "verify tests pass and the code is production-ready")
-
- echo "$verdict" | jq -e '.passed' && break
-done`,
+paseo schedule ls # list all schedules
+paseo schedule pause abc123 # pause a schedule
+paseo schedule delete abc123 # remove a schedule`,
},
];
-function MobileSection() {
+function PhoneShowcase() {
+ const containerRef = React.useRef(null);
+ const textInView = useInView(containerRef, { once: true, margin: "-80px" });
+
+ // Scroll-linked animation: track how far through the container the user has scrolled
+ const { scrollYProgress } = useScroll({
+ target: containerRef,
+ offset: ["start end", "center center"],
+ });
+
+ // Responsive slide distance
+ const [slideDistance, setSlideDistance] = React.useState(260);
+ React.useEffect(() => {
+ function update() {
+ setSlideDistance(window.innerWidth < 768 ? 140 : 260);
+ }
+ update();
+ window.addEventListener("resize", update);
+ return () => window.removeEventListener("resize", update);
+ }, []);
+
+ // Side phones start at x=0 (behind center) and slide out to final position
+ const sideOpacity = useTransform(scrollYProgress, [0.2, 0.6], [0, 1]);
+ const leftX = useTransform(scrollYProgress, [0.2, 0.6], [0, -slideDistance]);
+ const rightX = useTransform(scrollYProgress, [0.2, 0.6], [0, slideDistance]);
+
return (
-
-
+
+ {children}
+
+ );
+}
+
+function PrinciplesSection() {
+ return (
+ {title}
+{description}
++ Here's what's under the hood. +
+
+ {providers.map((p) => (
+
+
-
+ ))}
+
- {feature.icon}
-
- {feature.title}
-{feature.description}
- + {p.icon} + {p.name} +
+
+
+ {/* Desktop: horizontal with bezier curves */}
+
+ {clients.map((c) => (
+
+
+
+ {c.icon}
+ {c.name}
+
+ ))}
+
+
+
+ E2E Encrypted Relay
+or
+Direct Connection
+
+ {hosts.map((h) => (
+
+
+
+ {h}
+
+ ))}
+
+ {/* SVG curves */}
+
+
+ {/* Clients */}
+
- Multi-host
- Built-in terminal
- Git worktrees
- E2E encrypted relay
- Open source
-
+ {/* Spacer */}
+
+
+ {/* Center label */}
+
+
+ );
+}
+
+function SelfHostedSection() {
+ return (
+
+ {clients.map((c, i) => (
+
- {/* Also */}
- { clientRefs.current[i] = el; }}
+ className="flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm backdrop-blur-sm"
+ >
+ {c.icon}
+ {c.name}
+
))}
+
+
+ {/* Spacer */}
+
+
+ {/* Hosts */}
+ E2E Encrypted Relay
+or
+Direct Connection
+
+ {hosts.map((h, i) => (
+
{ hostRefs.current[i] = el; }}
+ className="flex items-center gap-3 rounded-lg border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm backdrop-blur-sm"
+ >
+
+ {h}
+
+ ))}
+
+ {shortcuts.map((s) => (
+
+
+ {s.action}
+
+ ))}
+
+ {s.keys.map((k) => (
+
+ {k}
+
+ ))}
+
+
+ {Array.from({ length: barCount }).map((_, i) => {
+ // Create a natural-looking waveform envelope — louder in center, quieter at edges
+ const center = barCount / 2;
+ const dist = Math.abs(i - center) / center;
+ const envelope = 1 - dist * dist; // quadratic falloff
+ const minH = 4;
+ const maxH = 56;
+ const baseH = minH + (maxH - minH) * envelope;
+ // Vary per-bar so it doesn't look uniform
+ const jitter = Math.sin(i * 2.3) * 0.3 + Math.cos(i * 1.7) * 0.2;
+ const h = Math.max(minH, baseH * (0.5 + 0.5 * Math.abs(jitter + Math.sin(i * 0.8))));
+
+ return (
+
+ );
+ })}
+
+ );
+}
+
+const USER_WORDS = "Refactor the auth middleware to use the new session store, then run the test suite".split(" ");
+const RESPONSE_WORDS = "I'll update the auth middleware to use SessionStore instead of the legacy cookie-based approach. Let me refactor the middleware and update the tests.".split(" ");
+const DICTATION_LAG = 2;
+const RESPONSE_LAG = 3;
+const WORD_APPEAR_MS = 150;
+const RESPONSE_WORD_MS = 60;
+const PHASE_GAP_MS = 800;
+const LOOP_PAUSE_MS = 3000;
+
+type VoicePhase = "dictation" | "dictation-flush" | "pause" | "response" | "response-flush" | "done";
+
+function useVoiceConversation() {
+ const [phase, setPhase] = React.useState
+ {/* Invisible full text to reserve height at any viewport width */}
+
+ );
+}
+
+function LocalVoiceSection() {
+ const { dictationWordIndex, responseWordIndex, showResponse } = useVoiceConversation();
+
+ return (
+ + {words.join(" ")} +
+ {/* Visible streaming text overlaid */} ++ {words.map((word, i) => { + if (i >= wordIndex) return null; + const confirmed = i < wordIndex - confirmLag; + return ( + + {word}{" "} + + ); + })} +
+
+
+
+ {/* Waveform area */}
+
+
+
+
+ {/* User dictation */}
+
+
+
+ {/* Agent response — always rendered to reserve space */}
+
+
+
+
+
+
+
+
+
+
+
-
-
Mobile-first
-- The mobile app has full feature parity with desktop. Launch agents, review diffs, talk through problems with voice, all from your phone. +
+ {/* Arrow + text */}
+
+
+
-
+ When you want to step away from your desk,
you can.
-
);
}
@@ -945,20 +1317,10 @@ function CLISection() {
const active = cliExamples[activeIndex];
return (
-
+
+ 
+
+
+ {/* Right phone — rotated to face inward */}
+
+ 
+
-
+ + The native mobile app has full feature parity with desktop. +
+ + + {/* Phone trio — side phones are absolute, start behind center, slide outward with perspective rotation */} +
+ {/* Left phone — rotated to face inward */}
+
-
+
+
+ {/* Center phone */}
+
-
+
+
-
-
CLI
-- Everything you can do in the app, you can do from the terminal. -
-
{cliExamples.map((example, i) => (