> ## Documentation Index
> Fetch the complete documentation index at: https://rdsciv/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<Note>
  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.
</Note>

### 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 |

<Tip>
  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.
</Tip>

### 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

<Steps>
  <Step title="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).
  </Step>

  <Step title="Set the animation source">
    In the **Animate** section, open the **Source** dropdown and choose **Parameter sweep** or **Video timeline**.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>
</Steps>

## Technical notes

* GIF encoding uses the [gif.js.optimized](https://cdn.jsdelivr.net/npm/gif.js.optimized@1.0.1/dist/gif.js) 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**

<Note>
  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.
</Note>

<Warning>
  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.
</Warning>