Skip to content

Commit b58ca48

Browse files
centdixclaude
centdix
and
claude
authored
Replace GIF assets with mp4 videos (#201)
* feat: replace gif assets with mp4 videos from blog post Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: full-width stacked layout for demo videos on site Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 357f62b commit b58ca48

7 files changed

Lines changed: 97 additions & 74 deletions

File tree

‎README.md‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22

33
A web dashboard for managing parallel AI coding agents. webmux owns git worktree lifecycle, tmux layout, agent runtime events, service health monitoring, and sandbox containers directly.
44

5-
https://github.com/user-attachments/assets/48c9564f-42a5-404f-97e2-c5ee0138f15d
5+
<video src="https://webmux.dev/videos/demo.mp4" autoplay loop muted playsinline></video>
66

77
## Features
88

99
### Create & Manage Worktrees
1010

11-
![createanddelete-1 5x](https://github.com/user-attachments/assets/7f084d27-448c-47e4-aadf-8ab25154c096)
11+
<video src="https://webmux.dev/videos/create.mp4" autoplay loop muted playsinline></video>
1212

1313
Spin up new worktrees with one click. Pick a profile, type a prompt, and webmux creates the worktree, starts the agent, and begins streaming output. Merge or remove worktrees when you're done.
1414

@@ -18,25 +18,24 @@ View and interact with your agents directly in the browser. Each worktree gets i
1818

1919
### PR, CI & Comments
2020

21-
![commentsandci-1 5x](https://github.com/user-attachments/assets/395f8471-f9ff-412a-87e2-1347bfadb387)
21+
<video src="https://webmux.dev/videos/ci.mp4" autoplay loop muted playsinline></video>
2222

2323
See pull request status, CI check results, and review comments right next to each worktree. No more switching to GitHub to check if your agent's PR passed CI.
2424

2525
### Service Health Monitoring
2626

27-
![monitor-1 5x](https://github.com/user-attachments/assets/b2cf535a-0242-4c15-bdb9-344dfde5f75e)
27+
<video src="https://webmux.dev/videos/health.mp4" autoplay loop muted playsinline></video>
2828

2929
Track dev server ports across worktrees. webmux polls configured services and shows live health badges so you know which worktrees have their servers running.
3030

3131
### Docker Sandbox Mode
3232

33-
<!-- gif -->
3433

3534
Run agents in isolated Docker containers for untrusted or experimental work. webmux manages the container lifecycle, port forwarding, and volume mounts automatically.
3635

3736
### Linear Integration
3837

39-
![linear-1 5x](https://github.com/user-attachments/assets/3187fbe2-eeee-4a33-8780-c51c3575b72a)
38+
<video src="https://webmux.dev/videos/linear.mp4" autoplay loop muted playsinline></video>
4039

4140
See your assigned Linear issues alongside your worktrees. Webmux matches branches to issues automatically, so you can browse your backlog, pick an issue, and spin up a worktree for it in one click.
4241

‎site/src/lib/pages/HomePage.svelte‎

Lines changed: 92 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,22 @@
105105
</span>
106106
</div>
107107
</div>
108+
109+
<!-- Hero video -->
110+
<div class="mx-auto mt-14 max-w-6xl px-6">
111+
<div class="overflow-hidden rounded-xl border border-edge">
112+
<video
113+
src="/videos/demo.mp4"
114+
autoplay
115+
loop
116+
muted
117+
playsinline
118+
class="w-full"
119+
>
120+
Webmux dashboard demo
121+
</video>
122+
</div>
123+
</div>
108124
</section>
109125

110126
<!-- Features -->
@@ -291,90 +307,98 @@
291307
<section class="bg-surface px-6 py-20 md:py-28">
292308
<div class="mx-auto max-w-6xl space-y-24">
293309
<!-- Demo 1: Create & Manage Worktrees -->
294-
<div class="flex flex-col items-center gap-10 md:flex-row">
295-
<div class="flex-1">
296-
<h3 class="mb-3 text-2xl font-bold text-primary md:text-3xl">
297-
Create & Manage Worktrees
298-
</h3>
299-
<p class="text-muted leading-relaxed">
300-
Spin up new worktrees with one click. Pick a profile, type a prompt,
301-
and webmux creates the worktree, starts the agent, and begins
302-
streaming output. Merge or remove worktrees when you're done.
303-
</p>
304-
</div>
305-
<div class="flex-1 overflow-hidden rounded-xl border border-edge">
306-
<img
307-
src="https://github.com/user-attachments/assets/7f084d27-448c-47e4-aadf-8ab25154c096"
308-
alt="Creating and managing worktrees demo"
310+
<div class="flex flex-col gap-4">
311+
<h3 class="text-2xl font-bold text-primary md:text-3xl">
312+
Create & Manage Worktrees
313+
</h3>
314+
<p class="max-w-2xl text-muted leading-relaxed">
315+
Spin up new worktrees with one click. Pick a profile, type a prompt,
316+
and webmux creates the worktree, starts the agent, and begins
317+
streaming output. Merge or remove worktrees when you're done.
318+
</p>
319+
<div class="overflow-hidden rounded-xl border border-edge">
320+
<video
321+
src="/videos/create.mp4"
322+
autoplay
323+
loop
324+
muted
325+
playsinline
309326
class="w-full"
310-
loading="lazy"
311-
/>
327+
>
328+
Creating and managing worktrees demo
329+
</video>
312330
</div>
313331
</div>
314332

315333
<!-- Demo 2: PR, CI & Comments -->
316-
<div class="flex flex-col items-center gap-10 md:flex-row-reverse">
317-
<div class="flex-1">
318-
<h3 class="mb-3 text-2xl font-bold text-primary md:text-3xl">
319-
PR, CI & Comments
320-
</h3>
321-
<p class="text-muted leading-relaxed">
322-
See pull request status, CI check results, and review comments right
323-
next to each worktree. No more switching to GitHub to check if your
324-
agent's PR passed CI.
325-
</p>
326-
</div>
327-
<div class="flex-1 overflow-hidden rounded-xl border border-edge">
328-
<img
329-
src="https://github.com/user-attachments/assets/395f8471-f9ff-412a-87e2-1347bfadb387"
330-
alt="PR, CI checks and comments demo"
334+
<div class="flex flex-col gap-4">
335+
<h3 class="text-2xl font-bold text-primary md:text-3xl">
336+
PR, CI & Comments
337+
</h3>
338+
<p class="max-w-2xl text-muted leading-relaxed">
339+
See pull request status, CI check results, and review comments right
340+
next to each worktree. No more switching to GitHub to check if your
341+
agent's PR passed CI.
342+
</p>
343+
<div class="overflow-hidden rounded-xl border border-edge">
344+
<video
345+
src="/videos/ci.mp4"
346+
autoplay
347+
loop
348+
muted
349+
playsinline
331350
class="w-full"
332-
loading="lazy"
333-
/>
351+
>
352+
PR, CI checks and comments demo
353+
</video>
334354
</div>
335355
</div>
336356

337357
<!-- Demo 3: Service Health Monitoring -->
338-
<div class="flex flex-col items-center gap-10 md:flex-row">
339-
<div class="flex-1">
340-
<h3 class="mb-3 text-2xl font-bold text-primary md:text-3xl">
341-
Service Health Monitoring
342-
</h3>
343-
<p class="text-muted leading-relaxed">
344-
Track dev server ports across worktrees. webmux polls configured
345-
services and shows live health badges so you know which worktrees have
346-
their servers running.
347-
</p>
348-
</div>
349-
<div class="flex-1 overflow-hidden rounded-xl border border-edge">
350-
<img
351-
src="https://github.com/user-attachments/assets/b2cf535a-0242-4c15-bdb9-344dfde5f75e"
352-
alt="Service health monitoring demo"
358+
<div class="flex flex-col gap-4">
359+
<h3 class="text-2xl font-bold text-primary md:text-3xl">
360+
Service Health Monitoring
361+
</h3>
362+
<p class="max-w-2xl text-muted leading-relaxed">
363+
Track dev server ports across worktrees. webmux polls configured
364+
services and shows live health badges so you know which worktrees have
365+
their servers running.
366+
</p>
367+
<div class="overflow-hidden rounded-xl border border-edge">
368+
<video
369+
src="/videos/health.mp4"
370+
autoplay
371+
loop
372+
muted
373+
playsinline
353374
class="w-full"
354-
loading="lazy"
355-
/>
375+
>
376+
Service health monitoring demo
377+
</video>
356378
</div>
357379
</div>
358380

359381
<!-- Demo 4: Linear Integration -->
360-
<div class="flex flex-col items-center gap-10 md:flex-row-reverse">
361-
<div class="flex-1">
362-
<h3 class="mb-3 text-2xl font-bold text-primary md:text-3xl">
363-
Linear Integration
364-
</h3>
365-
<p class="text-muted leading-relaxed">
366-
See your assigned Linear issues alongside your worktrees. Webmux
367-
matches branches to issues automatically, so you can browse your
368-
backlog, pick an issue, and spin up a worktree for it in one click.
369-
</p>
370-
</div>
371-
<div class="flex-1 overflow-hidden rounded-xl border border-edge">
372-
<img
373-
src="https://github.com/user-attachments/assets/3187fbe2-eeee-4a33-8780-c51c3575b72a"
374-
alt="Linear integration demo"
382+
<div class="flex flex-col gap-4">
383+
<h3 class="text-2xl font-bold text-primary md:text-3xl">
384+
Linear Integration
385+
</h3>
386+
<p class="max-w-2xl text-muted leading-relaxed">
387+
See your assigned Linear issues alongside your worktrees. Webmux
388+
matches branches to issues automatically, so you can browse your
389+
backlog, pick an issue, and spin up a worktree for it in one click.
390+
</p>
391+
<div class="overflow-hidden rounded-xl border border-edge">
392+
<video
393+
src="/videos/linear.mp4"
394+
autoplay
395+
loop
396+
muted
397+
playsinline
375398
class="w-full"
376-
loading="lazy"
377-
/>
399+
>
400+
Linear integration demo
401+
</video>
378402
</div>
379403
</div>
380404
</div>

‎site/static/videos/ci.mp4‎

5.43 MB
Binary file not shown.

‎site/static/videos/create.mp4‎

1.57 MB
Binary file not shown.

‎site/static/videos/demo.mp4‎

14.7 MB
Binary file not shown.

‎site/static/videos/health.mp4‎

2.55 MB
Binary file not shown.

‎site/static/videos/linear.mp4‎

2.64 MB
Binary file not shown.

0 commit comments

Comments
 (0)