Skip to content

Commit f704ef2

Browse files
barckcodeclaude
barckcode
and
claude
committed
feat: re-render videos with larger elements and remove redundant content
- Remove terminal mockup from HowItWorks (redundant with workflow video) - Remove static diagram from Architecture (redundant with architecture video) - Remove browser chrome frames from both video sections for seamless look - Re-render Remotion videos with ~2x larger fonts, icons, cards, and spacing - Videos now display as native page animations with rounded corners Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent ed71776 commit f704ef2

File tree

4 files changed

+24
-239
lines changed

4 files changed

+24
-239
lines changed

‎web/public/videos/architecture-flow.mp4‎

229 KB
Binary file not shown.

‎web/public/videos/workflow-demo.mp4‎

317 KB
Binary file not shown.

‎web/src/components/Architecture.astro‎

Lines changed: 12 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -20,147 +20,18 @@ const t = useTranslations(lang);
2020
</p>
2121
</div>
2222

23-
<!-- Architecture diagram -->
24-
<div class="rounded-2xl border border-slate-800 p-8 sm:p-12 overflow-x-auto reveal-scale" style="background: linear-gradient(135deg, #0d1117, #111827);">
25-
26-
<!-- Flow diagram -->
27-
<div class="flex items-start justify-start gap-0 min-w-max mx-auto lg:justify-center">
28-
29-
<!-- Your Chat (User) -->
30-
<div class="flex flex-col items-center">
31-
<div class="w-24 sm:w-28 h-20 rounded-xl border flex flex-col items-center justify-center gap-1 px-2" style="background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.4);">
32-
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#60a5fa" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
33-
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
34-
</svg>
35-
<span class="text-blue-300 text-xs font-semibold text-center leading-tight">{t('arch.yourChat')}</span>
36-
</div>
37-
<span class="text-slate-500 text-xs mt-2">{t('arch.user')}</span>
38-
</div>
39-
40-
<!-- Arrow 1 -->
41-
<div class="flex items-center h-20 px-1 sm:px-2">
42-
<div class="flex items-center relative">
43-
<div class="w-6 sm:w-10 h-px" style="background: linear-gradient(90deg, #3b82f6, #60a5fa);"></div>
44-
<div class="absolute inset-0 flex items-center"><div class="w-2 h-2 rounded-full bg-blue-400 arch-pulse"></div></div>
45-
<svg width="8" height="8" viewBox="0 0 8 8" fill="#60a5fa"><path d="M0 0 L8 4 L0 8 Z"/></svg>
46-
</div>
47-
</div>
48-
49-
<!-- API Server -->
50-
<div class="flex flex-col items-center">
51-
<div class="w-24 sm:w-28 h-20 rounded-xl border flex flex-col items-center justify-center gap-1 px-2" style="background: rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.4);">
52-
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
53-
<rect x="2" y="3" width="20" height="14" rx="2"/>
54-
<path d="M8 21h8M12 17v4"/>
55-
</svg>
56-
<span class="text-violet-300 text-xs font-semibold text-center leading-tight">{t('arch.apiServer')}</span>
57-
</div>
58-
<span class="text-slate-500 text-xs mt-2">{t('arch.goFiber')}</span>
59-
</div>
60-
61-
<!-- Arrow 2 -->
62-
<div class="flex items-center h-20 px-1 sm:px-2">
63-
<div class="flex items-center relative">
64-
<div class="w-6 sm:w-10 h-px" style="background: linear-gradient(90deg, #8b5cf6, #a78bfa);"></div>
65-
<div class="absolute inset-0 flex items-center"><div class="w-2 h-2 rounded-full bg-violet-400 arch-pulse arch-pulse-delay-1"></div></div>
66-
<svg width="8" height="8" viewBox="0 0 8 8" fill="#a78bfa"><path d="M0 0 L8 4 L0 8 Z"/></svg>
67-
</div>
68-
</div>
69-
70-
<!-- NATS Bus -->
71-
<div class="flex flex-col items-center">
72-
<div class="w-24 sm:w-28 h-20 rounded-xl border flex flex-col items-center justify-center gap-1 px-2" style="background: rgba(34, 211, 238, 0.1); border-color: rgba(34, 211, 238, 0.4);">
73-
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22d3ee" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
74-
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
75-
</svg>
76-
<span class="text-cyan-300 text-xs font-semibold text-center leading-tight">{t('arch.natsBus')}</span>
77-
</div>
78-
<span class="text-slate-500 text-xs mt-2">{t('arch.messageBus')}</span>
79-
</div>
80-
81-
<!-- Arrow 3 to agents -->
82-
<div class="flex items-center h-20 px-1 sm:px-2">
83-
<div class="flex items-center relative">
84-
<div class="w-6 sm:w-10 h-px" style="background: linear-gradient(90deg, #22d3ee, #34d399);"></div>
85-
<div class="absolute inset-0 flex items-center"><div class="w-2 h-2 rounded-full bg-cyan-400 arch-pulse arch-pulse-delay-2"></div></div>
86-
<svg width="8" height="8" viewBox="0 0 8 8" fill="#34d399"><path d="M0 0 L8 4 L0 8 Z"/></svg>
87-
</div>
88-
</div>
89-
90-
<!-- Agents column -->
91-
<div class="flex flex-col gap-2">
92-
<!-- Leader Agent -->
93-
<div class="w-28 sm:w-36 h-16 rounded-xl border flex flex-col items-center justify-center gap-1 px-2" style="background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.5);">
94-
<div class="flex items-center gap-1.5">
95-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4ade80" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
96-
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
97-
</svg>
98-
<span class="text-green-300 text-xs font-bold">{t('arch.leader')}</span>
99-
</div>
100-
<span class="text-slate-400 text-xs">{t('arch.claudeCode')}</span>
101-
</div>
102-
103-
<!-- Worker 1 -->
104-
<div class="w-28 sm:w-36 h-14 rounded-xl border flex flex-col items-center justify-center gap-0.5 px-2" style="background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.35);">
105-
<span class="text-blue-300 text-xs font-semibold">{t('arch.workerAgent1')}</span>
106-
<span class="text-slate-500 text-xs">{t('arch.claudeCode')}</span>
107-
</div>
108-
109-
<!-- Worker 2 -->
110-
<div class="w-28 sm:w-36 h-14 rounded-xl border flex flex-col items-center justify-center gap-0.5 px-2" style="background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.35);">
111-
<span class="text-blue-300 text-xs font-semibold">{t('arch.workerAgent2')}</span>
112-
<span class="text-slate-500 text-xs">{t('arch.claudeCode')}</span>
113-
</div>
114-
</div>
115-
</div>
116-
117-
<!-- Legend -->
118-
<div class="flex flex-wrap justify-center gap-6 mt-10 pt-8 border-t border-slate-800/60">
119-
<div class="flex items-center gap-2">
120-
<div class="w-3 h-3 rounded-sm" style="background: rgba(59, 130, 246, 0.3); border: 1px solid rgba(59, 130, 246, 0.5);"></div>
121-
<span class="text-slate-400 text-xs">{t('arch.legendFrontend')}</span>
122-
</div>
123-
<div class="flex items-center gap-2">
124-
<div class="w-3 h-3 rounded-sm" style="background: rgba(139, 92, 246, 0.3); border: 1px solid rgba(139, 92, 246, 0.5);"></div>
125-
<span class="text-slate-400 text-xs">{t('arch.legendBackend')}</span>
126-
</div>
127-
<div class="flex items-center gap-2">
128-
<div class="w-3 h-3 rounded-sm" style="background: rgba(34, 211, 238, 0.3); border: 1px solid rgba(34, 211, 238, 0.5);"></div>
129-
<span class="text-slate-400 text-xs">{t('arch.legendMessageBus')}</span>
130-
</div>
131-
<div class="flex items-center gap-2">
132-
<div class="w-3 h-3 rounded-sm" style="background: rgba(34, 197, 94, 0.3); border: 1px solid rgba(34, 197, 94, 0.5);"></div>
133-
<span class="text-slate-400 text-xs">{t('arch.legendLeader')}</span>
134-
</div>
135-
<div class="flex items-center gap-2">
136-
<div class="w-3 h-3 rounded-sm" style="background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.35);"></div>
137-
<span class="text-slate-400 text-xs">{t('arch.legendWorkers')}</span>
138-
</div>
139-
</div>
140-
</div>
141-
142-
<!-- Architecture flow video -->
143-
<div class="mt-12 reveal-scale">
144-
<div class="rounded-xl border border-slate-700/60 overflow-hidden shadow-2xl max-w-4xl mx-auto" style="background-color: #0d1117;">
145-
<div class="flex items-center gap-2 px-4 py-2.5 border-b border-slate-700/60" style="background-color: #161b22;">
146-
<div class="flex gap-1.5">
147-
<div class="w-3 h-3 rounded-full bg-red-500/70"></div>
148-
<div class="w-3 h-3 rounded-full bg-yellow-500/70"></div>
149-
<div class="w-3 h-3 rounded-full bg-green-500/70"></div>
150-
</div>
151-
<span class="text-slate-500 text-xs ml-2 font-mono">architecture-flow.mp4</span>
152-
</div>
153-
<video
154-
autoplay
155-
muted
156-
loop
157-
playsinline
158-
class="w-full"
159-
style="aspect-ratio: 16/9; background: #0a0f1e;"
160-
>
161-
<source src="/videos/architecture-flow.mp4" type="video/mp4" />
162-
</video>
163-
</div>
23+
<!-- Architecture flow video — seamless integration -->
24+
<div class="reveal-scale">
25+
<video
26+
autoplay
27+
muted
28+
loop
29+
playsinline
30+
class="w-full rounded-2xl"
31+
style="background: #0a0f1e;"
32+
>
33+
<source src="/videos/architecture-flow.mp4" type="video/mp4" />
34+
</video>
16435
</div>
16536

16637
<!-- Supporting bullets -->

‎web/src/components/HowItWorks.astro‎

Lines changed: 12 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -80,104 +80,18 @@ const steps = [
8080
</div>
8181
</div>
8282

83-
<!-- Workflow video demo -->
84-
<div class="mt-20 mb-16 reveal-scale">
85-
<div class="rounded-xl border border-slate-700/60 overflow-hidden shadow-2xl max-w-4xl mx-auto" style="background-color: #0d1117;">
86-
<div class="flex items-center gap-2 px-4 py-2.5 border-b border-slate-700/60" style="background-color: #161b22;">
87-
<div class="flex gap-1.5">
88-
<div class="w-3 h-3 rounded-full bg-red-500/70"></div>
89-
<div class="w-3 h-3 rounded-full bg-yellow-500/70"></div>
90-
<div class="w-3 h-3 rounded-full bg-green-500/70"></div>
91-
</div>
92-
<span class="text-slate-500 text-xs ml-2 font-mono">workflow-demo.mp4</span>
93-
</div>
94-
<video
95-
autoplay
96-
muted
97-
loop
98-
playsinline
99-
class="w-full"
100-
style="aspect-ratio: 16/9; background: #0a0f1e;"
101-
>
102-
<source src="/videos/workflow-demo.mp4" type="video/mp4" />
103-
</video>
104-
</div>
105-
</div>
106-
107-
<!-- Install command mockup -->
108-
<div id="terminal-demo" class="rounded-2xl border border-slate-800 overflow-hidden reveal-scale" style="background-color: #0d1117;">
109-
<!-- Terminal title bar -->
110-
<div class="flex items-center gap-2 px-4 py-3 border-b border-slate-800" style="background-color: #161b22;">
111-
<div class="flex gap-1.5">
112-
<div class="w-3 h-3 rounded-full bg-red-500/70"></div>
113-
<div class="w-3 h-3 rounded-full bg-yellow-500/70"></div>
114-
<div class="w-3 h-3 rounded-full bg-green-500/70"></div>
115-
</div>
116-
<span class="text-slate-500 text-xs ml-2 font-mono">terminal</span>
117-
</div>
118-
<!-- Terminal content — animated lines -->
119-
<div id="terminal-lines" class="p-6 font-mono text-sm min-h-[280px]"></div>
83+
<!-- Workflow video — seamless integration -->
84+
<div class="mt-20 reveal-scale">
85+
<video
86+
autoplay
87+
muted
88+
loop
89+
playsinline
90+
class="w-full rounded-2xl"
91+
style="background: #0a0f1e;"
92+
>
93+
<source src="/videos/workflow-demo.mp4" type="video/mp4" />
94+
</video>
12095
</div>
12196
</div>
12297
</section>
123-
124-
<script>
125-
const lines = [
126-
{ text: '$ curl -fsSL https://agentcrew.helmcode.com/install.sh | bash', cls: '', prefix: true },
127-
{ text: ' Checking dependencies...', cls: 'text-blue-400' },
128-
{ text: ' [OK] Docker found', cls: 'text-green-400' },
129-
{ text: ' [OK] Docker Compose found', cls: 'text-green-400' },
130-
{ text: ' Pulling images and starting AgentCrew...', cls: 'text-blue-400' },
131-
{ text: ' [+] Running 4/4', cls: 'text-slate-500' },
132-
{ text: ' \u2714 Network agentcrew_default Created', cls: 'text-slate-500' },
133-
{ text: ' \u2714 Container agentcrew-nats Started', cls: 'text-slate-500' },
134-
{ text: ' \u2714 Container agentcrew-api Started', cls: 'text-slate-500' },
135-
{ text: ' \u2714 Container agentcrew-web Started', cls: 'text-slate-500' },
136-
{ text: ' [OK] All services are running', cls: 'text-green-400' },
137-
{ text: ' \u2500\u2500 AgentCrew is running! \u2500\u2500', cls: 'text-green-400 font-bold' },
138-
{ text: ' Open: http://localhost:8080', cls: '', link: true },
139-
];
140-
141-
let started = false;
142-
const terminalEl = document.getElementById('terminal-lines');
143-
const terminalDemo = document.getElementById('terminal-demo');
144-
145-
function animateTerminal() {
146-
if (started || !terminalEl) return;
147-
started = true;
148-
let i = 0;
149-
150-
function addLine() {
151-
if (i >= lines.length) return;
152-
const line = lines[i];
153-
const div = document.createElement('div');
154-
div.className = `terminal-line ${line.cls}`;
155-
div.style.animationDelay = '0s';
156-
157-
if (line.prefix) {
158-
div.innerHTML = `<span class="text-green-400">$</span> <span class="text-slate-300">${line.text.slice(2)}</span>`;
159-
} else if (line.link) {
160-
div.innerHTML = `<span class="text-slate-400"> Open:</span> <span class="text-blue-400">http://localhost:8080</span>`;
161-
} else {
162-
div.textContent = line.text;
163-
}
164-
165-
terminalEl.appendChild(div);
166-
i++;
167-
const delay = i === 1 ? 600 : (i < 5 ? 300 : 200);
168-
setTimeout(addLine, delay);
169-
}
170-
171-
addLine();
172-
}
173-
174-
if (terminalDemo) {
175-
const obs = new IntersectionObserver((entries) => {
176-
if (entries[0].isIntersecting) {
177-
setTimeout(animateTerminal, 400);
178-
obs.disconnect();
179-
}
180-
}, { threshold: 0.3 });
181-
obs.observe(terminalDemo);
182-
}
183-
</script>

0 commit comments

Comments
 (0)