Back
Blog post cover

How to create a ProductHunt GIF with remotion.dev

Avatar of Dominik Sumer

Dominik Sumer

May 04, 2022·3 min read

In February we launched snappify on ProductHunt. Preparing all the content and assets was quite an effort, but it paid off as more people got aware of our product.

One of the assets which impacts your launch is the logo of your product. It’s shown in the daily list of products, as well of the product page itself and it definitely helps if it catches the attention of the viewers!

This logo can in fact also be an animated GIF, which of course draws more attention than a still image. Me as a developer always has a hard life animating videos / GIFs as it’s not my profession to do so. But I want to show you a way how you can leverage your frontend animation skills (in this case with React) by using remotion.dev!

TLDR? Check out the GitHub repository for the source code of the video.

Animated snappify logo
Animated snappify logo

Programming a video

Yes, I programmed the GIF for our ProductHunt logo! With remotion.dev I was able to use familiar web technologies to create animations which then result in videos (.mp4 files).

This even gave me the possibility to reuse an existing React Component from snappify (the code editor window) for the animated logo. It’s like they state on their landing page: "If you know React you can make videos.”

Check out their Docs and Showcases in order to start creating your videos with Remotion.

The ProductHunt GIF should be a square and we used a dimension of 240x240 pixels, as we saw other Products used the same. We used a white background as it then looks good on the overview page as well on the product page itself.

So our remotion Composition looks like this:

video.tsx
export const RemotionVideo: React.FC = () => {
  return (
    <>
      <Composition
        id="SnappifyLogo"
        component={SnappifyLogo}
        durationInFrames={180}
        fps={30}
        width={240}
        height={240}
      />
    </>
  );
};

And this is how our remotion.config.ts file looks like:

remotion.config.ts
import { Config } from 'remotion';

Config.Rendering.setScale(4);
Config.Rendering.setImageFormat('jpeg');
Config.Output.setOverwriteOutput(true);

We set the scale of the video to 4 as it led to a much better quality. When converting the .mp4 file to a GIF, we scaled it down to the preferred size (240x240) again.

Convert to GIF

When executing npm run build Remotion generates a .mp4 file for us. ProductHunt only accepts animated GIFs, so we need to find a way to properly convert our video.

We tried several conversion apps and ended with Gifski. It’s straighforward, has the ability to choose the FPS and an endless loop, aswell as downscaling the GIF to the desired size. It also led to the best outcome in terms of quality of the GIF.

Conclusion

If you’re a frontend developer looking into creating videos, definitely have a look at Remotion! It lets you leverage your existing knowledge and you’re even able to reuse your existing React components.

Checkout the GitHub Repo containing the source code of the animated snappify Logo we used for our ProductHunt launch: https://github.com/snappify-io/producthunt-gif

Share Article