Skip to content

Commit 2cfc61e

Browse files
CynaConsclaude
CynaCons
and
claude
committed
feat(landing): redesign hero to show coordinator-driven orchestration
- User prompt bubble shows natural language request - Coordinator terminal shows parallel spawn workflow - Highlights: parallel execution, wait_for_agents, context optimization - Better showcases the orchestration value proposition 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 31f80cf commit 2cfc61e

File tree

1 file changed

+59
-34
lines changed

1 file changed

+59
-34
lines changed

‎site/src/components/Hero.tsx‎

Lines changed: 59 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,71 @@
11
import { motion } from 'framer-motion'
22
import { useState } from 'react'
33

4+
// User's natural language request to the coordinator
5+
const userPrompt = "Spawn a Claude agent to review auth, and a Codex agent to run tests. I'll update the docs. When done, spawn Gemini for the release."
6+
7+
// Coordinator's actions
48
const terminalLines = [
5-
{ text: '$ claude "Review the authentication module"', delay: 0 },
6-
{ text: '→ Spawning Claude agent (sonnet)...', delay: 0.5, color: 'text-cyan-400' },
7-
{ text: '→ Agent #a3f2 running', delay: 1, color: 'text-green-400' },
8-
{ text: '', delay: 1.2 },
9-
{ text: '$ codex "Run the test suite"', delay: 1.5 },
10-
{ text: '→ Spawning Codex agent (gpt-5.1)...', delay: 2, color: 'text-cyan-400' },
11-
{ text: '→ Agent #b7c1 running', delay: 2.5, color: 'text-green-400' },
12-
{ text: '', delay: 2.7 },
13-
{ text: '$ copilot --model gemini "Analyze the codebase"', delay: 3 },
14-
{ text: '→ Spawning Copilot agent (gemini-3-pro)...', delay: 3.5, color: 'text-cyan-400' },
15-
{ text: '→ Agent #c9d4 running', delay: 4, color: 'text-green-400' },
16-
{ text: '', delay: 4.2 },
17-
{ text: '✓ Three agents working in parallel!', delay: 4.5, color: 'text-emerald-400' },
9+
{ text: '# Coordinator thinking...', delay: 0, color: 'text-gray-500' },
10+
{ text: '', delay: 0.3 },
11+
{ text: 'spawn_claude("Review authentication module")', delay: 0.5, color: 'text-indigo-400' },
12+
{ text: '→ Agent #a3f2 running (sonnet)', delay: 0.8, color: 'text-green-400' },
13+
{ text: '', delay: 1 },
14+
{ text: 'spawn_codex("Run npm test, report failures")', delay: 1.2, color: 'text-indigo-400' },
15+
{ text: '→ Agent #b7c1 running (gpt-5.1)', delay: 1.5, color: 'text-green-400' },
16+
{ text: '', delay: 1.7 },
17+
{ text: '# Coordinator updates docs while agents work...', delay: 2, color: 'text-gray-500' },
18+
{ text: '', delay: 2.3 },
19+
{ text: 'wait_for_agents() # Both complete ✓', delay: 2.8, color: 'text-cyan-400' },
20+
{ text: '', delay: 3.1 },
21+
{ text: 'spawn_copilot("Handle release", model="gemini")', delay: 3.4, color: 'text-indigo-400' },
22+
{ text: '→ Agent #c9d4 running (gemini)', delay: 3.7, color: 'text-green-400' },
23+
{ text: '', delay: 4 },
24+
{ text: '✓ Context stays lean. More work done.', delay: 4.3, color: 'text-emerald-400' },
1825
]
1926

2027
function AnimatedTerminal() {
2128
return (
22-
<div className="bg-[#1e1e2e] rounded-lg border border-gray-700 shadow-2xl overflow-hidden max-w-2xl mx-auto">
23-
{/* Terminal header */}
24-
<div className="flex items-center gap-2 px-4 py-3 bg-[#181825] border-b border-gray-700">
25-
<div className="w-3 h-3 rounded-full bg-red-500" />
26-
<div className="w-3 h-3 rounded-full bg-yellow-500" />
27-
<div className="w-3 h-3 rounded-full bg-green-500" />
28-
<span className="ml-4 text-sm text-gray-400 font-mono">powerspawn</span>
29-
</div>
29+
<div className="max-w-2xl mx-auto space-y-3">
30+
{/* User prompt bubble */}
31+
<motion.div
32+
initial={{ opacity: 0, y: 10 }}
33+
animate={{ opacity: 1, y: 0 }}
34+
transition={{ duration: 0.4 }}
35+
className="flex items-start gap-3"
36+
>
37+
<div className="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center text-sm font-bold shrink-0">
38+
U
39+
</div>
40+
<div className="bg-indigo-900/40 border border-indigo-500/30 rounded-lg rounded-tl-none px-4 py-3 text-sm text-gray-200 leading-relaxed">
41+
{userPrompt}
42+
</div>
43+
</motion.div>
3044

31-
{/* Terminal content */}
32-
<div className="p-4 font-mono text-sm space-y-1 min-h-[280px]">
33-
{terminalLines.map((line, i) => (
34-
<motion.div
35-
key={i}
36-
initial={{ opacity: 0, x: -10 }}
37-
animate={{ opacity: 1, x: 0 }}
38-
transition={{ delay: line.delay, duration: 0.3 }}
39-
className={line.color || 'text-gray-200'}
40-
>
41-
{line.text || '\u00A0'}
42-
</motion.div>
43-
))}
45+
{/* Coordinator terminal */}
46+
<div className="bg-[#1e1e2e] rounded-lg border border-gray-700 shadow-2xl overflow-hidden">
47+
{/* Terminal header */}
48+
<div className="flex items-center gap-2 px-4 py-3 bg-[#181825] border-b border-gray-700">
49+
<div className="w-3 h-3 rounded-full bg-red-500" />
50+
<div className="w-3 h-3 rounded-full bg-yellow-500" />
51+
<div className="w-3 h-3 rounded-full bg-green-500" />
52+
<span className="ml-4 text-sm text-gray-400 font-mono">coordinator</span>
53+
</div>
54+
55+
{/* Terminal content */}
56+
<div className="p-4 font-mono text-sm space-y-1 min-h-[320px]">
57+
{terminalLines.map((line, i) => (
58+
<motion.div
59+
key={i}
60+
initial={{ opacity: 0, x: -10 }}
61+
animate={{ opacity: 1, x: 0 }}
62+
transition={{ delay: line.delay, duration: 0.3 }}
63+
className={line.color || 'text-gray-200'}
64+
>
65+
{line.text || '\u00A0'}
66+
</motion.div>
67+
))}
68+
</div>
4469
</div>
4570
</div>
4671
)

0 commit comments

Comments
 (0)