Overview
Introduction
Reviewing or presenting an animation frame by frame is much easier when each frame visibly shows its own position, like "3 / 12" burned right into the corner. This tool adds that overlay automatically, across every frame.
Decoding, drawing, and re-encoding all happen locally in your browser via canvas and a hand-rolled GIF89a codec.
What Is GIF Frame Counter Adder?
A frame-labeling tool that draws a small "current frame / total frames" counter directly onto every frame of an animated GIF, then re-encodes the labeled result.
The counter is genuinely part of each frame's pixel data afterward, not a separate layer that could be toggled off later.
How GIF Frame Counter Adder Works
The GIF is decoded into its full frame array. For each frame, the component draws that frame's image onto an offscreen canvas, then draws a small background box and the "N / total" label text at your chosen corner using `fillText`, and reads the result back as a new pixel buffer.
The pure geometry of where that background box sits (given the canvas size, chosen corner, and measured text dimensions) is computed by a small, unit-testable helper function, kept separate from the actual canvas drawing, which has to happen in a real browser context.
When To Use GIF Frame Counter Adder
Use it when preparing an animation for frame-by-frame review, a tutorial, or a presentation where viewers need to track which frame they're looking at.
It's also useful for creating a labeled reference copy of a GIF you're actively editing elsewhere in this category.
Often used alongside GIF Frame Viewer, GIF Frame Extractor and GIF Duplicator.
Features
Advantages
- Makes it trivial to identify exactly which frame is currently showing, without needing a separate viewer or player.
- Lets you choose which corner the counter appears in, so it can avoid important content in the frame.
- The label positioning math is a pure, testable function, kept separate from the canvas-specific text rendering.
Limitations
- The counter overlay permanently modifies every frame's pixels; there's no way to remove it afterward without the original file.
- A very small GIF canvas may leave limited room for a legible counter without it covering a meaningful portion of the frame.
Examples
Best Practices & Notes
Best Practices
- Choose a corner away from your animation's main visual content so the counter doesn't obscure anything important.
- Keep a copy of the original GIF before labeling, since the overlay is burned in and can't be removed from the output file.
- For very small GIFs, preview the result carefully, since the counter box takes up proportionally more space on tiny canvases.
Developer Notes
Following this codebase's existing emoji-stamp-creator pattern, the lib module stays DOM-free (label text formatting plus pure overlay-rectangle geometry), while the actual `fillText` rasterization and pixel read-back live in the client component, since there's genuinely no way to measure or draw real text without a live canvas rendering context.
GIF Frame Counter Adder Use Cases
- Preparing an animation for frame-by-frame review or a tutorial where viewers need to track position
- Creating a labeled reference copy of a GIF while actively editing its frames elsewhere in this category
- Producing debug/QA copies of an animation that make frame boundaries and counts immediately visible
Common Mistakes
- Expecting the overlay to be removable or toggleable later; it's burned into the pixel data permanently.
- Picking a corner that happens to sit over important visual content in every frame, making the label distracting rather than helpful.
Tips
- If you only need to check indices rather than produce a labeled file, GIF Frame Viewer's grid view already shows each frame's index without modifying anything.
- Combine with GIF Frame Splitter afterward if you want each labeled frame as its own standalone single-frame GIF.