How rickysetiawan99/remotion-studio works
MotionCraft Studio is a browser-based video authoring and rendering app. A creator generates a scene composition from a topic or edits/imports JSON in the studio, previews it on the canvas, and submits it for MP4 rendering; assets can also be uploaded. The server coordinates AI generation, rendering, and procedural audio, while the Remotion composition turns scenes into animated video. Vibe presets and music/SFX synthesis are meaningful supporting capabilities. The README is empty, and sampled excerpts are partial, so uncertain wiring is omitted.
Main entry points: server.js HTTP API · studio.js Studio UI · music.mjs Music synthesis · sfx.mjs SFX synthesis
Components 16
Authoring and preview
- Studio UI
public/js/studio.js - Canvas preview
public/js/canvas-renderer.js - Studio interface
public/index.html
Studio server
- HTTP API
server.js - Uploaded and rendered files
server.js
Video rendering
- Remotion entry
src/index.ts - Composition registration
src/Root.tsx - Scene renderer
src/Composition.tsx - Rendered MP4
server.js
Procedural audio
- Vibe presets
lib/vibe-tokens.mjs - Music synthesis
lib/music.mjs - SFX synthesis
lib/sfx.mjs - Synth voices
lib/voices.mjs - Audio DSP
lib/dsp.mjs
Other components
- Creator
- LLM endpoint
Connections 23
- Creator → Studio interface: uses
- Studio interface → Studio UI: loads
- Studio UI → HTTP API: requests generation
- HTTP API → LLM endpoint: requests script
- Studio UI → Canvas preview: previews composition
- Canvas preview → HTTP API: requests audio preview
- Studio UI → HTTP API: uploads assets
- HTTP API → Uploaded and rendered files: writes assets
- HTTP API → Uploaded and rendered files: reads and deletes renders
- Studio UI → HTTP API: requests render
- HTTP API → Vibe presets: resolves preset
- HTTP API → Music synthesis: generates soundtrack
- HTTP API → SFX synthesis: generates cues
- Music synthesis → Synth voices: synthesizes instruments
- SFX synthesis → Synth voices: synthesizes effects
- Music synthesis → Audio DSP: processes audio
- SFX synthesis → Audio DSP: processes audio
- HTTP API → Remotion entry: bundles composition
- Remotion entry → Composition registration: registers root
- Composition registration → Scene renderer: registers video
- HTTP API → Scene renderer: renders scenes
- HTTP API → Rendered MP4: writes render
- Studio UI → Uploaded and rendered files: opens render