Compatible store LED modules -> Displays

Create LED Matrix Animations Frame by Frame — Free Online Tool

Want to display animated icons, scrolling arrows, blinking patterns, or custom effects on your MAX7219 LED dot matrix? Our free LED Matrix Animator lets you design animations frame by frame, preview them in real time, and export ready-to-use Arduino code — all in your browser.

Works with MAX7219/MAX7221 LED matrix modules, the MD_Parola and MD_MAX72XX Arduino libraries, and any LED dot matrix from 8×8 up to 32×8. No software to install, no account needed.

What You Can Do

The LED Matrix Animator is a complete frame-by-frame animation editor designed specifically for LED matrix displays. Draw pixels on a grid, set timing for each frame, preview the animation playing live, and copy the generated Arduino code directly into your sketch. The tool includes 16 built-in patterns, a character stamp feature with multiple font sizes, onion skinning to see the previous frame while drawing, and per-frame duration control for precise timing.

How to Use the LED Matrix Animator

Step 1 — Set Your Matrix Size

Use the W (width) and H (height) inputs at the top to match your physical LED matrix. Or pick from the Size presets: 8×8 for a single module, 16×8 for two chained modules, 24×8 for three, or 32×8 for four. The drawing grid and LED preview automatically resize to match.

Step 2 — Draw Your First Frame

Click any cell to turn a pixel on or off. Click and drag to paint multiple pixels. The drawing grid uses green for lit pixels. The LED Preview next to it shows the same frame with realistic LED dot styling — round dots with glow, matching the look of real hardware.

Switch LED color with the color dots: Red, Green, Blue, White, or Amber — pick whichever matches your actual display.

Step 3 — Use Patterns as Starting Points

The Patterns panel below the drawing tools gives you 16 one-click patterns to apply to the current frame:

Geometric: Checkerboard, Checker Inv (inverted checkerboard), Border (outline rectangle), Cross (centered crosshair), X Diag (diagonal X), Diamond (diamond outline shape).

Stripes: H Lines (horizontal), V Lines (vertical).

Icons: Heart, Smiley face, Arrow → (right), Arrow ← (left).

Utility: Fill (all pixels on), Random (random ~45% fill).

Patterns are a fast way to create animation frames. For example: apply Checkerboard to frame 1, duplicate the frame, apply Checker Inv to frame 2 — instant blinking checkerboard animation. Or create a scrolling arrow by duplicating a frame and shifting it left each time.

Step 4 — Stamp Characters onto Frames

The Stamp Character panel lets you place text characters directly onto the animation grid. Pick from three built-in font sizes — 3×5 Tiny, 5×7 Standard, or 8×8 Bold — then click any character in the palette to select it. Set the X offset to position the character horizontally, then click Stamp ↓ to paint it onto the current frame.

Stamping is additive — it only turns ON pixels, it doesn't erase existing ones. This lets you layer multiple characters or combine text with patterns. For example, stamp an "H" at position 0 and an "I" at position 6 to create a "HI" frame on a 16×8 matrix.

Step 5 — Build Your Animation Timeline

Click + Frame in the Timeline section to add blank frames, or Duplicate to copy the current frame as a starting point for the next one. Each frame appears as a thumbnail strip at the bottom — click any thumbnail to switch to that frame for editing.

Each frame has its own duration in milliseconds. The default is 200ms (5 frames per second). Set shorter durations (50-100ms) for fast flickering effects, or longer durations (500-1000ms) for slow transitions. Different frames can have different durations — useful for effects like a quick flash followed by a long pause.

Reorder frames with the ◀ ▶ arrow buttons on each thumbnail. Delete unwanted frames with the ✕ button.

Step 6 — Preview Your Animation

Click ▶ Play in the Timeline header to play your animation. The drawing grid and LED preview update in real time, cycling through all frames at their set durations. Click ⏹ Stop to pause on any frame and continue editing.

Step 7 — Use Onion Skinning

Check the Onion checkbox to see a ghost overlay of the previous frame while drawing. The previous frame's pixels appear as faint green on the grid, so you can see exactly what changed between frames. This is essential for creating smooth animations where elements move incrementally across the display.

Step 8 — Export Arduino Code

The Arduino Code section at the bottom generates a complete, copy-paste-ready sketch. It includes:

A PROGMEM array storing all frame data in column-major format (MSB=top), a duration array with per-frame timing, and a playAnimation() function that loops through all frames with proper delays. Copy the code, paste it into your Arduino IDE, and add your MAX7219 setup code.

Step 9 — Edit and Refine

Use the toolbar buttons to refine each frame: Clear erases all pixels, Invert flips lit and unlit pixels, and the shift arrows (◀▶▲▼) move the entire design one pixel in any direction — perfect for creating scrolling effects by duplicating and shifting.

Ctrl+Z undoes the last change. Click ✚ New to reset everything and start fresh.

Animation Ideas for LED Matrix Projects

Scrolling text: Stamp characters across multiple frames, shift left by 1 pixel per frame. Set 80-120ms per frame for comfortable reading speed.

Blinking icon: Frame 1 shows the icon, frame 2 is blank or inverted. Set 500ms each for a steady blink, 100ms for rapid flashing.

Loading spinner: Draw a dot rotating around the border — 8 frames, each with the dot at the next position. Set 100ms per frame.

Expanding shape: Frame 1: single center pixel. Frame 2: 3×3 cross. Frame 3: 5×5 diamond. Frame 4: full border. Creates a "pulse" effect.

Alternating patterns: Checkerboard → Checker Inv creates a buzzing texture. Border → Cross → X Diag creates a geometric sequence.

Try It Now

The animator is ready to use above. Design your LED matrix animation, preview it live, and export the Arduino code — all free, right in your browser.

Compatible Hardware

The LED Matrix Animator works with MAX7219 and MAX7221 LED matrix driver ICs, single 8×8 LED dot matrix modules, chained modules (16×8, 24×8, 32×8), the MD_Parola and MD_MAX72XX Arduino libraries, ESP8266, ESP32, Arduino Uno, Nano, Mega, and any microcontroller that supports MAX7219 communication.

More LED Matrix Tools

Need custom fonts for your LED matrix? Try our Pixel Font Designer — design complete character sets pixel by pixel and export them as MD_Parola font files.

Get the Parts

Browse our MAX7219 LED matrix displays, Arduino and ESP boards, and electronic components to build your animation project.