Motionity

Web-based motion graphics editor — keyframing, masking, filters, text animations. A free alternative to After Effects and Canva, running entirely in the browser.

▶ Try the live demo — motionity.kawa.zip

---

Created by Alyssa X · maintained by Kawa

Fork of the original Motionity, with bug fixes, vendored (offline-capable) assets, desktop builds and a hardened container image.

---

How to run

Docker (recommended for self-hosting)

docker compose up -d          # http://localhost:8080

Or without compose:

docker run --rm -p 8080:8080 git.azuze.fr/kawa/motionity:latest

Build the image yourself:

docker build -t motionity:latest .        # ~86 MB on disk
docker build --build-arg WITH_FFMPEG=0 .  # -23 MB, no MP4/GIF export

Runtime is static-web-server on Alpine — no Node, no shell, runs as UID 65534, read_only filesystem.

Windows app

Grab the installer or the portable build from Releases:

File	What it is
Motionity Setup <ver>.exe	NSIS installer, per-user, choosable install dir
Motionity-<ver>-x64.exe	Portable, no install

Build from source (on Windows):

npm install
npm run dist:win              # -> dist/

Linux app

From Releases: Motionity-<ver>-x86_64.AppImage or the .flatpak.

chmod +x Motionity-*.AppImage && ./Motionity-*.AppImage   # needs libfuse2
flatpak install ./Motionity-*.flatpak                      # or this

Build from source (on Linux or WSL2):

npm install
npm run dist:appimage         # AppImage only
npm run dist:flatpak          # Flatpak only
npm run dist:linux            # both

From source — web

npm install
npm run vendor                # downloads third-party assets into src/vendor/ (~24 MB)
npm start                     # http://127.0.0.1:8080

HOST=0.0.0.0 PORT=3000 npm start     # bind elsewhere

From source — desktop

npm install
npm run vendor
npm run dev                   # Electron

In a VS Code terminal, ELECTRON_RUN_AS_NODE=1 breaks this. Unset it: $env:ELECTRON_RUN_AS_NODE=$null; npm run dev

Two things to know

• npm run vendor is mandatory for every non-Docker target. Without it the page loads but every script 404s. The Docker build runs it inside the image.
• Secure context required. WebCodecs (fast export) and IndexedDB (project saving) only exist on http://localhost or HTTPS. Over plain HTTP on a LAN address they silently disappear: export falls back to slow real-time capture, projects stop saving. Anything beyond localhost needs TLS — deploy/Caddyfile is the shortest path.

Full packaging details, WSL notes and troubleshooting: PACKAGING.md.

---

Dependencies

Everything is vendored at build time — no CDN is contacted at runtime.

Editor core

Library	Role
Fabric.js	canvas object model, selection, transforms
anime.js	keyframe animation engine
lottie-web	Lottie / Bodymovin playback
ffmpeg.wasm	MP4 / GIF export (single-threaded core)
webm-writer-js	WEBM muxing for the WebCodecs exporter

UI

Library	Role
jQuery	DOM plumbing
Pickr	color picker
Selection.js	timeline box-selection
Sortable	layer reordering
jquery-nice-select	styled <select>
range-slider	timeline / property sliders (vendored, no upstream banner)
Localbase	IndexedDB project storage
webfontloader	Google Fonts loading
Inter	UI typeface

Build & runtime

Package	Role
Electron	desktop shell
electron-builder	NSIS / AppImage / Flatpak packaging
static-web-server	container HTTP server

scripts/server.cjs (the npm start server) has zero dependencies — Node 18+ builtins only.

Still online by design

Google Fonts (font picker), Pixabay (image/video/audio search), Unsplash (empty-state samples). All three degrade quietly when offline; the editor itself starts and exports without a network.

---

License

MIT — same as upstream.