Render two .riv files side by side for visual A/B review
riv_ab_compareRender two Rive files side by side into a single GIF or APNG to visually compare animations or design variants.
Instructions
Render the same artboard/animation/state-machine from two .riv files under identical conditions and composite them side by side (horizontal or vertical) into a single GIF/APNG for human review — e.g. a rig before/after an edit, or two design variants. 'A: ' / 'B: ' labels are burned into each frame by default. If the two files' animation lengths differ, the shorter one holds on its final frame once it ends. Different from riv_visual_diff: that tool computes a per-pixel numeric diff of the SAME thing rendered two ways (for regression testing); this tool is for eyeballing two DIFFERENT things playing side by side (for design review), not measuring a delta.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| fps | No | Default 20 | |
| out | No | Output path (default: alongside pathA) | |
| pathA | Yes | First .riv file | |
| pathB | Yes | Second .riv file | |
| width | No | Panel width (default 320); panel height is derived from file A's aspect ratio and then forced onto file B so both panels align | |
| format | No | Output format (default gif) | |
| height | No | Panel height (default: derived from file A's own aspect ratio) | |
| labels | No | Burn 'A: <file>' / 'B: <file>' labels into each frame (default true) | |
| layout | No | Panel arrangement (default horizontal) | |
| artboard | No | Artboard name, applied to both files (default: first) | |
| duration | No | Seconds to render (default: the longer of the two files' own animation lengths) | |
| animation | No | Animation name, applied to both files (default: first) | |
| background | No | CSS background per panel (default: white for gif, transparent for apng) | |
| stateMachine | No | State machine name, applied to both files (takes precedence over animation) |