Show HN: MotionLoom – An open-source video-as-code language for video creation

I am building a motion graphics and VFX language specifically for video creation, image effects, and visual composition. Recently, the generative AI field has really inspired me. Besides diffusion models, one of the projects that influenced me is RemotionJS. My personal view is that 2D can create almost anything, even the perception of 3D, because in the end, we experience everything through a 2D screen.

I believe diffusion models will become better and better, but I also think they may not be fully adjustable pixel by pixel in the foreseeable future. Because of that, I believe 'video as code' is still a separate and important path for the future.

But why create my own domain-specific language (DSL)? When I tried other video-as-code tools, I found that users still need to understand some programming concepts. Not a lot, but still enough to create friction, especially for non-technical users. That made me think about how to make video creation easier for people who are not programmers. Eventually, I decided to experiment with creating a specific language for video creation.

Here are some of my design goals:

1. Make it easier for users to learn, with concepts that feel closer to tools like After Effects.
2. Make it compatible with LLM generation.
3. Make it adjustable: LLMs can handle large changes through natural language, while users can fine-tune smaller details such as x, y, z, timing, and other components.
4. Make it compatible with SVG, since SVG is one of the foundations of motion graphics.
5. Make it usable anywhere: Windows, macOS, Linux, and even any computer or phone with a browser.
6. Use Rust for the DSL/runtime, for memory safety and a lower chance of application crashes.
7. Start with a small target first: focus only on small videos and video creation, rather than trying to support everything.
8. Allow users to copy the code and paste it anywhere. Instant preview helps reduce friction.

Because of these goals, I created MotionLoom. It can run in WASM in the browser, and it is also designed to be usable in native apps and, as a secondary goal, from the terminal.

Here is a simple 'Hello World' example. It creates a 3-second video at 30 FPS, with a black background and the text 'HELLO WORLD' fading in at the center of the screen:

xml
<Graph fps={30} duration="3s" size={[1920,1080]} renderSize={[1920,1080]}>
  <Background color="#000000" />
  <Scene id="hello_world_fadein">
    <Timeline>
      <Track id="main" space="world" z="0">
        <Sequence from="0s" duration="3s" out="hold">
          <Layer>
            <Text
              id="hello_world_text"
              value="HELLO WORLD"
              x="center"
              y="center"
              fontFamily="Arial"
              fontWeight="900"
              fontSize="120"
              color="#ffffff"
              opacity={curve("0:0:linear, 1.2:1:ease_out, 3:1:linear")}
              renderScale="4x"
            />
          </Layer>
        </Sequence>
      </Track>
    </Timeline>
  </Scene>
  <Present from="hello_world_fadein" />
</Graph>

I also made a demo page where you can try different showcases: Demo Page

For now, there are around 100 examples and 40+ showcases. It should work well in Chromium-based browsers on both laptops and phones.

I’d love to hear any ideas or feedback about the project, especially on the DSL design, use cases, and what could be improved.