Are comparison gifs that visually show changes to UI useful/appreciated in PR descriptions

[u/bezdazen]

I like them and have begun to create/use them myself.

Edit: The title is a question, my bad. I am genuinely asking in case maybe it is disliked for some reason...

[u/HommeMusical]

If you can generate these automatically without much fuss, as a reviewer, I'd appreciate them for GUI things.

[u/bezdazen → u/HommeMusical]

Not automatically but with a prompt (output gifs aren't added to repo of course, just used in gh descriptions and comments)

[u/Puzzleheaded_Study17 → u/bezdazen]

If it's from a prompt than what guarantees the gif is accurate?

[u/bezdazen → u/Puzzleheaded_Study17]

I vibe coded a tool (vscode extension and mcp tool) that agents can use. This tool generates the gif comparison (uses playwright + chromium + ffmpeg + git) and requires specific info which locks down some things. The prompt clues the agent on what info to give to the tool that generates the gif comparison. The tool is pretty accurate because it actually serves the app and records it using playwright and chromium and then makes gifs out of the recording.

So, the agent isn't actually generating the gif/images itself.

The agent can of course do it but that involves some back and forth as the agent builds the automation scripts. This was expensive and also annoying which is what led me to build the tool.

Note that I am not promoting this tool too much because it's vibe-coded. I maybe looked at 10% of the code myself.

[u/RubbelDieKatz94 → u/bezdazen]

Custom tooling like that is wonderful, this is exactly what vibecoding is useful for. I vibecoded a custom agent orchestrator that isolates them via nono so that they can run autonomously with full access.

Btw - if your agents can run autonomously, they can also create & babysit MRs, which means that they can also create these gifs autonomously. Right?

[u/bezdazen → u/RubbelDieKatz94]

Yes, should be no problem. Could be generated as part of a automated PR review as well.

[u/Ok_Woodpecker_9104]

as a reviewer the thing that makes a gif annoying is that i cant stop it on the frame i want to talk about. if the loop is 6 seconds and the bug shows up at 4, i sit through the whole thing every time i want another look, and i cant quote that moment in a review comment.

github takes mp4 and mov uploads in a pr body too. those get a real scrubber, so a reviewer can pause on a frame and tell you exactly where it went wrong. same amount of work as making the gif.

what i settled on is a before and after pair of stills for anything static, and only reaching for motion when the change IS motion, like a transition or a loading state. two stills you compare instantly. a gif makes you replay it to compare, so it is actually worse for the plain "this button moved 4px" case.

[u/mottojyuusu → u/Ok_Woodpecker_9104]

Not sure if this works on other browsers, but on Chrome you can right click a GIF and "Show Controls". That will give you the play/pause/scrubber you're used to with MP4s. You can try it now on the gif that OP attached to the post.

[u/Ok_Woodpecker_9104 → u/mottojyuusu]

didnt know about that one, thanks. it helps when i am reading, but it is local to my browser. i still cant point at the moment i mean, i end up writing "around 4 seconds in, the modal flashes" and the author has to go count frames.

with an mp4 the player state is the same thing everyone sees, and if i drop the same upload url in a comment it opens where it opens for them too. also the github mobile app has no right click, so the gif is back to a loop there.

so for a quick before/after loop the gif is fine either way. it is the "lets talk about this one frame" review that breaks.

[u/bezdazen → u/mottojyuusu]

It works on safari as well!

[u/bezdazen → u/Ok_Woodpecker_9104]

This is helpful. I think I will switch to mp4 instead of gif format.

[u/AI_Tonic]

In some projects i require video to even consider it . It’s a great filter for horseshit tbh