Game UI animation
Export a screen from Figma. Describe the animation, or build it beat by beat. Preview it, scrub it, export the JSON. No plugin, no second frame, no account, no sign-in.
Runs entirely in your browser. Your artwork is never uploaded anywhere.
Most tools want a plugin, or two frames, or an account. This one wants a file.
Straight from Figma's export panel. Keme Motion reads the structure — even when the export has no layer names at all, which is what a group export usually looks like.
Buttons, headings, cards, icons, illustrations and text are identified from geometry, z-order and repetition. A row of three similarly sized boxes is a set of cards, and it can be animated as one.
Add beats and set values directly, or type “make the cards appear one by one from the bottom”. Both produce the same animation; the second is just a faster way in.
Every change recompiles in milliseconds. Change a stagger from 110ms to 200ms and watch it, rather than exporting to find out.
The validated animation and its compiled timing, ready to hand to an engineer or feed into a pipeline.
A small set of effects that game UI actually uses, and they compose.
Slide, fade, scale, pop and rotate, with stagger and ordering. There is no need to build a “before” frame in Figma — the starting state is derived from the screen you gave it.
Every parameter the engine supports is exposed: amplitude, decay, particle count, spread, arc, gravity, scatter, easing.
Burst twelve coins from a chest, fly those twelve to the counter, then pulse it. One set of elements throughout — never twelve new ones at each stage.
Ask for a neon glow and it says there is no glow effect. Name something ambiguous and it asks which one you meant. It never quietly animates the wrong layer.
Analysis, authoring, preview and export all run in the browser. The exported JSON contains the animation, not your artwork.
Seeded randomness, so a burst you liked is the burst you get again. The AI layer is optional and the tool is complete without it.
Two files, both a few kilobytes, neither containing your SVG.
The validated animation: every step, target, duration, delay, easing and stagger, plus effect parameters, the compiled schedule, and the identity of every generated element with its chain.
The intermediate representation the preview samples: keyframes, bounds, origins and provenance per layer. This is what future Lottie, GIF and video exporters read.
// keme-motion-animation-reward-popup-20260826-135420.json { "format": "keme-motion-animation", "spec": { /* the validated animation */ }, "schedule": { "totalMs": 2570, /* per-beat start times */ }, "effects": [ { "primitive": "burst", "produced": 12, "continued": 0 }, { "primitive": "fly_to", "produced": 0, "continued": 12 } ], "generatedElements": [ /* 12 elements, each with its chain */ ] }