Product docs

How CodeMotion works from snippet to export.

A complete guide to the editor, controls, motion system, export formats, and the decisions that make a code asset readable and publishable.

Open the editor

Workflow

CodeMotion follows a simple production flow: paste a snippet, design the asset, then export for the channel where it will be published.

1. Add your code

Paste a snippet, pick a template, or reopen a saved card from your account.

2. Shape the visual

Choose a preset, tune readability, set the frame, add branding, and decide whether the canvas has a background or transparent export.

3. Export

Download the right format for the job: image, vector, GIF, WebM, or MP4 when supported by the browser.

Editor controls

Every control is organized around a practical publishing decision: readability, composition, brand, motion, and export format.

Content

Paste code, choose the language manually, or use auto-detect to keep syntax highlighting accurate.

Typography

Select the code font, font size, syntax theme, line numbers, highlighted lines, and focus mode.

Background

Use gradients, solid colors, custom CSS backgrounds, or transparent mode when you only want the card.

Card style

Choose glass, browser, terminal, paper, cyber, blueprint, and other frames for different publishing contexts.

Branding

Add a title, watermark, logo, brand color, and consistent visual treatment for repeatable assets.

Layout

Switch canvas sizes for square posts, portrait visuals, landscape exports, and transparent card-only downloads.

Motion

Use build sequence, typewriter, reveal, floating card, and scanlight effects for tutorials and video edits.

Export

Download PNG, JPG, SVG, GIF, WebM, or browser-supported MP4 depending on the destination.

Who it is for

The product is for people who need code to communicate clearly outside an IDE or repository.

Creators

Turn snippets into posts, short-form video inserts, tutorial thumbnails, and launch visuals.

Developers

Share readable code without opening a design tool or cleaning up screenshots manually.

Founders

Make changelogs, product updates, launch posts, and demo visuals look intentional.

Educators

Highlight the exact lines learners should understand and export slides or motion clips.

Teams

Create consistent code visuals for docs, release notes, internal decks, and technical marketing.

Export formats

Choose the format based on where the asset goes: social, docs, slides, video timelines, or scalable web content.

PNG

Best for social posts, documentation images, thumbnails, and fast sharing.

JPG

Useful when file size matters and transparency is not required.

SVG

Best for scalable documentation, slides, and crisp vector output.

GIF

Useful for lightweight loops where broad compatibility matters more than quality.

WebM

Reliable browser-native video export for high-quality motion clips.

MP4

Useful when the browser supports it; WebM remains the safer fallback.

Why it works

A normal screenshot captures code. CodeMotion packages the idea with framing, size, spacing, typography, contrast, brand, and motion.

Readable by default

The code remains the main object. Themes, line numbers, highlights, and focus mode help viewers understand the important part first.

Channel-ready

Different destinations need different framing. A docs image, launch card, reel insert, and slide snippet should not look identical.

Faster than design tools

Technical people can move from snippet to publishable asset without building every composition from scratch.