HTML demo video guidelines

Keep this list current. When Dex gives new feedback on a video, add it here in the same short form.

Do

• Look at source footage through contact sheets to learn what the product looks like.
• Transcribe the source demos to learn how Dex talks about the feature, then write in that register.
• Build every visual as HTML / JS motion graphics and render frames from a timeline.
• When the source is Dex talking over a screen share, keep his original voice track, add music under it, and replace only the screen recordings.
• Redraw the product UI in simplified, on-brand form: real fonts, real colors, real layout, fewer details.
• Use one realistic task that runs through the whole video.
• Show real-looking work: a real code diff with syntax highlighting, and an artifact that reads like a real plan or doc.
• Show cause and effect side by side. The agent works on the left, the product reacts on the right, and both stay on screen.
• Move focus by growing the active panel and shrinking and dimming the other. Don't cut away.
• Make key UI actions easy to see: the button, the hover state, the click, the result.
• Use one short caption at a time: big, centered, near the bottom, on a dark backdrop.
• Write captions as a plain sentence that says what is happening on screen, like "teammates can comment on the diff while pi is working".
• Land a joke as a normal caption. Dry, not loud.
• Show collaboration with live cursors and named teammates.
• When the line is about the whole team's work, show the task board (kanban columns filling with teammates' tasks, one card moving across).
• End on the few core ideas drawn as a system: nodes, links, things flowing both ways, then collapse into the logo.