Screen Recording to GIF

100%

Screen Recording to GIF

✓ Published0🌍 Public

Last edited Jun 1, 2017

Created on Dec 20, 2014

This example shows how to convert a screen recording into an animated GIF using command-line tools. It first generates a color palette from the video with FFmpeg’s `palettegen` filter, then applies that palette with `paletteuse` to produce a high-quality GIF. The workflow also supports optional frame dropping via `fps` and cropping through FFmpeg’s `crop` filter. The code relies solely on FFmpeg and Gifsicle, with QuickTime Player used for the initial recording.

AI-generated description

If you haven’t already:

brew install ffmpeg gifsicle

Open QuickTime Player. File > New Screen Recording. Record. Trim as needed. Save as foo.mov.

First compute a good color palette:

ffmpeg -i foo.mov -vf 'scale=-1:-1:flags=lanczos,palettegen' foo-palette.png

Then make your GIF:

ffmpeg -i foo.mov -i foo-palette.png -filter_complex 'scale=-1:-1:flags=lanczos[x];[x][1:v]paletteuse' foo.gif

To drop frames, add fps=10, to the -filter_complex argument.

To crop, add crop=width:height:x:y, to the -filter_complex argument.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Screen Recording to GIF

This example demonstrates a command-line workflow for converting a QuickTime screen recording into an optimized GIF. It first uses ffmpeg to extract frames at 24 fps, then ImageMagick’s `convert` to build a palette from the first frame, remap all frames with `-remap` for color reduction, and finally gifsicle with `--optimize=3` to compress the output. A resize option via gifsicle shows how to scale the final image, while the code notes alternative tools like LICEcap and the trade-offs of uploading MOV files to Twitter.

11wheel

89% match

Loading thumbnail…

Gist 57367d54143770b7c1d534cbfe002cd9

This example shows a Python script that combines multiple video clips into a single montage, resizing each to a fixed 460×720 resolution and concatenating them in sequence. The code uses MoviePy’s `VideoFileClip`, `concatenate_videoclips`, and `write_videofile` functions, along with its `vfx` module for potential filters. It saves the final output with a timestamped filename and writes it as an MP4 using the H.264 codec. The rendering approach relies on MoviePy’s FFmpeg backend, processing clips in sequential order without additional data sources.

CConorAspell

58% match

Loading thumbnail…

Generate a MP4 Video for your Git project commits using Gource!

This example generates a video of a Git project’s commit history as an animated tree visualization. Gource parses the repository’s log data and renders contributors, files, and directories as moving nodes and edges against a black background. The output, at 1920×1080 resolution, is piped as a PPM stream from Gource into ffmpeg, which encodes it as an H.264 MP4 file using the libx264 codec with ultrafast preset and a constant rate factor of 1. A secondary ffmpeg pass compresses the result into a smaller `reposm.mp4` file.

FFrozenfire92

56% match

Loading thumbnail…

Gist 86435

This example demonstrates a command-line tool for capturing full-page screenshots of websites using MacRuby and WebKit. It shows a configurable web capture system that loads a URL, optionally resizes the viewport, waits for a specified delay, and saves the rendered page as a PNG. The code relies on the WebKit framework’s WebView and frame load delegation, alongside NSBitmapImageRep to rasterize the view’s content. Users specify options like width, height, output filename, and delay via Ruby’s OptionParser.

CCaged

55% match

Loading thumbnail…

Creating Thumbnails with GraphicsMagick

This example demonstrates a batch image processing workflow using GraphicsMagick’s `gm convert` command. It shows how to automatically generate uniform thumbnails from a folder of PNG images, first cropping each source to a 1920x1000 region offset by (312, 510) pixels, then resizing the crop to 230x120 pixels. The shell script iterates over all PNG files in the `source` directory, processes each one, and saves the results to a `target` folder. The approach relies on Bash array expansion and the `gm` command-line tool’s `-crop` and `-resize` operators.

Mmbostock

55% match

Loading thumbnail…

Screencasting Framework from CodeSchool.com

This example is a guided tour of a screencasting framework, showing the step-by-step workflow and best practices for creating educational videos. It presents the framework’s key concepts, from scripting to camera use, using a series of interactive slides and panels. The visualization is rendered with WebGL, with the content structured around the accompanying markdown document from the source gist. The code uses raw WebGL for rendering, displaying text and layout information without relying on higher-level charting libraries like D3.

IIoTeacher

53% match

Loading thumbnail…

GraphicsMagick Cheat Sheet

This example presents a single-shell cheat sheet for GraphicsMagick, a command-line image processing tool. It demonstrates how to make a non-square image square by adding transparent padding using the `montage` command with `-geometry 1024x1024` and `-background none`. The displayed code shows the exact shell syntax and flags needed to achieve this operation, serving as a quick reference for users. The visualization itself is a static code listing, with the rendering approach being the monospaced text output of the script.

Mmbostock

52% match

Loading thumbnail…

Gist 56494ad7dada033af61cc1c9c3d87776

This example presents a full-screen, animated canvas of randomly colored square pixels that continuously redraws itself. It shows how a simple generative pattern can create a dynamic, shifting mosaic across the entire browser window. The code uses the Canvas 2D API with `fillRect` and `requestAnimationFrame` to refresh the display, while each frame assigns new random RGB values to every pixel block. The visualization responds to window resizing by updating the canvas dimensions, and it is rendered inside a draggable, resizable widget container.

HHypercubed

51% match