Skip to content
MotioCode

Scene 01 · handler.ts walkthrough

Bring Your Code and Ideas to Life.

MotioCode is a motion-design studio for engineers. Build an explanation on a scene timeline, watch it play in the browser, and export it in the shape each platform wants — without opening After Effects.

Start a projectSign in

Free while MotioCode is in development. No card, no trial timer.

auth/handler.ts
1export async function handler(req: Request) {
2const token = req.headers.get("authorization") 
3const session = await verify(token)
4
5if (!session) {
6return unauthorized(401)
7}
8
9return render(session.projectId)
10}

Callout

Every request that fails verification stops here.

00:00:00/ 00:06:19
frame 000 · 30fps
Panel
Code reveal
Highlight
Callout
A code panel revealing line by line, with a highlighted line and an explanatory callout, scrubbed by a timeline playhead.

Three studios, one timeline.

Code, diagrams and infographics share the same scenes, the same animation model and the same export. Mix them in a single project.

  • Code

    Reveal a snippet line by line, hold on the line that matters, and caption it in place.

    TypeScript, JavaScript, Python, C#, Java and SQL.

  • Diagrams

    Lay out services and connections on a canvas, or write the definition as text and let MotioCode draw it.

    Architecture, infrastructure, flowcharts and request paths.

  • Infographics

    Counters, bars, comparisons and step sequences that stay faithful to the numbers you typed.

    Built for technical explanations, not marketing decks.

Built like a renderer, not a slideshow.

Everything is a frame number
Animations are declared against the timeline, not tied to browser state. Frame 84 looks the same today, tomorrow, and on a render server.
The preview is the composition
What plays in the editor is the same model the exporter reads. There is no second implementation to drift out of sync.
Your projects stay yours
Every project, asset and render is scoped to your account at the database level. Nothing is public unless you publish it.

One project, every aspect ratio.

Pick the canvas when you start, change it whenever. Scenes reflow; timing does not move.

  • 16:9

    YouTube, docs, slides

  • 1:1

    LinkedIn, X

  • 9:16

    Shorts, Reels, TikTok

  • 4:5

    LinkedIn, Instagram feed

Explain the thing you keep redrawing on a whiteboard.

Start from a blank canvas or a starter template, and keep the project editable forever.

Start a project