Game UI Motion Kit
One game screen moment, in every theme, language and size.
Interactive Demo A browser demo on sample data. The tool itself is not released yet.
The problem
Game marketing needs the same UI moment in many versions. Built by hand, versions drift and long translations overflow.
What I built
A tool that treats the scene as data and the versions as a grid, and checks every label before render. An After Effects script builds the versions and the export sizes.
- Theme, language and reward combinations
- Numbers formatted per language
- Long text shrinks or is flagged
Features and limits
Built and tested
- An invented arcade game, Comet Crew, with a reward scene: panel slides in, the number counts up, a burst pops.
- Versions as a matrix: theme × language × reward, each with a unique export name.
- Numbers formatted per language (15,000 / 15.000); long headlines and buttons shrink to fit, down to 70%, and anything that still does not fit is flagged.
- Export presets for store preview, social vertical and in-game overlay, and a CSV of every version with its issues.
- Export the kit spec: the After Effects script builds all 18 versions from it, measures the real text width and renders the three presets.
Limits
- The After Effects kit script is written and passes on a mock of After Effects in Node, but it has not run in After Effects yet, so it is not offered as a download. No plugin is involved.
- All game art is invented for this demo; no real game assets.
- Text width is estimated from average glyph widths.
Planned
Animation states, localization-safe layouts and batch rendering.
How to use
- Pick a theme, language and reward; press Replay.
- Read the matrix line to see whether every version fits.
- Export the version list as CSV.
How it works
- The scene is a function of time and version, so every version shares one animation.
- Number formatting uses the browser's Intl.NumberFormat per locale.
- Fit shrinks font size step by step and reports anything still too wide.
Download
No download yet. A download appears here only after the package is built from reviewed code, installed and tested.
Tested versions & limits
- Pass Unit: version matrix with unique names Node 22, Linux
- Pass Unit: locale number formats; label fit and overflow flags Node 22, Linux
- Pass Unit: scene timing (slide, count, burst) Node 22, Linux
- Pass Browser: matrix and a German version Chromium (Playwright), 1280px
- Pass Kit script on a mock After Effects project: 18 versions, count-up expression equal to the page for every language, fitting, three presets queued Node 22, Linux
- Not tested yet Host: versions built and measured in After Effects; export presets rendered and checked Not run
Last verified 2026-10-31.
Scene, versions and checks work in the browser on invented game art, and the page exports the kit spec. The After Effects kit script (every version from the spec, text measured and fitted in After Effects, three export presets) passes on a mock After Effects project; it has not run in After Effects yet.
Details
- Input
- Original arcade-style mock UI
- Output
- Reusable scene compositions and export presets
- Runs in
- An After Effects script that builds every version of the scene from the kit spec and renders the export presets (not yet run in After Effects). Today: the scene, version matrix and checks, running in your browser.
- Source
- Original, rebuilt from scratch