smart_export
Convert recorded .webm files to GIF or MP4 with tooltip overlays showing magnified interaction details, keeping the full viewport visible for product demos.
Instructions
Convert a recorded .webm to GIF or MP4 with tooltip overlays on interactions.
The full viewport stays visible. When an interaction happens (click, type, hover), a clean tooltip inset appears showing a magnified close-up of that area with a small arrow pointing toward the interaction. Modern, minimal design (Linear/Figma style).
The tooltip positions itself on the opposite side of the screen from the interaction.
Perfect for product demos where viewers need to see both the full UI context AND the detail.
Example workflow:
record_page → interact_page (clicks, typing, etc.) → stop_recording
smart_export with the webmPath and timelinePath from stop_recording
Get a polished GIF/MP4 with tooltip overlays on every interaction
Compare with cinematic_export which crops the entire frame to follow the action.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| fps | No | Frame rate for GIF output | |
| width | No | Output width for GIF (height auto-scaled) | |
| format | No | Output format (default: gif) | gif |
| webmPath | Yes | Path to the .webm file from stop_recording | |
| tooltipSize | No | Size of the tooltip inset in pixels (default 380) | |
| magnifyScale | No | How much to magnify inside the tooltip (default 1.6x) | |
| timelinePath | Yes | Path to the -timeline.json file from stop_recording | |
| holdPerTarget | No | How long to show each tooltip (seconds) |