• 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

• 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 '@motion-canvas/2d';
  import {createEffect, createSignal} from '@motion-canvas/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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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 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

• New Spline node lets you draw lines made up of Bezier curves:#514

  <Spline lineWidth={6} stroke={'lightseagreen'}>
    <Knot position={[-100, 30]} />
    <Knot position={[0, -50]} startHandle={[-70, 0]} />
    <Knot position={[100, 30]} />
  </Spline>
  
• Vector2 has been expanded with new methods: degrees, equals, squaredMagnitude#579
• Names displayed in the project selection view are now retrieved from the meta files.#552
• Introduce initial API for plugins.#564
• The fields in the editor are now autogenerated based on the structure of the meta file.#565

Fixed bugs 🐛​

• Support multiple fiddles on one page.#572
• Fix CodeBlock types.#563
• Size is now copied when cloning a node.#562
• Zoom to fit works correctly for smaller canvases.#561

• New Fiddle Editor let's you play around with Motion Canvas directly in the browser.#542
• Information about the current zoom level is now displayed in the top-left corner of the viewport. You can choose one of the predefined zoom levels or toggle "zoom to fit".#531
• The group by scene rendering option lets you render scenes into separate image sequences.#477
• Button titles now include their corresponding shortcuts.#532
• Vite has been updated to v4.#495
• Tree shaking now works correctly.#523
• Custom fields added to meta files are now preserved.#534
• Checkboxes use a custom style.#529

Fixed bugs 🐛​

• The size of cache canvases is limited to the size of the project.#544
• textWrap now works in Firefox.#541
• The port at which Motion Canvas is served can now be changed.#538
• The editor correctly detects new versions.#520
• Keyboard shortcuts are now ignored when inputting text.#521
• Runtime errors no longer corrupt the editor's state.#524

• New status bar lists the shortcuts available in the currently hovered panel.#444
• The current version is now displayed on the status bar. Clicking it will copy the versions of all packages currently in use.#501
• Cache is now stored using world space coordinates. Scaling up cached nodes no longer results in quality loss.#498
• All methods of Vector2 now acceptPossibleVector2 as arguments, making it possible to write code like this: #478

  vector.add([100, 200]).mul(2);
  
• New Polygon node lets you quickly create regular polygons:

  <Polygon
    sides={6}
    size={300}
    fill={'lightseagreen'}
  />
  
  The code above will generate a hexagon.#463

Fixed bugs 🐛​

• Fix line arc length.#503
• Fix invalid source code link.#502

• New Presentation Mode lets you present your animations live.#486
• New textAlign property.#451
• New intersects method for the BBox type.#485

Fixed bugs 🐛​

• Fix playback state.#471
• Fix cache bbox for lines.#467
• Fix relative time.#461
• Support multiple async players.#450
• Fix letterSpacing.#448

New features 🎉​

• New playback architecture:
  • Project settings are now stored in meta files.
  • Preview and rendering settings are configured separately.
  • The animation range is stored using seconds instead of frames.
  • You can adjust the audio offset by holding SHIFT and dragging the waveform left and right
  • The rendering is not locked to the framerate, making the process a bit faster.
  This change also opens the door to a lot of new features, including the Presentation Mode, Editable Signals and Custom Exporters.#402
• Rendering settings include a quarter resolution (x0.25).#421
• New textDirection property for RTL/LTR text.#404

Fixed bugs 🐛​

• Fix Vector2.exactlyEquals.#437
• Render only within the range.#436
• Fix initial value of endOffset.#433
• Correctly reset zoom.#432
• Fix performance issue with audio track.#427
• Clear semi-transparent backgrounds.#424

• You can now store the state of a node and restore it at a later point.#406
• CodeBlock is now exported together with other nodes. An improved theme system with the new stockTheme property lets you use VS Code themes (powered by Shiki)#401
• New alignContent and alignItemsFlexbox properties.#405
• New zIndex property allows you to change the rendering order of child nodes, without rearranging the hierarchy.#398
• New Icon node:

  <Icon icon={"mdi:typewriter"} size={200} color="white" />
  
  Check out Icônes for the list of all possible icons.#306
• Images can now be loaded from the internet. For images with incompatible CORS headers, a new CORS Proxy can be enabled.#357
• New look for the release blog.#410

Fixed bugs 🐛​

• Handle division by zero in lines#407

• New spring interpolation.#356
• closed property lets you make wedges using Circles.#378
• New fadeTransition.#384
• The range function now accepts an additional step parameter.#373
• View2D now extends Rect allowing you to change the background color of a scene using the fill property.#379

Fixed bugs 🐛​

• Support Color to null tweening.#387
• Plug memory leaks.#385
• Fix signal initialization.#382
• Handle floating point errors in acos.#381

• DEFAULT signal values. lineHeight now supports percentages. (#259) (18f61a6)
• New moveBelow, moveAbove and moveTo methods for rearranging the nodes. (#365) (16752a3)
• New CodeBlock documentation (#302) (73f7221)
• The editor now warns about duplicated time events. (#341) (053b2a6)
• We now have a search bar on the documentation website. (#335) (48f74a6)
• You can now open the documentation from within the editor. (#346) (fc4ee5d)
• SHIFT + -> moves to the last frame. (#354) (4b81709), closes #353
• Flexbox gap is now represented by a Vector2 signal. (#355) (3cae97e), closes #352
• New Matrix2D type. (#340) (66b41e6)

Bug Fixes​

• 2d: fix Gradient and Pattern signals (#376) (6e0dc8a)
• 2d: fix layout calculation for nodes not explicitly added to view (#331) (528e2d5)
• 2d: format whitespaces according to HTML (#372) (83fb565), closes #370
• core: playback speed is reset after saving with faulty code (#204). (#339) (6771e5e)
• docs: fix search (#336) (e44ec02)
• typo on codeblock remove comments (#368) (2025adc)
• ui: fix inspector tab (#374) (c4cb378)
• vite-plugin: fix js template (#337) (3b33d73)
• vite-plugin: ignore query param in devserver (#351) (5644d72)

• A new LaTeX node! (#228) (4c26d2a)
• CodeBlock themes (documentation coming soon) (#279) (fe34fa8)
• An antialiased property for Shapes (#282) (7c6905d)
• Smooth corners and sharpness control for Rects (#310) (f7fbefd)
• A simpler debug function (#293) (b870873)
• Multiple new easing functions (#274) (f81ce43)
• Tweening to/from undefined values now warns the user (#257) (d4bb791)
• API documentation is always re-build when in build mode (#298) (27a4d96), closes #294

Bug Fixes​

• textWrap={'pre'} now works in Firefox (#287) (cb07f4b)
• Using space to play/pause the animation when focused on the play button now works properly (#299) (191f54a)
• The glossy effect on the select element has been removed in Safari (#292) (9c062b2)

• New project variables let you create customizable animations (#255) (4883295)
• The Video component has new getters for the duration, current time, and state of the video (#240) (59de5ab)

Bug Fixes​

• Text is now visible in Firefox without the need of a custom flag (#249) (20a4d65)

• add useDuration helper (#226) (fa97d6c), closes #171

Bug Fixes​

• 2d: fix font ligatures in CodeBlock (#231) (11ee3fe)
• 2d: fix Line cache (#232) (a953b64), closes #205
• 2d: handle lines with no points (#233) (8108474), closes #212
• 2d: improve Rect radius (#221) (3437e42), closes #207
• 2d: stop code highlighting from jumping (#230) (67ef1c4)
• core: fix looping (#217) (a38e1a7), closes #178
• fix compound property setter (#218) (6cd1b95), closes #208#210
• vite-plugin: add missing headers to html (#219) (2552bcf), closes #201

Don't get me wrong - the road ahead is still long. Plenty of features left to implement and tons of bugs to find and fix. But the foundations are here. Motion Canvas helped me make most of my videos last year, and I'm positive some of you will find it helpful as well.

Head to the quickstart guide and give it a try.