Giffium

Giffium is a tool to generate animated code snippets that highlight the diff between two different snippets. The goal is to generate sharable GIFs and/or MP4s in a similar vein to Carbon or Ray.so.

Comment

Inspiration

Giffium takes its inspiration from tools like carbon.now.sh and ray.so. The goal is to make socially sharable diffs instead of static code snippets. Adding WebMCP support seemed like a good idea to give agents access to its functionality without having to build a CLI tool from scratch.

What it does

Giffium takes in 2 code snippets and animates them to and from each other using shiki-magic-move. The result is captured into a set of frames that we build a GIF from. There is the option to create an MP4 file as well for smoother animation compared to a GIF.

The WebMCP tool allows the agent to generate a gif of a diff. It also exposes a separate tool to modify the styling such as font, font size, syntax highlighting theme, and background color.

How wIbuilt it

Giffium was originally built for the SolidJS hackathon 2024 before AI was as capable as it is now. So it was hand-coded. It won that year of the hackathon. The core functionality is due to shiki-magic-move by antfu. However, we still needed to build out the entire configuration layer as well as the building of the GIF and MP4 files.

The WebMCP support was fairly simple to add for the WebMCP challenge after using OpenSpec to explore the WebMCP spec and documentation.

Challenges we ran into

Capturing shiki-magic-move is not as simple as expected. This is because it is animating raw DOM elements. So, we needed to use RequestAnimationFrame to capture the HTML contents into an off-screen canvas and capture that into individual frames.

Some other challenges involve font space and element offsets. The fonts are loaded in from Google Fonts and the WebMCP tool for generating the GIF was not giving the font enough time to download which broke the layout and spacing of elements.

Accomplishments that I'm proud of

Adding MP4 support using ffmpeg-wasm was a fun experiment that turned out well. The trickiest part was making sure we didn't blow up the bundle size by including it by default. Giving the user the option to download it and handling that process was a good UX problem to solve.

What I learned

Implementing WebMCP is much more straight-forward than a full proper MCP server and testing is as simple as asking ChatGPT Desktop to validate all of the tools.

What's next for Giffium

It might be nice to implement some loop metadata configuration since the GIF spec supports assigning X amount of loops and stopping at the end, as an example. This will be tricky since the library being used is modern-gif which doesn't have support for loop metadata, yet. I might also consider packaging the tool's functionality into a CLI.

Built With

Share this project:

Updates