Your agent thinks in steps. Your audience shouldn’t have to.
Reconstruct browser traces into smooth, narrated 1080p60 video.
npm install -g tracereelImport a repository and configure your deployment.
Record what your agent actually sees in its main, logged-in browser.
Real cookies. Real auth sessions. Real state. Your extensions, intact.
1080p / 60fpsNo freshly spawned headless browser pretending to be you. No blank-session login wall standing in for your agent’s work.
The agent captures state/action traces and screenshot frames directly from its live session. TraceReel ingests that capture—not a re-enactment in a new browser.
tracereel reconstruct trace.json -o demo.mp4Connect over the Chrome DevTools Protocol to existing Chrome or Brave with remote debugging enabled. Work in the agent’s browser, never launch a blank replacement session.
--remote-debugging-port=9222Browser configuration · local-only endpointYour task. Your agent. Your authenticated browser.
A ready-to-paste starting point for the next take.
Claude Code · Cursor / Windsurf · any CLI agent
Install TraceReel with npm install -g tracereel, then run tracereel doctor and inspect the installed CLI help.
Use my running, logged-in browser on local CDP port 9222. Use --cdp 9222 only if the installed capture command supports it; otherwise use your existing browser connection and capture Trace Format v1 states, actions, and frames directly from that session. Never launch a blank browser, copy my cookies, or replace my authenticated profile. If attachment is unavailable, stop and ask me to enable it.
Perform this browser task: [DESCRIBE YOUR TASK HERE]. Ask before purchases, submissions, or other irreversible actions. Track the actions and screenshots, save trace.json and its frames, validate with tracereel validate trace.json, then reconstruct a smooth 1080p60 demo with tracereel reconstruct trace.json -o demo.mp4. Report the output path and any missing prerequisites.CDP attaches to a browser with remote debugging already enabled; the flag alone does not restore login state. Keep port 9222 local. Prompts check installed support before using --cdp or planned APIs.
Spring-eased glides · click ripples · natural typing
Bounding-box focus · eased zooms · viewport pans
Narration · music ducking · SRT / VTT subtitles
TraceReel encodes on the same machines your agent runs on — no GPU instances, no CUDA, no graphics drivers. Every render path ships with the CPU it was given.
Cloud VMs, GitHub Actions runners, Docker containers, and agent sandboxes run on standard x86/ARM CPUs — usually with no graphics hardware attached at all.
x86 / ARM · cloud VMs · CI · sandboxesChromium rasterizes smooth 60fps frames in software mode with --disable-gpu — zero graphics hardware dependencies, identical output on any machine.
chromium --disable-gpu · swiftshaderParallel time-sliced chunk rendering scales across all available CPU cores, falling back gracefully to libx264 while using hardware encoders when present.
libx264 · threads = auto · hw accel when presentThe states, actions, and coordinates behind the deployment.
One normalized trace. A completely different viewing experience.
{
"version": 1,
"source": {
"type": "agent-browser",
"agent": "muse",
"session": "main"
},
"viewport": {
"width": 1920,
"height": 1080
},
"screenshotsDir": "frames",
"states": [
{
"id": "import",
"screenshot": "01.png",
"holdMs": 2100
},
{
"id": "named",
"screenshot": "02.png",
"holdMs": 2600
},
{
"id": "region",
"screenshot": "03.png",
"holdMs": 2300
},
{
"id": "deployed",
"screenshot": "04.png",
"holdMs": 3000
}
],
"actions": [
{
"kind": "type",
"from": "import",
"to": "named",
"x": 1171,
"y": 432,
"text": "tracereel-demo"
},
{
"kind": "click",
"from": "named",
"to": "region",
"x": 1382,
"y": 702
},
{
"kind": "click",
"from": "region",
"to": "deployed",
"x": 1594,
"y": 853
}
]
}Import a repository and configure your deployment.
Validate the capture. Reconstruct the motion. Mix the audio.
Or hand the entire session to your agent over MCP.
tracereel reconstruct trace.json -o demo.mp4Capture what the agent did. Rebuild how it should be seen.
Four composable systems, from raw state to final frame.
Adapters translate agent-specific captures into ordered states, screenshots, and coordinate-based actions.
Muse / Grokbot / Generic → Trace v160 Hz interpolation turns discrete cursor coordinates into eased trajectories, with click rings and natural typing cadence.
cursor(t) → Bézier path → spring easingBounding-box focus guides the camera toward active controls. Eased viewport transitions replace abrupt jump cuts.
action bounds → focus → zoom / panObserve the browser, perform an action, journal the take, and record the result through the MCP stdio tool loop.
takeone_look → do → journal → recordThree major engine upgrades, from organic motion to automated delivery.
ζ = 1 · 60 HzOrganic cursor momentum without overshoot. Automatic focus bounding boxes keep active inputs and the next action in frame.
Multithreaded scene chunking meets hardware-accelerated encoding with NVENC and VideoToolbox.
A Hono/Fastify server and job queues for automated agent workflows. Generate 60fps PR demo videos for agent pull requests.
Planned backend capabilities, not services running on this showcase. The headless API orchestrates live-session captures; it doesn’t replace your authenticated browser.
Add an adapter. Tune a trajectory. Improve the next take.
TraceReel is MIT licensed, from capture to codec.
AI browser traces → polished 1080p60 demos