launch.ts
1const card = createCard()2card.scene('launch')3card.brand('CodeMotion')4card.size('square')5card.export('PNG')
launch
motion.ts
1const clip = createClip()2clip.add(card)3clip.reveal('line')4clip.duration('6s')5clip.export('WebM')
motion
docs.ts
const docs = newPage()1docs.addSnippet(code)2docs.setTheme('calm')3docs.fit('wide')4docs.export('SVG')5
docs

Turn code intobeautiful visuals.

Fully customizable. Paste a snippet, choose a scene, apply your brand, and export polished images.

Create your first assetView examples

Developers

Share clean snippets without design work.

Founders

Turn product updates into launch visuals.

Educators

Explain code with readable motion.

Product teams

Make changelogs and docs look polished.

Final outputs

Real code cards, ready to ship.

CodeMotion is built around the final asset: readable code, a clear frame, channel-ready formats, and motion that still keeps the snippet understandable.

launch-card.ts
1const feature = ship()2audience('builders')3announce('public_beta')4setScene('launch')5applyBrand('CodeMotion')6exportAsset('social')7track('ready')

Launch post

A finished code asset with readable framing, subtle depth, and export-ready composition.

Square · PNG

api-docs.ts
1export async function api()2const request = parse()3validate(request)4const data = fetchData()5cache.set(key, data)6return json(data)7log.success()

Docs hero

A finished code asset with readable framing, subtle depth, and export-ready composition.

Square · PNG

reveal.ts
1timeline.background()2scene.grow()3card.appear()4code.typeByLine()5focus.camera()6record.webm()7export.motion()

Motion reveal

A finished code asset with readable framing, subtle depth, and export-ready composition.

Square · WebM

Workflow

Paste, design, export.

CodeMotion is built around the moments where code has to explain something: a new feature, a framework update, a lesson, a bug fix, a launch.

01

Paste code

Drop in the snippet you want people to understand. CodeMotion keeps syntax readable from the first frame.

02

Choose a scene

Start from a launch post, docs image, course slide, social card, or vertical reveal.

03

Apply brand controls

Tune theme, type, background, radius, watermark, logo, language, and motion style.

04

Export everywhere

Create PNG, SVG, GIF, WebM, browser-supported MP4, slide visuals, docs assets, and social posts.

Customization

Design once. Reuse everywhere.

Build a reusable visual language for code: brand presets, readable themes, export sizes, and motion settings that travel across every asset.

Brand controls
Theme
Font
Background
Radius
Language
Export size
Motion style
Brand preset

brand-preset/codemotion

theme: dark studio

font: JetBrains Mono

motion: build sequence

export: social + docs + slides

Export formats

Ship the same code asset across every channel.

CodeMotion keeps the workflow in one editor while the outputs change for the channel: stills, vectors, motion clips, docs, slides, and launch surfaces.

PNG

JPG

SVG

WebM

MP4

Your next launch asset should not start in a design file.

Paste code into CodeMotion and export polished visuals in minutes.

Create your first asset