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 '@motion-canvas/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 extendsCurve 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 mapOrigins and Directions 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 '@motion-canvas/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 '@motion-canvas/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 Curvegiving 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

New features 🎉​

• Cardinal points let you position nodes relative to their corners and edges#636
  Press play to preview the animation

  import ...
  
  export default makeScene2D(function* (view) {
    const rect = createRef<Rect>();
  
    view.add(
      <>
        <Rect
          ref={rect}
          width={200}
          height={100}
          rotation={-10}
          fill={'#333333'}
        />
        <Rect
          size={50}
          fill={'#e6a700'}
          rotation={rect().rotation}
          // Try changing "right" to "top"
          right={rect().left}
        />
        <Rect
          size={100}
          fill={'#e13238'}
          rotation={10}
          bottomLeft={rect().bottomRight}
        />
      </>,
    );
  
    yield* rect().rotation(10, 1).to(-10, 1);
  });
  
  
• New Ray node lets you easily define simple lines between two points.#628
• New methods for chaining animations together:#651

  yield* circle().scale(0.5, 0.2)
    // tween to another value
    .to(2, 0.2)
    // wait for one second
    .wait(1)
    // tween back to the initial value
    .back(0.2)
    // execute a callback
    .do(() => circle().fill('red'))
    // run the given generator
    .run(circle().position.y(100, 2));
  
• New loopFor and loopUntil flow functions.#650#624
• External changes to images are now automatically reflected in the preview.#641
• New fromDegrees, createArcLerp and mod Vector2 methods.#640#622
• New completion and arcLengthproperties for curves.#627#635
• New DEG2RAD and RAD2DEG constants for converting between degrees and radians.#630
• You can now toggle fiddles between the code , editor and preview mode (You can try it out in the example above).#642

Fixed bugs 🐛​

• Clear DependencyContext promises once resolved.#617
• Fix fiddle accessibility.#647
• Fix cyclic dependency in cardinal points.#645
• Correctly append Txt nodes to view.#644
• Fix taking snapshots.#638#643
• Fix a typo in a viewport ID.#620

New features 🎉​

• New Bézier nodes let you easily create splines consisting of only one segment: #603
  Press play to preview the animation

  Cubic Bezier

  • Cubic Bezier
  • Quadratic Bezier

  import ...
  
  export default makeScene2D(function* (view) {
    const bezier = createRef<CubicBezier>();
  
    view.add(
      <CubicBezier
        ref={bezier}
        lineWidth={6}
        stroke={'lightseagreen'}
        p0={[-200, 0]}
        p1={[50, -200]}
        p2={[-50, 200]}
        p3={[200, 0]}
      />,
    );
  
    yield* bezier().start(1, 1);
    yield* bezier().start(0).end(0).end(1, 1);
  });
  
  
• New Video properties: #601
  • play automatically plays the video
  • loop restarts the video upon reaching the end
• Fiddles now support multiple examples. You can switch between them using the dropdown on the right side.

Fixed bugs 🐛​

• UPDATE AVAILABLE now links to the GitHub release page.#608
• Videos play smoothly when in presentation mode.#600
• Reused async resources are now correctly awaited.#599
• Arrow orientations for splines are correctly calculated.#597
• The showcase editor has been fixed.#589