diff --git a/CHANGELOG.md b/CHANGELOG.md index 83786ea..9999ab4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +**docs/talk: Get started comes first, Contact last** +- Why: the maintainer is using the page as the project's homepage (the repo's About link) and asked for a homepage order: how to start right after the title, contact details at the end. +- `docs/talk/index.html`: "Get started" is section 01, right after the title (the commands, and what happens next with the three sign-offs and the effort levels); a new last section, "Contact", holds the GitHub and WeChat QR codes, the email and the footer. The other sections move down one number. The speaker notes, the nav, the key list (`Home` / `End`) and `docs/talk/README.md`'s script follow the new order; the talk still runs about 4.5 minutes. + **docs/talk: a one-page site and script for a five-minute demo** - Why: the maintainer is presenting the project at a small Claude meetup and asked for a page that carries the intro film, the project's story and its films, in English, saying that Claude wrote it, plus the words to say. - `docs/talk/index.html`: ten full-screen sections (why, what it adds, architecture, the intro film, the films, the style library, who wrote it, how the author uses it, getting started) that move with a clicker or the arrow keys, with speaker notes (`N`), a five-minute timer (`T`) and a key list (`?`). The films play from `tools/fetch_media.sh`'s local copies when they are there and stream from the `media` release otherwise. A live f(t) panel draws a Fourier square wave as a pure function of time and checks it: the same frame drawn again after another one, compared pixel by pixel. The PR numbers (73 in nine days, 70 from `claude/` branches) come from the repo's pull request list on 2026-10-09. diff --git a/docs/talk/README.md b/docs/talk/README.md index b1d0b5d..488a24f 100644 --- a/docs/talk/README.md +++ b/docs/talk/README.md @@ -1,6 +1,6 @@ # A five-minute demo of OpenVideoHarness -`index.html` is a one-page site for presenting the project in about five minutes: why it exists, what it adds, the architecture, the intro film, the films it made, the style library, who wrote it, how the author uses it, and how to start. Claude wrote the page and the script below. +`index.html` is the project's one-page site, and the page for presenting it in about five minutes: how to start, why it exists, what it adds, the architecture, the intro film, the films it made, the style library, who wrote it, how the author uses it, and how to get in touch. Claude wrote the page and the script below. ## Viewing it @@ -18,7 +18,7 @@ GitHub's file view shows the HTML source, not the page. To see the page: ``` Without them the page streams from the GitHub release. Press `N` on the film section: the notes say which source it is using. 3. Your own material, all optional: - - **WeChat QR**: save it as `docs/talk/img/wechat.jpg` and the "Say hi on WeChat" card appears next to the GitHub QR. Without the file the card stays hidden; with notes on, the page says it is missing. Committing the image makes it public with the repo. + - **WeChat QR**: save it as `docs/talk/img/wechat.jpg` and the "Say hi on WeChat" card appears next to the GitHub QR in the Contact section. Without the file the card stays hidden; with notes on, the page says it is missing. Committing the image makes it public with the repo. - **Douyin and Bilibili links**: paste them into the two empty `href=""` in the "In the wild" section. - **The Nobel explainer**: put the file at `docs/talk/media/nobel.mp4` (git ignores that folder) and a player shows up in the "In the wild" section. 4. Check the time once: `T` starts the timer, `R` resets it. @@ -31,6 +31,7 @@ GitHub's file view shows the HTML source, not the page. To see the page: | `←` `↑` `PgUp` | previous section | | `Space` | play or pause the film on the film section; next section elsewhere | | `1`–`9`, `0` | jump to section 1–9, 10 | +| `Home` / `End` | the first / the last section (Contact) | | `N` | speaker notes for the current section (and the film's source) | | `T` / `R` | start or pause the timer / reset it | | `F` | full screen | @@ -46,41 +47,45 @@ About 300 words of speech (2:20 at a relaxed pace) plus the 1:43 film. "Be done > Hi everyone. This is OpenVideoHarness: a video workbench for Claude Code. > Our motto: not more tools. Know-how. -**2 · Why** (0:50) +**2 · Get started** (0:30) +> First, how you use it: one line to install, then open Claude Code and ask for a video in one sentence. +> It stops three times for your sign-off: the direction, the storyboard, the first draft. + +**3 · Why** (1:05) > It started with Opus 5.5. Its video code has real taste: motion, type, pacing. > We already have great engines, like HyperFrames and Remotion. But an engine just renders frames. It doesn't give you the idea, the storyboard, the script, or the style. > So I talked it through with Claude, and we built that missing layer: the whole workflow, from idea to final cut. -**3 · Features** (1:15) *optional: drag the f(t) slider while you talk* -> What does it add? It starts with ideas, not code. It has nine workflows, one for each kind of video. You sign off three times: direction, storyboard, draft. +**4 · Features** (1:30) *optional: drag the f(t) slider while you talk* +> What does it add? It starts with ideas, not code. It has nine workflows, one for each kind of video. > And since Claude can't watch video, it checks its own frames and audio, and a second Claude scores the draft. -**4 · Architecture** (1:35) +**5 · Architecture** (1:50) > The architecture is simple. Claude Code reads CLAUDE.md, our router. It picks a video type, pulls in the playbook, styles and templates, and drives the engines through one CLI. > And every project writes its lessons back into the docs. -**5 · The intro film** (3:25) *Space to play; the page dims while it plays* +**6 · The intro film** (3:40) *Space to play; the page dims while it plays* > Here's our intro film. Claude made it with the harness itself. > > *(1:43 of film)* -**6 · Works** (3:45) *click "What Claude sees" on the second sentence* +**7 · Works** (4:00) *click "What Claude sees" on the second sentence* > A few more films, each from one sentence: a science short, a 3Blue1Brown-style explainer, and Clawd, hand-drawn. > And this is what Claude sees when it reviews them: not video. Contact sheets. -**7 · Styles** (3:55) *skip this line if you are short on time* +**8 · Styles** (4:08) *skip this line if you are short on time* > Plus thirty-one styles to borrow from, so not every film looks the same. -**8 · Built by Claude** (4:15) +**9 · Built by Claude** (4:25) > And the code? In nine days the repo got seventy-three pull requests. Seventy came from Claude. > I bring the taste and the decisions. Claude writes the rest. -**9 · In the wild** (4:35) +**10 · In the wild** (4:42) > I use it myself, too. I post films made with it on Douyin and Bilibili. > When this year's Nobel Prize in Physics was announced, I had an explainer out about three hours later. -**10 · Get started** (4:50) *leave the QR codes up for questions* -> It's open source. One line to install, then just ask Claude Code for a video. +**11 · Contact** (4:55) *leave the QR codes up for questions* +> It's open source. Scan the code to star it, or add me on WeChat. > Thank you! ## Where the numbers come from diff --git a/docs/talk/index.html b/docs/talk/index.html index 3c245b5..068a4f4 100644 --- a/docs/talk/index.html +++ b/docs/talk/index.html @@ -540,7 +540,16 @@ .efforts div { border-radius: 12px; padding: 9px 12px; font-size: 14px; } .efforts b { font-family: var(--mono); font-weight: 500; display: block; color: var(--cyan); } .efforts span { color: var(--muted); } +.flowcard { border-radius: 18px; padding: 18px; display: grid; gap: 12px; background: var(--glass); border: 1px solid var(--line); box-shadow: var(--glass-hi), 0 30px 60px -36px rgba(0,0,0,.8); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); } +.flowcard h4 { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); } +.flowcard .efforts { margin-top: 0; } +.gates { list-style: none; display: grid; gap: 6px; } +.gates li { display: grid; gap: 2px; padding: 9px 12px; border-radius: 10px; background: linear-gradient(135deg, rgba(255,122,217,.16), rgba(157,140,255,.12)); border: 1px solid rgba(255,122,217,.3); } +.gates li.last { background: rgba(255,255,255,.04); border-color: var(--line); } +.gates b { font-size: 15px; font-weight: 600; } +.gates span { font-size: 14px; color: var(--text-2); } .contact { display: grid; gap: 10px; } +.contact-wide { max-width: 760px; width: 100%; margin: 0 auto; } .qrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .qrs.one { grid-template-columns: minmax(0, 1fr); max-width: 300px; margin: 0 auto; width: 100%; } .qr { position: relative; border-radius: 18px; padding: 16px; display: grid; gap: 10px; justify-items: center; text-align: center; overflow: hidden; } @@ -651,7 +660,8 @@ .next { margin-top: 10px; } .qr { padding: 12px; gap: 8px; } .qr .plate { max-width: 170px; padding: 8px; } - .start-note { display: none; } + .gates li { padding: 6px 10px; } + .flowcard { padding: 14px; gap: 8px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } @@ -666,6 +676,7 @@
OpenVideoHarness @@ -704,11 +715,45 @@

OpenVideo
Harness

- + +
+
+
+

01 Get started

One line to install. One sentence to ask.

+
+
+
+
    +

  1. Install (macOS or Linux)

    $ curl -fsSL https://raw.githubusercontent.com/ZLHad/OpenVideoHarness/main/install.sh | bash
    2. +

  2. Open Claude Code in it

    $ cd ~/OpenVideoHarness && claude
    3. +

  3. Ask for a film

    “Make a 30-second vertical science short: why does a low-orbit satellite's signal change pitch? English voiceover, English and Chinese subtitles.”
    4. +
+

Needs macOS or Linux, Node.js 22+, Chrome, FFmpeg, Python 3 with uv, and Claude Code or Codex.

+
+
+

What happens next

+
    +
  1. ① Directions and outlineTwo or three ideas, each with one frame. You pick one.
    2. +
  2. ② StoryboardA keyframe for every shot.
    3. +
  3. ③ First draftWith the two or three things it likes least about it.
    4. +
  4. Final renderOnly after you say yes.
    5. +
+
+
quickno stops · 10–30 min
+
standardthree stops · 1–2 h
+
studiopolished over rounds · 3 h+
+
+

Times are for a 30-second film. Say "quick" and it runs straight through.

+
+
+
+
+ +
-

01 Why we built it

+

02 Why we built it

It started with Opus 5.5.

Claude Opus 5.5 writes video as code, and it has taste: in motion, in type, in pacing. The community has shared hundreds of these films; one collection alone holds 389, with their prompts.

Great engines already exist, like HyperFrames and Remotion. But an engine only turns code into frames. It doesn't give you the idea, the storyboard, the script or the style, and it can't tell you whether the film is any good.

@@ -730,11 +775,11 @@

It started with Opus 5.5.

- +
-

02 What it adds

An engine renders. This decides.

+

03 What it adds

An engine renders. This decides.

01

Idea first

Two or three concept cards, each with one frame and a hook, before a line of code. It names what every other video on the topic looks like, and steers away.

playbook/12-ideation.md
@@ -766,11 +811,11 @@

It started with Opus 5.5.

- +
-

03 Architecture

A router, a library of know-how, one CLI.

+

04 Architecture

A router, a library of know-how, one CLI.

@@ -818,11 +863,11 @@

Runs one CLI, five engines

- +
-

04 The intro film · 103 s · with sound

Made by Claude, with the harness itself.

+

05 The intro film · 103 s · with sound

Made by Claude, with the harness itself.

@@ -849,11 +894,11 @@

Runs one CLI, five engines

- +
-

05 Films it made · hover to preview, click for sound

Each from one sentence.

+

06 Films it made · hover to preview, click for sound

Each from one sentence.

@@ -910,22 +955,22 @@

Runs one CLI, five engines

- +
-

06 Style library · click one to hear it

31 styles. Not one default look.

+

07 Style library · click one to hear it

31 styles. Not one default look.

Left alone, AI video drifts to one look: dark background, glow, glass cards. Each style here is a real 5-second render of the same content.

- +
-

07 Who wrote it

Written by Claude.

+

08 Who wrote it

Written by Claude.

@@ -964,11 +1009,11 @@
## Hard rules
- +
-

08 In the wild

+

09 In the wild

I make films with it, too.

I post films made with OpenVideoHarness on Douyin (TikTok in China) and Bilibili.

@@ -989,30 +1034,14 @@

I make films with it, too.

- -
+ +
-

09 Get started

One line to install. One sentence to ask.

+

10 Contact

Questions or ideas? Get in touch.

+

Star the repo, add me on WeChat, or send me a film you made with it.

-
-
-
    -

  1. Install (macOS or Linux)

    $ curl -fsSL https://raw.githubusercontent.com/ZLHad/OpenVideoHarness/main/install.sh | bash
    2. -

  2. Open Claude Code in it

    $ cd ~/OpenVideoHarness && claude
    3. -

  3. Ask for a film

    “Make a 30-second vertical science short: why does a low-orbit satellite's signal change pitch? English voiceover, English and Chinese subtitles.”
    4. -
- -
-
quickno stops · 10–30 min
-
standardthree stops · 1–2 h
-
studiopolished over rounds · 3 h+
-
-

Times are for a 30-second film. Needs Node.js 22+, Chrome, FFmpeg, Python 3 with uv, and Claude Code or Codex.

-
-
+
+