GIF two-pass rendering

[JonnyBurger]

Hi! I'm creating a gif using remotion but it gets rendered in low quality. Instead, if I create an .mp4 video and then render a gif using ffmpeg and creating a collor pallete I get a higher quality gif.

• Gif creation with Remotion
  $ npx remotion render --codec=gif src/index.tsx TemplateExample out/created-with-remotion.gif
• Gif creation with FFMpeg
  $ npx remotion render src/index.tsx TemplateExample out/video.mp4
  $ ffmpeg -ss 00:00:00 -t 5 -i out/video.mp4 -filter_complex "[0:v] palettegen" palette.png
  $ ffmpeg -ss 00:00:00 -t 5 -i out/video.mp4 -i palette.png -filter_complex "[0:v] fps=10,scale=720:-1 [new];[new][1:v] paletteuse" created-with-ffmpeg.gif
  Do you know if there's some way to configure this pallete directly from remotion? Or another way to create a higher quality gif? > Thanks!

Use cases:

• Sample a palette to make the GIF prettier
• Support transparent GIFs

[AgusPk]

how about something like this to do it in one step?

ffmpeg out/video.mp4 -filter_complex "[0:v] fps=15,scale=w=720:h=-1,split [a][b];[a] palettegen=stats_mode=single [p];[b][p] paletteuse=new=1"out.gif

[gexin1]

I found a way to generate gifs from png

1. we set options get transparent png

 --image-format=png

2. Combine PNG into gif

ffmpeg -i element-%2d.png  -filter_complex split[v],palettegen,[v]paletteuse test.gif

3. I got

[JonnyBurger]

Thanks a lot for those suggestions, I will try them!