DEV Community

Cover image for AnimateLI5: Animation Software for a 5 year old
Naing Oo
Naing Oo Subscriber

Posted on

AnimateLI5: Animation Software for a 5 year old

#opensource #dotnet #animation

The Problem

My niece wanted to make animations. I tried a dozen apps — they all had tiny buttons, complex menus, text-heavy interfaces, and features designed for adults. A 5-year-old shouldn't need to read a tooltip to draw a star.

So I built one from scratch.

Meet AnimateLI5

AnimateLI5 (Animate Like I'm 5) is a free, open-source Windows desktop app that lets very young children create frame-by-frame animations.

The design philosophy is simple: if a child can't figure it out in 5 seconds, it's too complicated.

AnimateLI5 Interface

No Reading Required

Every single feature works through icons, colors, and spatial cues. There are no menus to navigate, no dialogs to read, no settings to configure. Just big colorful buttons that do obvious things.

What Can Kids Do With It?

  • Draw shapes — tap a shape button, tap the canvas. 10+ shapes including stars, triangles, and hexagons
  • Freehand drawing — brush tool with adjustable size and 9 color choices
  • Move, resize, rotate — drag handles on any element
  • Erase mistakes — circle eraser removes elements under the cursor
  • Build animations — add frames, duplicate frames, reorder them in a visual timeline strip
  • Watch it play — hit the big green play button, adjust speed from 1–30 FPS
  • Import stickers — drag & drop any image as a stamp
  • Undo everything — every action is undoable, because kids experiment fearlessly
  • Export to video — render to MP4 with a progress bar

The Tech Stack

Framework WPF on .NET 8
Language C# 12
Architecture MVVM with CommunityToolkit.Mvvm
DI Microsoft.Extensions.DependencyInjection
Video Export ffmpeg (external)
Tests xUnit

Architecture Decisions

Why WPF in 2026?

I know, I know. But for a Windows-only kids tool:

  • Hardware-accelerated vector rendering out of the box
  • Mature data binding (MVVM just works)
  • Rich input handling (mouse, touch, stylus)
  • Single self-contained EXE — no browser, no Electron, no 200MB runtime

Why MVVM with Source Generators?

CommunityToolkit.Mvvm's source generators eliminate boilerplate. Instead of 15 lines of INotifyPropertyChanged plumbing:

[ObservableProperty]
private string _selectedColor = "#FF4081";

[RelayCommand]
private void SelectColor(string color) => SelectedColor = color;
Enter fullscreen mode Exit fullscreen mode

Two attributes. Done. The generator handles the rest.

Plugin System

The solution is split into 3 projects:

SimpleAnimate.Core    → Models, interfaces, services (zero WPF refs)
SimpleAnimate.Plugins → IPlugin contract + loader
SimpleAnimate         → Thin WPF shell
Enter fullscreen mode Exit fullscreen mode

Plugins reference only Core and implement IPlugin.Configure(IServiceCollection). Drop a DLL in the plugins/ folder and it's loaded at startup. This keeps the door open for community extensions without touching the main app.

Undo Everything

Every canvas mutation creates an IUndoableAction:

var action = new MoveAction(element, oldX, oldY, newX, newY);
_undoService.Execute(action);
// Ctrl+Z → action.Undo() restores the old position
Enter fullscreen mode Exit fullscreen mode

Classic dual-stack (undo/redo). Kids mash buttons — undo must always be there.

UX Decisions Worth Noting

Color, not text — the toolbar uses colored backgrounds to group tools. Shapes are on colored buttons matching the app's palette. No labels.

Frame timeline is visual — frame thumbnails at the bottom, not a number list. Tap to edit, big + button to add.

FPS control is just ➖ and ➕ — no slider, no textbox. Minus and plus buttons with a number between them.

Video Export

Export renders each frame to PNG via WPF's RenderTargetBitmap, then pipes them through ffmpeg to produce an MP4. A progress window shows real-time status by parsing ffmpeg's frame=N output with regex.

The app auto-discovers ffmpeg from PATH or common install locations. No ffmpeg? Everything else still works — you just can't export video.

Try It

Download: AnimateLI5 v1.0.0 (Windows, 64-bit, self-contained — no .NET install needed)

Source: github.com/n-92/AnimateLI5

Demo Video: Watch on YouTube

What I Learned

  1. Designing for kids is harder than designing for developers. You can't fall back on text, tooltips, or documentation. Every affordance must be visual and immediate.

  2. Undo isn't optional — it's the most important feature. Kids explore by clicking everything. Without undo, one wrong click means tears.

  3. WPF is still perfectly fine for desktop tools. The ecosystem is mature, the tooling works, and a self-contained single-file publish produces a clean distributable.

  4. Source generators changed C# MVVM. CommunityToolkit.Mvvm eliminates the tedium that made MVVM feel heavy. Two attributes replace dozens of boilerplate lines.

AnimateLI5 is MIT licensed. Contributions welcome — especially if you have ideas for making it even simpler.

If you've got a young kid who likes to draw and animate, give it a try and let me know how it goes. 🎨

Top comments (0)