Convert Figma logo to code with AI

motion-canvas logomotion-canvas

Visualize Your Ideas With Code

16,317
615
16,317
118

Top Related Projects

21,078

🎥 Make videos programmatically with React

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

Create and animate hand-drawn annotations on a web page

15,273

JavaScript library to make drawing animation on SVG

103,278

JavaScript 3D Library.

Quick Overview

Motion Canvas is an open-source TypeScript library and visual editor for creating programmatic animations. It allows developers to create complex, interactive animations using code, providing a powerful alternative to traditional video editing software for creating explanatory videos, presentations, and visual content.

Pros

  • Offers precise control over animations through code
  • Integrates well with existing web development workflows
  • Provides a visual editor for easier animation creation and preview
  • Supports creating reusable components and animations

Cons

  • Steeper learning curve compared to traditional video editing software
  • Limited built-in shape and effect options compared to specialized animation tools
  • Requires JavaScript/TypeScript knowledge for advanced usage
  • Still in active development, so some features may be unstable or change frequently

Code Examples

Creating a simple scene with a circle:

import {makeScene2D, Circle} from '@motion-canvas/2d';
import {createRef} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const circle = createRef<Circle>();

  view.add(
    <Circle
      ref={circle}
      width={200}
      height={200}
      fill="#3498db"
    />
  );

  yield* circle().scale(2, 1);
});

Animating text:

import {makeScene2D, Text} from '@motion-canvas/2d';
import {createRef, all} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const text = createRef<Text>();

  view.add(
    <Text
      ref={text}
      text="Hello, Motion Canvas!"
      fontSize={60}
    />
  );

  yield* all(
    text().scale(1.5, 1),
    text().fill('#e74c3c', 1)
  );
});

Creating a custom shape:

import {makeScene2D, Circle, Rect} from '@motion-canvas/2d';
import {createRef, all} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const group = createRef<Rect>();

  view.add(
    <Rect ref={group} width={300} height={300}>
      <Circle width={100} height={100} fill="#3498db" x={-75} y={-75} />
      <Circle width={100} height={100} fill="#e74c3c" x={75} y={75} />
    </Rect>
  );

  yield* all(
    group().rotation(360, 2),
    group().scale(1.5, 2)
  );
});

Getting Started

  1. Install Motion Canvas:

    npm install @motion-canvas/core @motion-canvas/2d
    
  2. Create a new project:

    npx @motion-canvas/create my-animation
    cd my-animation
    
  3. Start the development server:

    npm run dev
    
  4. Edit the src/scenes/example.tsx file to create your animation.

  5. Build the final video:

    npm run build
    

Competitor Comparisons

21,078

🎥 Make videos programmatically with React

Pros of Remotion

  • More mature and established project with a larger community
  • Supports a wider range of output formats, including MP4 and GIF
  • Better documentation and more comprehensive examples

Cons of Remotion

  • Steeper learning curve, especially for developers new to React
  • Requires more setup and configuration compared to Motion Canvas
  • Limited built-in animation primitives, often requiring custom implementations

Code Comparison

Motion Canvas:

import {makeScene2D, Rect} from '@motion-canvas/2d';

export default makeScene2D(function* (view) {
  const rect = new Rect({width: 100, height: 100, fill: 'red'});
  view.add(rect);
  yield* rect.scale(2, 1);
});

Remotion:

import {useCurrentFrame, interpolate} from 'remotion';

export const MyAnimation = () => {
  const frame = useCurrentFrame();
  const scale = interpolate(frame, [0, 60], [1, 2]);
  return <div style={{transform: `scale(${scale})`}}>Hello</div>;
};

Both Motion Canvas and Remotion offer powerful tools for creating animations programmatically. Motion Canvas provides a more intuitive API for simple animations, while Remotion leverages React's component-based architecture for complex compositions. The choice between them depends on the project requirements and the developer's familiarity with React.

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

Pros of Lottie-web

  • Widely adopted and supported across multiple platforms
  • Extensive documentation and community resources
  • Seamless integration with design tools like Adobe After Effects

Cons of Lottie-web

  • Limited to vector animations, lacking support for complex effects
  • Performance can be an issue with large or complex animations
  • Requires exporting animations from design tools, limiting real-time editing

Code Comparison

Lottie-web:

lottie.loadAnimation({
  container: document.getElementById('lottie-container'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'animation.json'
});

Motion Canvas:

import {makeScene2D, Rect} from '@motion-canvas/2d';

export default makeScene2D(function* (view) {
  const rect = new Rect({width: 100, height: 100, fill: 'red'});
  view.add(rect);
  yield* rect.scale(2, 1);
});

Motion Canvas offers a more programmatic approach to creating animations, allowing for greater flexibility and real-time adjustments. Lottie-web, on the other hand, focuses on rendering pre-designed animations, making it easier to implement existing designs but less adaptable for dynamic content.

Create and animate hand-drawn annotations on a web page

Pros of Rough Notation

  • Lightweight and focused on simple annotations
  • Easy to integrate into existing web projects
  • Supports multiple annotation styles (underline, box, circle, etc.)

Cons of Rough Notation

  • Limited to static annotations on web pages
  • Lacks advanced animation capabilities
  • Not suitable for creating complex motion graphics

Code Comparison

Rough Notation:

import { annotate } from 'rough-notation';

const element = document.querySelector('#myElement');
const annotation = annotate(element, { type: 'underline' });
annotation.show();

Motion Canvas:

import { makeScene2D, Rect } from '@motion-canvas/2d';

export default makeScene2D(function* (view) {
  const rect = new Rect({ width: 100, height: 100 });
  view.add(rect);
  yield* rect.scale(2, 1);
});

Rough Notation is ideal for quick, hand-drawn style annotations on web pages, while Motion Canvas is better suited for creating complex, programmatic animations and motion graphics. Rough Notation has a simpler API and is easier to integrate into existing projects, but Motion Canvas offers more powerful animation capabilities and a wider range of visual elements.

15,273

JavaScript library to make drawing animation on SVG

Pros of Vivus

  • Lightweight and focused on SVG animation
  • Simple API for quick implementation
  • No dependencies, making it easy to integrate

Cons of Vivus

  • Limited to SVG line drawing animations
  • Less flexibility for complex animations
  • Fewer features compared to Motion Canvas

Code Comparison

Vivus:

new Vivus('my-svg', {duration: 200, type: 'delayed', start: 'autostart'});

Motion Canvas:

import {makeScene2D, Circle} from '@motion-canvas/2d';

export default makeScene2D(function* (view) {
  const circle = new Circle().addTo(view);
  yield* circle.scale(2, 1);
});

Motion Canvas offers a more comprehensive animation framework with a scene-based approach, while Vivus focuses specifically on SVG line drawing animations. Motion Canvas provides greater flexibility and control over various animation types, making it suitable for more complex projects. Vivus, on the other hand, excels in simplicity and ease of use for quick SVG animations.

103,278

JavaScript 3D Library.

Pros of Three.js

  • More mature and widely adopted, with a larger community and ecosystem
  • Offers a comprehensive set of 3D rendering features and capabilities
  • Supports a wide range of 3D file formats and has extensive documentation

Cons of Three.js

  • Steeper learning curve for beginners due to its extensive API
  • Requires more setup and boilerplate code for basic scenes
  • May be overkill for simple 2D animations or motion graphics

Code Comparison

Three.js (basic scene setup):

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Motion Canvas (basic scene setup):

import {makeScene2D} from '@motion-canvas/2d';

export default makeScene2D(function* (view) {
  // Scene content goes here
});

Motion Canvas is focused on creating 2D animations and motion graphics with a more streamlined API, while Three.js is a powerful 3D graphics library with a broader scope. Motion Canvas offers a simpler entry point for creating animations, especially for those familiar with web technologies, whereas Three.js provides more advanced 3D rendering capabilities but requires more setup and knowledge of 3D graphics concepts.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README


Motion Canvas logo

published with lerna powered by vite npm package version discord


Motion Canvas

Motion Canvas is two things:

  • A TypeScript library that uses generators to program animations.
  • An editor providing a real-time preview of said animations.

It's a specialized tool designed to create informative vector animations and synchronize them with voice-overs.

Aside from providing the preview, the editor allows you to edit certain aspects of the animation which could otherwise be tedious.

Using Motion Canvas

Check out our getting started guide to learn how to use Motion Canvas.

Developing Motion Canvas locally

The project is maintained as one monorepo containing the following packages:

NameDescription
2dThe default renderer for 2D motion graphics
coreAll logic related to running and rendering animations.
createA package for bootstrapping new projects.
docsOur documentation website.
e2eEnd-to-end tests.
examplesAnimation examples used in documentation.
internalInternal helpers used for building the packages.
playerA custom element for displaying animations in a browser.
templateA template project included for developer's convenience.
uiThe user interface used for editing.
vite-pluginA plugin for Vite used for developing and bundling animations.

After cloning the repo, run npm install in the root of the project to install all necessary dependencies. Then run npx lerna run build to build all the packages.

Developing Editor

When developing the editor, run the following command:

npm run template:dev

It will start a vite server that watches the core, 2d, ui, and vite-plugin packages. The template package itself contains a simple Motion Canvas project that can be used during development.

Developing Player

To develop the player, first build the template: npm run template:build. Then, start npm run player:dev.

Installing a local version of Motion Canvas in a project

It can be useful to install a local version of Motion Canvas in a standalone project. For example, when you want to use your own fork with some custom-made features to create your animations.

Let's assume the following project structure:

projects/
├── motion-canvas/ <- your local monorepo
└── my-project/ <- a bootstrapped project
    └── package.json

You can link the local packages from the monorepo by updating the package.json of your project. Simply replace the version with a file: followed by a relative path to the package you want to link:

  "dependencies": {
-   "@motion-canvas/core": "^3.11.0",
+   "@motion-canvas/core": "file:../motion-canvas/packages/core",
    // ...
  },

If you're linking the ui package, you'll also need to modify vite.config.ts to allow vite to load external files:

import {defineConfig} from 'vite';
import motionCanvas from '@motion-canvas/vite-plugin';

export default defineConfig({
  server: {
    fs: {
      // let it load external files
      strict: false,
    },
  },
  plugins: [motionCanvas()],
});

This is necessary because the editor styles are loaded using the /@fs/ prefix and since the linked ui package is outside the project, vite needs permission to access it.

Then run npm install in to apply the changes and that's it.

You can use the same technique to test out any custom package you're working on.

Contributing

Read through our Contribution Guide to learn how you can help make Motion Canvas better.

NPM DownloadsLast 30 Days