Animate your code
Write your code as a handful of steps. Each one becomes a slide, and the change between two slides is animated for you: a line rewritten in place, a block that grows, tokens that fade rather than jump.
Slides, not keyframes
Most code animations are made by hand: mark a range, choose an easing, repeat. Here you write the code as it should read at each step and the tool works out the edit between them, so changing your mind about step two costs one edit rather than a re-timing.
The transitions are token-level. A renamed identifier crossfades in place while the rest of the line stays put; an added line pushes the ones below it down as it grows.
The same renderer as the app
The preview is drawn by Skia compiled to WebAssembly, the engine Motionscript uses to export video, running here in the tab. There is no server rendering the frames: the code you type, and any image you pick for a background, never leaves the browser.
What the tool leaves out is everything around one node: the timeline, multiple scenes, audio, and video export. Those are the full editor.
Languages and themes
Fourteen grammars (TypeScript, TSX, JavaScript, JSX, Python, Rust, Go, Java, C++, JSON, HTML, CSS, YAML and Markdown) coloured by one of five themes. The editor on the left and the frame on the right use the same palette and the same parser, so what you type is what you see.
Framing
Landscape, square or portrait, on a wallpaper, a color, a gradient or an image you upload. The window hugs the listing, so the frame is composed around your code rather than around a fixed box.
For how the same node behaves inside the editor, see the Code component.