Exporting Animated GIFs from ASCII Art

Create looping animated GIFs in the browser by sweeping any numeric parameter or scrubbing through a video timeline, with easing and direction control.

The ASCII art converter can render multi-frame animated GIFs entirely in the browser. You can animate any numeric rendering parameter — cell size, contrast, gamma, and more — across a range of values, or scrub through a loaded video file frame by frame. Full control over frame count, playback speed, easing, and loop behavior lets you produce anything from a quick two-frame flicker to a smooth sixty-frame looping animation.

Animation sources

The Source dropdown at the top of the Animate section offers two modes:

• Parameter sweep — holds your image fixed and interpolates a chosen rendering parameter from a start value to an end value across the specified number of frames.
• Video timeline — holds all rendering parameters fixed and scrubs a loaded video file from its beginning to its end, distributing frames evenly across the video’s duration.

Animation settings

The Parameter dropdown and From/To fields only affect output when Source is set to Parameter sweep. When Source is Video timeline, the video frames supply the content for each GIF frame and those fields are ignored.

Parameter

When using parameter sweep, choose which numeric parameter to animate:

Option	Controls
Cell size	Character grid resolution
Contrast	Luminance contrast multiplier
Gamma	Gamma correction exponent
Saturation	Color saturation multiplier
Hue shift	Hue rotation in degrees
Bloom amount	Bloom post-effect intensity
Edge threshold	Minimum Sobel magnitude for edge-aware characters
Font weight	CSS font-weight of the rendered characters

From and To

The From and To number fields set the start and end values for the swept parameter. Both accept values from 0 to 2000 in steps of 0.5. The direction setting controls which end is the start of the animation.

Frames

The Frames field sets the total number of frames in the GIF. Accepted range is 2 to 300; the default is 60. Higher frame counts produce smoother motion but increase file size and encoding time.

FPS

The FPS field controls playback speed in the exported GIF. Accepted range is 1 to 60; the default is 24. Note that GIF frame delay is stored in centiseconds, so very high FPS values may be rounded to the nearest representable delay.

Direction

Option	Behavior
Forward (From→To)	Plays from the From value to the To value
Reverse (To→From)	Plays from the To value back to the From value
Ping-pong	Plays forward to the To value, then reverses back to From

Use Ping-pong direction combined with Ease in/out easing for smooth looping animations. The motion accelerates away from the From value and decelerates back to it, making the loop point invisible.

Easing

Easing shapes how the parameter value changes across frames:

Option	Effect
Linear	Constant rate of change
Ease in/out	Slow at both ends, fast in the middle
Ease in	Slow at the start, accelerates toward the end
Ease out	Fast at the start, decelerates toward the end
Exponential	Extreme acceleration — very slow start, very fast finish

Quality

The Quality slider ranges from 1 to 30 with a default of 10. This value is passed directly to gif.js as its color quantization quality setting: a lower number means higher quality and a larger file size. Set it to 1 for maximum fidelity; raise it toward 30 to reduce file size at the cost of color accuracy.

Loop

The Loop checkbox (checked by default) controls whether the GIF repeats indefinitely. When unchecked, the animation plays once and stops on the final frame.

Workflow

1. Load an image or video

   Drop an image or video file onto the drop zone, click it to browse, or paste an image from your clipboard. For video timeline mode you must load a video file (MP4 or MOV).

2. Set the animation source

   In the Animate section, open the Source dropdown and choose Parameter sweep or Video timeline.

3. Configure animation settings

   For a parameter sweep: choose the Parameter, set From and To values, and adjust Frames, FPS, Direction, and Easing as needed. For video timeline: set Frames and FPS only.

4. Preview the animation

   Click Preview animation or press Space (or P) to play the animation live on the canvas. The button label changes to Stop preview while previewing. Press the shortcut again or click the button to stop. Previewing does not produce a file — it is only for checking your settings.

5. Export the GIF

   Click Export GIF or press G. The status line below the button shows progress:

   • Rendering frame N/N while each frame is drawn to the canvas
   • Encoding GIF… X% while gif.js quantizes and encodes the frames
   • Saved (X.XX MB) when the download has been triggered

   The browser downloads the finished file automatically.

Technical notes

• GIF encoding uses the gif.js.optimized library, loaded from the jsDelivr CDN.
• The gif.js worker script is fetched from jsDelivr on the first export and wrapped as a blob URL to avoid cross-origin worker restrictions. The URL is cached for subsequent exports within the same session.
• The filename format is ascii-{paramId}-{from}-to-{to}.gif — for example, a cell size sweep from 5 to 40 produces ascii-cell-5-to-40.gif.
• Keyboard shortcut: G

The first GIF export in a session fetches the gif.js worker script from jsDelivr. You need a working internet connection for this initial fetch. Subsequent exports in the same session reuse the cached worker and do not require network access.

Large frame counts at high canvas resolutions require significant memory. The encoder estimates working memory as frames × width × height × 4 bytes. If this estimate exceeds 500 MB, you will be prompted to confirm before rendering begins. For example, 300 frames at a 1600×900 canvas requires roughly 1.7 GB of working memory and may crash or stall the browser tab on lower-memory devices. Reduce the frame count, lower the cell size (which increases the number of characters and therefore the canvas resolution), or use a smaller source image to keep memory usage manageable.