Skip to content

Screenshots and recordings

Product demos, "how to use this app" videos and PR walkthroughs whose change shows in the UI need the real screen on screen. manimvox doesn't open browsers or apps itself: your agent captures with the tools it already has (a browser tool such as Playwright MCP, or computer use), and manimvox presents the captures, timed to the narration.

What you can do

screenshot(path) a PNG, JPEG or WebP file as a clip
from_video(path, start=, end=) a screen recording (MP4, WebM, MOV) as a clip that plays
clip.zoom(x, y, w, h) / clip.zoom_out() zoom into a region inside the clip's own frame, and back
spotlight(clip, region) dim everything except a region, and outline it
callout(clip, region, "text", side=) a label with an arrow to a region
cursor(), point(pointer, spot), click(pointer) a mouse pointer that moves and clicks
window(clip, url=) browser or app chrome around a screenshot

Regions are (x, y, w, h) in the pixels of the file, counted from the top left, so you can read them off the screenshot itself. They stay right however wide the clip is and however far it zooms.

Example

from manimvox.kit import *
from manimvox.scenes import callout, click, cursor, point, screenshot, spotlight, window

SEARCH = (1135, 9, 196, 35)        # the search box, in pixels of the screenshot


class Ep01(Episode):
    def build(self):
        shot = screenshot("research/screens/01-home.png", width=10.4).move_to(STAGE_CENTER + DOWN * 0.25)
        self.say("This is the home page.", FadeIn(Group(window(shot, url="example.com"), shot)))

        pointer = cursor().move_to(shot.get_center())
        self.say("Search finds any page.", FadeIn(pointer), point(pointer, shot.at(1160, 26)))
        self.say("Click it.", click(pointer))

        spot = spotlight(shot, SEARCH)
        self.say("Everything else fades back.", FadeIn(spot))

        self.say("Look closer.", FadeOut(spot), FadeOut(pointer), shot.zoom(*SEARCH))
        tag = callout(shot, SEARCH, "Ctrl+K", side="down")
        self.say("Or press Control K.", FadeIn(tag))
        self.say("Back to the page.", FadeOut(tag), shot.zoom_out())

A zoom stays inside the clip's frame, so it never covers the header. Make overlays after a zoom, because they point at the picture as it is when they're made.

With an agent

The animation skill tells the agent how to capture: at 1920x1080, saved to research/screens/, with a fresh browser profile and nothing personal on screen, and with each capture cited in FACTS.md. The agent asks you before it opens a URL or an app, as for any web access. If it has no capture tool, it asks you for the screenshots.

Ask for it in plain words: "make a 1-minute demo video of how to search this docs site", or "walk through PR #42 and show the page before and after".