Keyframe animation
MotionFrame is a keyframe animation editor at heart. Every layer exposes the same animatable properties — position (2D and 3D), scale, rotation, opacity and anchor — and you decide what changes and when by placing keyframes on the timeline.
Set a value, move the playhead, set another, and the editor interpolates smoothly between them. Each keyframe carries its own easing curve, from linear and ease-in/out to spring-like back and smooth curves, so slow reveals and snappy transitions are a couple of clicks apart.
Multi-layer video editing
Import clips, images or audio and each becomes an independent layer with its own start and end time, so you can sequence, overlap and trim them on one timeline. Layers can be reordered, hidden, locked, renamed, duplicated and split at the playhead.
Splitting is non-destructive: both halves keep their source media and keyframes, so adjusting the timing later never means re-importing or losing work. Two layers can even share one source file without interfering with each other.
Number Scroll
Number Scroll animates the numeric part of a text layer while leaving the surrounding words untouched — so 1,000, $4,250 or 98% rolls smoothly between values with the prefix, suffix, decimals and thousands separators you choose.
Each transition is a start/end pair with its own easing and four independent colours for the number and the text, and it holds the exact end value once it arrives. It is a purpose-built number counter animation rather than a hand-cut sequence of frames.
Text animation
Text layers cover titles, captions, lower-thirds and callouts with system fonts, colour, size, weight and alignment. Because text is just another layer, it animates with the same keyframes as everything else — slide it, scale it, fade it, or pair it with a Number Scroll on the same layer.
Shapes and lines
Add rectangles, rounded rectangles, ellipses and circles, triangles, polygons and stars, then adjust fill, stroke, opacity, corner radius, point count and proportions with live feedback.
Lines are first-class layers too: drag their endpoints directly on the canvas, set stroke width, caps and arrowheads, and keyframe them like everything else. Both are rendered as real vector geometry rather than baked bitmaps, so they stay crisp and export cleanly.
3D and camera tools
Switch any layer to 3D and move it on the Z axis, then use a Blender-style axis gizmo to move, rotate or scale it in space. A dedicated, fully keyframable camera adds real depth with perspective and orbit moves.
The gizmo is drawn in the same viewport as your work, with colour-coded axes and on-canvas handles, so 3D placement stays direct and predictable. Dedicated shortcuts (W/E/R) switch between move, rotate and scale.
Timeline
The timeline is the temporal truth: a layer contributes to a frame only during its own time span, and the playhead is derived from the playback clock rather than tracked separately — so zooming, scrolling, splitting and scrubbing can never desync it.
You get keyframe tracks, clip dragging and trimming, a split tool, right-click context menus for every item type, and optional snapping to the canvas centre, edges and other layers.
Preview and export
Preview, playback and export share one rendering pipeline, so the frame you see is the frame you get. Export to MP4 (H.264/AAC) or WebM (VP9/VP8/Opus) with the browser's own hardware-accelerated encoding.
MotionFrame probes your browser's capabilities at runtime and only offers the formats and codecs it can actually produce; where the modern encoders aren't available it falls back to a real-time recorder so you still get a file.
Browser-based workflow
MotionFrame is a browser video editor, not a desktop application wrapped in a browser window. It runs fully client-side: there is no upload step, no backend and no account, and its dependencies are bundled so the editor makes no network requests.
Projects autosave in your browser as you work, and you can also save and reopen a project file to move between machines. Once the page has loaded, nothing about the interface depends on a network connection.