Technical · 6 min read

The .c2m Format: Under the Hood

The .c2m format is the technical spine of the Code2Motion ecosystem: the package that lets ToyMaker outputs ship cleanly into the PlayRoom as real, portable c2merses.

✦ Published May 2026

Every c2merse in the PlayRoom is delivered through a .c2m file. In product terms, this is Code2Motion's native experience package: the format that lets creative work move from ToyMaker into a branded, playable runtime.

If you're a developer, the interesting part is that .c2m is not a mystery wrapper. It is a structured, portable web package designed around publishing, previewing, provenance, and predictable playback across the Code2Motion ecosystem.

01 File structure

Structure of a .c2m file
📦 my-nebula.c2m/

02 The manifest.json

The manifest is the identity card for a c2merse. Here's what one looks like:

{
  "c2m_version": "1.0",
  "title": "Nebula Drift",
  "comoder": "@nikhil",
  "version": "0.4.2",

  "interact_styles": [
    "mobile-first",
    "audio-reactive"
  ],

  "runtimes": [
    { "lib": "p5.js", "version": "1.9.0" },
    { "lib": "tone.js", "version": "14.7.77" }
  ],

  "permissions": ["microphone"],

  "preview": {
    "webm": "preview.webm",
    "gif": "preview.gif",
    "hook_duration_ms": 1800
  },

  "sidecar": "sidecar.json"
}

03 Approved runtimes (v1)

To ensure security and performance, c2merses may only use runtimes from the approved list. Each runtime is loaded in isolation — no global namespace pollution between experiences.

p5.js
2D canvas, particle systems, generative sketches
Three.js
3D WebGL scenes, geometries, lights, materials
Tone.js
Audio synthesis and analysis, Web Audio API
Matter.js
2D rigid body physics simulation
GSAP
High-performance animation and tweening
D3.js
Data-driven visualisation and SVG manipulation

04 Security and sandboxing

Every c2merse runs inside a sandboxed iframe with a strict Content Security Policy. It cannot access cookies, localStorage from other origins, or the parent DOM. Sensor permissions (microphone, camera, gyroscope, geolocation) are declared in the manifest and prompted to the user explicitly before the c2merse runs.

🛡️ Runtime isolation: Each runtime is loaded as a module-scoped import inside the c2merse iframe. Even if two c2merses use p5.js, they never share a runtime instance. No cross-contamination between experiences.

05 The preview spec

The looping preview that appears in the PlayRoom swipe feed must be:

Format: WebM (preferred) + GIF fallback. Duration: 2–5 seconds, looping seamlessly. Audio: Silent (autoplay policies require muted). Resolution: 9:16 portrait at 640×1136 minimum. Hook: The most compelling visual moment should occur within the first 2 seconds.

06 Manual submission

You don't need ToyMaker to create a .c2m file. If you have existing code — a p5.js sketch, a Three.js scene, a GSAP animation — you can package it manually by following the file structure spec and filling in a valid manifest.json.

The c2m schema is published as a JSON Schema at /schemas/c2m-manifest.schema.json in the Code2Motion repository. Validate your manifest against it before submitting.

Ready to submit your first c2merse?

Build in ToyMaker or package manually — the PlayRoom is open to both.

Open ToyMaker →