ToyMaker is Code2Motion's creation studio, built for Comoders who want to turn an idea into a living experience. It combines prompt-first ideation, canvas-level control, live preview, and Sidecar collaboration in one product flow.
In brand terms, ToyMaker is where the Code2Motion universe gets authored. It is the place where visual direction, interaction design, runtime choices, and publishing all come together before a c2merse lands in the PlayRoom.
01 Choose your mode
ToyMaker gives you two entry points into creation:
๐ฌ
Prompt-First
Describe your vision in natural language. Sidecar builds a working c2merse from your words. Iterate by conversation.
Best for: new ideas, quick experiments, non-coders
๐ง
Canvas Mode
Visual node editor. Drag, connect, and configure components. More control, more precision.
Best for: precise tweaks, technical Comoders, complex c2merses
You can switch between modes at any time โ no data is lost. Start with a prompt, then fine-tune in Canvas. Or sketch a structure in Canvas, then ask Sidecar to fill it in.
02 The creation workflow
1
Write your first prompt
Describe the experience you want โ the feeling, the visuals, the interaction. The more specific you are about the emotion, the better Sidecar's output.
"A galaxy of blue particles that slowly orbits a dark centre, expanding when the music gets louder"
2
Declare your InteractStyle
Tell Sidecar (or set it in the manifest panel) what InteractStyle this c2merse is for. This shapes every technical decision Sidecar makes โ from input handling to performance targets.
You can have multiple InteractStyles: "Mobile-First, Audio-Reactive"
3
Watch Sidecar build it
Sidecar selects the right runtime (p5.js, Three.js, Tone.js, etc.), writes the code, and renders it into the live preview on the right side of the screen. You see it take shape in real time.
4
Interact in the live preview
The preview is always live. Tap it, make noise, tilt your device. Test the interactions immediately โ no build step, no deploy. If something's off, describe it to Sidecar.
"The rotation feels too fast โ slow it down by about 40%"
5
Iterate until it feels right
Keep the conversation going. Add interactions, change colours, introduce new elements. Sidecar remembers the full context of what's been built.
6
Generate (publish)
When you're happy, hit Generate. ToyMaker packages everything into a .c2m file โ code, manifest, preview video, Sidecar provenance โ and submits it to the PlayRoom curation queue.
7
Your c2merse goes live
After editorial review, your c2merse appears in the PlayRoom feed. Explonauts can discover, save, and c2merse in it from anywhere in the world.
๐ฏ The 2-second hook rule: The looping preview that appears in the swipe feed must hook someone within 2 seconds. When you're generating, think about what the first frame of the preview looks like โ that's your first impression.
03 What gets packaged in your .c2m
When you Generate, ToyMaker automatically creates:
The manifest.json with your title, InteractStyles, Sidecar attribution, and version. The looping preview video captured from your live preview session. The source code, cleaned and optimised for production. And the sidecar.json โ a provenance file that records which Sidecar agent built it and which prompts were used.
Start building your first c2merse
ToyMaker is free to try. Your first Sidecar session is on us.
Open ToyMaker โ