New features 🎉​

• 

  The

  Latex

  node now supports tweening:

  #800
  Press play to preview the animation

  import ...
  
  export default makeScene2D(function* (view) {
    const tex = createRef<Latex>();
    view.add(<Latex ref={tex} tex="{{y=}}{{a}}{{x^2}}" fill="white" />);
  
    yield* waitFor(0.2);
    yield* tex().tex('{{y=}}{{a}}{{x^2}} + {{bx}}', 1);
    yield* waitFor(0.2);
    yield* tex().tex(
      '{{y=}}{{\\left(}}{{a}}{{x^2}} + {{bx}}{{\\over 1}}{{\\right)}}',
      1,
    );
    yield* waitFor(0.2);
    yield* tex().tex('{{y=}}{{a}}{{x^2}}', 1);
  });
  
  

• 

  ?render and ?present url parameters can be used to immediately start rendering or presenting when opening the editor.

  #631

Fixed bugs 🐛​

• Txt

  nodes properly support tweening emojis.

  #1085
• 

  Fix stack overflow caused by restoring a

  Code

  node

  #1084
• 

  Prevent invalid cache sizes.

  #1083
• 

  Fix line tweening.

  #1075
• 

  Fix text alignment.

  #1061

New features 🎉​

• 

  A brand-new

  Camera

  node with helper methods for zooming and focusing on elements:

  #1019
  Press play to preview the animation

  import ...
  
  export default makeScene2D(function* (view) {
    const camera = createRef<Camera>();
    const rect = createRef<Rect>();
    const circle = createRef<Circle>();
  
    const scene = (
      <Node>
        <Grid stroke={'#fff1'} lineWidth={1} size="100%" spacing={25}>
          <Rect ref={rect} fill={'#e6a700'} size={50} position={[50, -25]} />
          <Circle ref={circle} fill={'#e13238'} size={50} position={[-50, 25]} />
        </Grid>
      </Node>
    );
  
    view.add(
      <>
        <Camera.Stage
          scene={scene}
          x={-200}
          width={300}
          height={200}
          stroke={'#242424'}
          lineWidth={4}
        />
        <Camera.Stage
          cameraRef={camera}
          scene={scene}
          x={200}
          width={300}
          height={200}
          stroke={'#242424'}
          lineWidth={4}
        />
      </>,
    );
  
    yield* all(
      camera().centerOn(rect(), 3),
      camera().rotation(180, 3),
      camera().zoom(1.8, 3),
    );
    yield* camera().centerOn(circle(), 2);
    yield* camera().reset(1);
  });
  
  

• 

  New effects can be used to react to changes in signals:

  #1043

  import {makeScene2D} from '@wangyaoshen/locus-2d';
  import {createEffect, createSignal} from '@wangyaoshen/locus-core';
  
  export default makeScene2D(function* () {
    const signal = createSignal(0);
  
    createEffect(() => {
      console.log('Signal changed: ', signal());
    });
  
    yield* signal(1, 2);
  });
  

• 

  All vector operations can now be used with vector signals for a more concise code:

  #1030

  // Before
  yield* node().position(node().position().add([200, 100]), 2);
  
  // Now
  yield* node().position.add([200, 100], 2);
  

• Polygon.vertex()

  and

  Polygon.vertexCompletion()

  can be used to retrieve information about the vertices of a polygon.

  #1045
• 

  New example for the Code node.

  #1023

Fixed bugs 🐛​

• 

  Handle invalid values for time events.

  #1044
• 

  Fix the destination uv in shaders.

  #1026
• 

  Fix the type of the layout gap property.

  #1039
• 

  Fix Code size calculation.

  #1025

New features 🎉​

• 

  A brand-new

  Code

  node with dedicated code signals, customizable syntax highlighting, and more expressive animation system (Including automatic diff-based transitions).

  #946
  Press play to preview the animation

  import ...
  
  export default makeScene2D(function* (view) {
    const code = createRef<Code>();
  
    view.add(
      <Code
        ref={code}
        fontSize={28}
        fontFamily={'JetBrains Mono, monospace'}
        offsetX={-1}
        x={-400}
        code={'const number = 7;'}
      />,
    );
  
    yield* waitFor(0.6);
    yield* all(
      code().code.replace(code().findFirstRange('number'), 'variable', 0.6),
      code().code.prepend(0.6)`function example() {\n  `,
      code().code.append(0.6)`\n}`,
    );
  
    yield* waitFor(0.6);
    yield* code().selection(code().findFirstRange('variable'), 0.6);
  
    yield* waitFor(0.6);
    yield* all(
      code().code('const number = 7;', 0.6),
      code().selection(DEFAULT, 0.6),
    );
  });
  
  

• 

  New

  withDefaults

  helper function lets you quickly extend nodes with your own defaults.

  #982

  import {Txt, withDefaults} from '@wangyaoshen/locus-2d';
  
  export const MyTxt = withDefaults(Txt, {
    fill: 'rgba(255, 255, 255, 0.6)',
    fontFamily: 'JetBrains Mono',
    fontSize: 28,
  });
  

• 

  When using

  loop

  , the iteration count can be omitted to create an infinite loop:

  #952

  // These two are equivalent:
  yield* loop(() => { /* animation */ });
  yield* loop(Infinity, () => { /* animation */ });
  

• 

  New

  spawn

  function lets you run animations in the background, from any place, without needing to yield them.

  #951
• Polygon

  now extends

  Curve

  giving it access to all curve-related properties like

  startArrow

  and

  radius

  .

  #961
• 

  Color fields in the editor now come with a visual color picker.

  #962
• 

  New

  Vector2

  methods: #985

  • rounded
  • ceiled
  • map
  • toArray
• 

  New

  cardinalPoint

  method lets you map

  Origin

  s and

  Direction

  s to their corresponding cardinal points of the node.

  #988
• 

  New

  waitTransition

  lets you animate transitions using nodes.

  #983
• 

  When passed to OpenGL,

  Matrix2D

  is now converted to a 3x3 square matrix (as opposed to a 3x2 matrix)

  #984
• 

  The view's

  cachePadding

  is now respected when calculating the cache size of individual nodes.

  #986
• 

  Presentation Mode now supports PowerPoint shortcuts (Page Up, Page Down, etc.)

  #993
• 

  Parts of the motion-canvas-player shadow root are now exposed using part and can be customized with CSS.

  #956
• 

  Fiddles on this website now play automatically when scrolled into view.

  #1001

Fixed bugs 🐛​

• 

  Account for italic fonts in cache.

  #968
• 

  Fix typo in the Quickstart Guide.

  #974
• 

  Properly handle offset when retrieving the absolute position of a node.

  #987
• 

  Fix the spline warning for reactive points.

  #981

New features 🎉​

• 

  Shaders let you create custom visual effects using WebGL.

  #929#920
  Press play to preview the animation

  import ...
  
  // Original shader created by ufffd
  // https://www.shadertoy.com/view/lcfXD8
  const Shader = `\
  #version 300 es
  precision highp float;
  
  in vec2 screenUV;
  out vec4 outColor;
  
  uniform float time;
  uniform vec2 resolution;
  
  #define g(p) dot(sin(p),cos(p.zxy)) //
  
  float m(vec3 p){
    return (1.0 + 0.2 * sin(p.y * 6e2))
      * g(0.8 * g(8.0 * p) + 10.0 * p)
      * (1.0 + sin(time + length(p.xy) / 0.1))
      + 0.3 * sin(time * 0.15 + p.z * 5.0 + p.y)
      * (2.0 + g((sin(time * 0.2 + p.z * 3.0) * 350.0 + 250.0) * p));
  }
  
  void main() {
    vec3 r = normalize(vec3((screenUV - 0.5) * resolution, resolution.y));
    vec3 p;
    vec3 f;
    float e = 50.0;
    float d;
    float i;
  
    for (p.z = time / 4.0; i++ < 90.0 && e > 0.05; e = m(p += r * d)) {
      d += 0.02 * e;
    }
  
    f.x = 0.06 + 0.06 * sin(p.z);
    outColor = vec4(2.0 * m(p) - m(p - f) - m(p - f.yxy))
      * smoothstep(0.75, 1.05, 1.0 / d);
  }
  `;
  
  export default makeScene2D(function* (view) {
    view.add(<Rect shaders={Shader} size={view.size} />);
  
    yield* waitFor(10);
  });
  
  

• 

  The node inspector can be toggled on and off.

  #921
• 

  Number inputs can be edited by dragging left and right.

  #917

New features 🎉​

• 

  A new scene graph tab lets you peek into the contents of the scene.

  #909#914
• 

  Holding Shift + Ctrl lets you drag over the timeline to select the range. B and N can be used to snap the beginning and end of the range to the playhead.

  #907
• 

  Editor plugins can now register custom inspectors that display information on the right side of the editor.

  #913

Fixed bugs 🐛​

• 

  The mouse is tracked correctly when dragging time events.

  #912

New features 🎉​

• 

  The points of a

  Line

  can now be tweened.

  #853
  Press play to preview the animation

  import ...
  
  export default makeScene2D(function* (view) {
    const line = createRef<Line>();
    view.add(
      <Line
        ref={line}
        points={[
          [-150, 70],
          [150, 70],
          [0, -70],
        ]}
        stroke={'lightseagreen'}
        lineWidth={8}
        radius={20}
        closed
      />,
    );
  
    yield* line()
      .points(
        [
          [-150, 0],
          [0, 100],
          [150, 0],
          [150, -70],
          [-150, -70],
        ],
        2,
      )
      .back(2);
  });
  
  

• Txt

  nodes can now be nested inside each other.

  #861
  Press play to preview the animation

  import {Txt, makeScene2D} from '@wangyaoshen/locus-2d';
  
  export default makeScene2D(function* (view) {
    view.fill('#141414');
    view.add(
      <Txt fill={'white'} fontSize={32} width={720} textWrap>
        Whereas recognition of the inherent dignity and of the{' '}
        <Txt.i>equal</Txt.i> and inalienable rights of all members of
        the human family is the foundation of <Txt.b>freedom</Txt.b>,
        justice and <Txt fill="#25C281">peace</Txt> in the world.
      </Txt>,
    );
  });
  

• 

  New querying helpers let you find nodes in the scene.

  #852
• 

  Transitions can now control which scene

  is drawn on top

  .

  #832
• 

  A new

  Video.playbackRate

  property lets you control the speed of a video.

  #831
• 

  This version introduces the concept of experimental features. Marked with

  , these features are meant mostly for testing and gathering feedback. Find out more about them in this dedicated section.

  #876
• 

  New Editor Plugins allow you to extend the editor's interface. With them, you can define custom tabs in the sidebar and draw overlays on top of the animation preview or the presenter.

  #884
• 

  The timeline can now be scrubbed by holding down LMB and dragging left or right.

  #862
  

  For complex animation, dragging to the left may lag a bit since the entire generator must be re-run each time.

• 

  Hovering over the audio icon now reveals a volume slider that lets you adjust the volume.

  #872
• 

  The ArrowUp and ArrowDown keys allow you to control the volume.

  #856
• 

  The animation range is no longer editable by default. Just like with the audio track, hold SHIFT before dragging to edit it.

  #862
• 

  When looping is disabled, the editor will seek back to the start of the animation and stop there instead of pausing at the end.

  #823
• Vector2

  now includes static properties representing each type of origin.

  #855
• applyState

  can now be used to tween to the new state and not just immediately apply it.

  #859
• 

  The spawner has been deprecated in favor of the children property.

  #858

  view.add(
    // before
    <Node spawner={() => range(count()).map(() => <Node />)} />,
  );
  
  view.add(
    // after
    <Node>{() => range(count()).map(() => <Node />)}</Node>,
  );
  

• 

  Project configuration now supports glob patterns

  #834

  import motionCanvas from '@wangyaoshen/locus-vite-plugin';
  import {defineConfig} from 'vite';
  
  export default defineConfig({
    plugins: [
      motionCanvas({
        project: './src/projects/*.ts',
      }),
    ],
  });
  

• 

  Opacity is clamped between 0 and 1.

  #835
• 

  Errors that occur when loading an image are now properly reported in the editor.

  #847

Fixed bugs 🐛​

• 

  Added a missing middle property to the LayoutProps interface.

  #891
• 

  Cardinal points now correctly account for the Node's offset.

  #883
• 

  "Go to source" actions should work again.

  #895
• 

  Unusual characters in file names are now properly handled.

  #821
• 

  When opening the output directory, it will be automatically created if it doesn't exist.

  #787
• 

  Fixed line jitter under certain conditions.

  #863
• 

  Correctly calculate bounding boxes of Txt nodes.

  #836
• 

  Fixed tweening cardinal points.

  #829

New features 🎉​

• 

  Nodes can now be skewed:

  #803
  Press play to preview the animation

  import ...
  
  export default makeScene2D(function* (view) {
    const ref = createRef<Img>();
    yield view.add(
      <Img
        ref={ref}
        skew={[-24, -12]}
        src="https://images.unsplash.com/photo-1696931073577-5638a6891e1e"
        width={240}
        radius={20}
      />,
    );
  
    yield* ref().skew([24, 12], 1, easeOutElastic).back(1);
  });
  
  

• 

  New

  SVG

  node lets you display and tween SVG graphics.

  #763
  

  (The amount of supported SVG features is still limited, the node was designed mainly to support LaTeX tweening in the future update)

• 

  A new lineCount property lets you retrieve the number of lines in a code block.

  #802
• slideTransition

  now allows for diagonal movement defined using

  Origin

  .

  #801
• 

  Any external changes made to the audio file are now picked up and automatically reflected in the editor.

  #793
• 

  When rendering, an estimated remaining time is displayed in the bottom right.

  #795
• 

  New playback controls for seeking to the very beginning and end of the animation.

  #814
• 

  When dragging time events, a line indicator is displayed to help precisely align the event with the audio.

  #808
• 

  Holding MMB allows you to drag the timeline left and right.

  #794
• 

  A new error warns about a missing image source.

  #817

Fixed bugs 🐛​

• 

  Specific event names, such as constructor no longer cause the editor to crash.

  #819
• 

  Added missing Curve properties to Circle.

  #805
• 

  Arrow heads now always point in the correct direction.

  #792

New features 🎉​

• 

  The

  Rect

  and

  Circle

  nodes now extend

  Curve

  giving them access to all its properties and methods:

  #771#759
  Press play to preview the animation

  import ...
  
  export default makeScene2D(function* (view) {
    const ref = createRef<Circle>();
    view.add(
      <Circle
        ref={ref}
        size={160}
        stroke={'lightseagreen'}
        lineWidth={8}
        endAngle={270}
        endArrow
      />,
    );
  
    yield* all(ref().start(1, 1), ref().rotation(180, 1, easeInCubic));
    ref().start(0).end(0);
    yield* all(ref().end(1, 1), ref().rotation(360, 1, easeOutCubic));
  });
  
  

• 

  New SVG

  Path

  component:

  #700
  Press play to preview the animation

  import ...
  
  export default makeScene2D(function* (view) {
    view.add(
      <Path
        scale={8}
        position={-96}
        fill={'lightseagreen'}
        data={
          'M4 6.47L5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4z'
        }
      />,
    );
  });
  
  

• 

  New

  start

  and

  end

  signals for animating the

  Grid

  node.

  #761
• 

  New helper methods for managing references: #775

  • createRefArray
  • createRefMap
• Img

  and

  Video

  nodes with radius are automatically clipped.

  #773
• BBox

  transformation methods accept

  PossibleMatrix2D

  .

  #770
• 

  New

  middle

  cardinal point.

  #758
• 

  New

  rotate

  and

  polarLerp

  methods for

  Vector2

  .

  #756
• 

  The editor now lets you copy the mouse coordinates by pressing P

  #737
• restore()

  can be called without duration to restore the state immediately.

  #736

Fixed bugs 🐛​

• 

  Fixed the "Last updated by" information on documentation pages.

  #776
• 

  Timeline correctly displays small time ranges.

  #739
• 

  It's no longer possible to spawn multiple color pickers.

  #747

New features 🎉​

• 

  All entities are now imported from the main entry point of each package. The only exception is the CodeBlock node which still requires the full import path:

  import {all, createRef} from '@motion-canvas/core';
  import {makeScene2D, Circle} from '@motion-canvas/2d';
  // the only exception:
  import {CodeBlock, insert} from '@motion-canvas/2d/lib/components/CodeBlock';
  

  Importing from subdirectories will continue to work until version 4.

  #721#710
• 

  New

  presenter

  and

  renderer

  plugin hooks.

  
  

  You can learn how to create your own plugins in the new Authoring Plugins guide.

  #723
• 

  New

  Random.gauss()

  method lets you generate random numbers using a gaussian (normal) distribution.

  #709
• 

  Updated sidebar design lets you hide the timeline and collapse panels by dragging.

  #692
• 

  Application-wide settings let you configure the project defaults and change the editor appearance. You can edit them in the settings tab on the left.

  #697
• 

  You can use a new eye dropper tool to pick colors from the canvas

  
  

  (see

  browser compatibility

  )

  #691
• 

  Error stack traces now include function names.

  #693
• 

  Overall improvements to the Fiddle editor.

  #706#712#713

Fixed bugs 🐛​

• 

  Fix package.json entry.

  #720
• 

  Fix collapsable sections.

  #698
• 

  Use project variables when rendering/presenting.

  #690

New features 🎉​

• 

  The brand new Video (FFmpeg) exporter lets you render your animations directly to a video file. It's included by default (with the option to opt out) in all new projects created with npm init @motion-canvas. Check out the docs to learn how to install it in your existing projects.

  #673#660
• 

  An improved rendering button provides visual feedback about the rendering process.

  #662#681
• 

  A new OUTPUT DIRECTORY button lets you reveal the current output directory in your file explorer. You can find it directly below the RENDER button.

  #663
• 

  Collapsible panels are now animated.

  #671
• 

  Array values, such as points of a Line, are now displayed in the inspector.

  #670
• 

  The create package now supports command-line arguments for providing answers without having to go through the interactive prompt:

  #668

  npm init @motion-canvas@latest -- --name Hello --path ./hello --language ts
  

• 

  Meta fields can declare descriptions. When hovering over the field in the editor, the description will be displayed in a form of a tooltip.

  #664
• 

  New hooks let plugins extend the behavior of the player (The plugin documentation will be available soon).

  #679

Fixed bugs 🐛​

• 

  Correctly support URLs to external images.

  #678
• 

  Remove the yellow dependency pre-bundling warning.

  #676
• 

  Fix editing the audio offset by dragging the waveform.

  #674
• 

  Ignore children with disabled layout.

  #669
• 

  Prevent Color tree shaking.

  #666