New Features

Examples showcasing newly implemented features in manim-web.

Draggable Objects

Make any mobject draggable with mouse and touch support. Supports axis constraints, snap-to-grid, and callbacks. Try dragging the shapes below — the line updates reactively.

Source Code

import { Circle, Square, Dot, Line, Text, makeDraggable, BLUE, GREEN, RED, YELLOW, WHITE } from 'manim-web';

const circle = new Circle({ radius: 0.5, color: BLUE, fillOpacity: 0.8 });
circle.moveTo([-2, 1, 0]);

const square = new Square({ sideLength: 0.8, color: GREEN, fillOpacity: 0.8 });
square.moveTo([2, 1, 0]);

const dot = new Dot({ color: YELLOW, radius: 0.15 });
dot.moveTo([0, -1, 0]);

// Line updates reactively as objects are dragged
const line = new Line({ start: circle.getCenter(), end: dot.getCenter() }).setColor(RED);
line.addUpdater(() => line.become(new Line({ start: circle.getCenter(), end: dot.getCenter() })));

const label = new Text({ text: 'Drag the shapes!', fontSize: 24, color: WHITE });
label.moveTo([0, 2.5, 0]);

scene.add(circle, square, dot, line, label);

// Free drag
makeDraggable(circle, scene);
makeDraggable(dot, scene);

// Constrained to X axis with grid snapping
makeDraggable(square, scene, { constrainY: [1, 1], snapToGrid: 0.5 });

---

Draggable Objects (3D)

Dragging works in 3D scenes too — objects move on a plane facing the camera. You can also orbit the camera (drag the background) and then drag individual objects.

Source Code

import { Sphere, Cube, Dot3D, ThreeDAxes, makeDraggable, BLUE, GREEN, YELLOW } from 'manim-web';

// ThreeDScene with orbit controls enabled by default
const axes = new ThreeDAxes({ xRange: [-4, 4, 1], yRange: [-4, 4, 1], zRange: [-3, 3, 1] });

const sphere = new Sphere({ radius: 0.4, color: BLUE, opacity: 0.8 });
sphere.moveTo([-2, 0, 0]);

const cube = new Cube({ sideLength: 0.6, color: GREEN, opacity: 0.8 });
cube.moveTo([2, 0, 0]);

const dot = new Dot3D({ color: YELLOW, radius: 0.2 });
dot.moveTo([0, 2, 0]);

scene.add(axes, sphere, cube, dot);

// 3D dragging raycasts onto a camera-facing plane at the object's depth
makeDraggable(sphere, scene);
makeDraggable(cube, scene);
makeDraggable(dot, scene);

---

Matrix Helpers

Helper functions for working with matrices: getDetText adds determinant notation around a matrix, matrixToMobject converts arrays to Matrix mobjects, and matrixToTexString generates LaTeX strings from arrays.

Source Code

import {
  Matrix, IntegerMatrix, DecimalMatrix, MobjectMatrix,
  Circle, Square, MathTex,
  Create, FadeIn, getDetText, YELLOW,
} from 'manim-web';

// Multiple matrix types (like Python Manim's MatrixExamples)
const m0 = new Matrix([['\\pi', '0'], ['-1', '1']]);
const m1 = new IntegerMatrix([[1.5, 0], [12, -1.3]], { bracketType: '()' });
const m2 = new DecimalMatrix([[3.456, 2.122], [33.2244, 12.33]], { numDecimalPlaces: 2 });
const m3 = new MobjectMatrix([
  [new Circle({ radius: 0.15 }), new Square({ sideLength: 0.25 })],
  [new MathTex({ latex: '\\pi' }), new Circle({ radius: 0.1 })],
]);

// Determinant text (like Python Manim's DeterminantOfAMatrix)
const matrix = new Matrix([[2, 0], [-1, 1]]);
const det = getDetText(matrix, { determinant: 3, color: YELLOW });
scene.add(matrix);
scene.add(det);

---

ConvexHull3D

A 3D convex hull computed from arbitrary points in space. Pass an array of 3D coordinates and get a solid or wireframe hull mesh.

Source Code

import { ConvexHull3D, Create, Rotate, GREEN_C } from 'manim-web';

const hull = new ConvexHull3D({
  points: [
    [1, 0, 0], [-1, 0, 0],
    [0, 1, 0], [0, -1, 0],
    [0, 0, 1], [0, 0, -1],
    [0.5, 0.5, 0.5], [-0.5, -0.5, 0.5],
  ],
  color: GREEN_C,
  opacity: 0.6,
});

await scene.play(new Create(hull, { duration: 2 }));
await scene.play(new Rotate(hull, { angle: Math.PI, duration: 3 }));

// Switch to wireframe
hull.setWireframe(true);

---

TipableVMobject

Base class enabling arrow tips on arbitrary VMobjects. Arrows use this internally, but now any curve-based mobject can have tips added to its endpoints.

Source Code

import { Arc, Arrow, Create, BLUE, RED, YELLOW } from 'manim-web';

const arc = new Arc({
  radius: 2,
  startAngle: 0,
  angle: Math.PI * 1.2,
  color: BLUE,
});
await scene.play(new Create(arc));

const arrow1 = new Arrow({
  start: [-3, -1.5, 0],
  end: [0, 1.5, 0],
  color: RED,
  tipLength: 0.3,
});

const arrow2 = new Arrow({
  start: [0, 1.5, 0],
  end: [3, -1.5, 0],
  color: YELLOW,
  tipLength: 0.3,
});

await scene.play(new Create(arrow1));
await scene.play(new Create(arrow2));

---

TransformMatchingAbstractBase

Abstract base class for matching-based transform animations. TransformMatchingShapes and TransformMatchingTex extend this base, and you can create custom matching transforms by subclassing it.

Source Code

import {
  VGroup, Circle, Square, Triangle,
  TransformMatchingShapes, Create,
  BLUE, RED, GREEN, YELLOW,
} from 'manim-web';

// Source shapes
const source = new VGroup();
source.add(new Circle({ radius: 0.5, color: BLUE, fillOpacity: 0.5 }));
source.add(new Square({ sideLength: 1, color: RED, fillOpacity: 0.5 }));
source.add(new Triangle({ sideLength: 1, color: GREEN, fillOpacity: 0.5 }));
await scene.play(new Create(source));

// Target shapes (rearranged)
const target = new VGroup();
target.add(new Circle({ radius: 0.7, color: YELLOW, fillOpacity: 0.5 }));
target.add(new Square({ sideLength: 1.2, color: GREEN, fillOpacity: 0.5 }));
target.add(new Triangle({ sideLength: 0.8, color: BLUE, fillOpacity: 0.5 }));

// Shapes are matched and transformed smoothly
await scene.play(new TransformMatchingShapes(source, target, { duration: 2 }));

---

ManimBanner

A branded manim-web banner with logo shapes and text. Includes built-in createAnimation() and expandAnimation() methods for animated reveals.

Source Code

import { ManimBanner } from 'manim-web';

const banner = new ManimBanner({ darkTheme: true });

// Draw the logo shapes
await scene.play(banner.createAnimation({ duration: 2 }));

// Reveal the text
await scene.play(banner.expandAnimation({ duration: 1.5 }));

---

TeX Templates

Configuration classes for LaTeX rendering. TexTemplate lets you customize preamble and packages, while TexFontTemplates and TexTemplateLibrary provide pre-built configurations.

Source Code

import {
  TexTemplate, TexTemplateLibrary, TexFontTemplates,
  MathTex, Create,
} from 'manim-web';

// Create a custom template
const template = new TexTemplate();
template.addPackage('physics');
console.log(template.getBody('$\\int_0^\\infty e^{-x^2} dx$'));

// Use pre-built templates
const defaultTemplate = TexTemplateLibrary.default;
const mathTemplate = TexTemplateLibrary.fullMath;

// Font templates available
const palatino = TexFontTemplates.palatino;
console.log(palatino.description); // "Palatino"

---

MathTex Parts

SingleStringMathTex handles single LaTeX expressions, while MathTexPart enables composing equations from individually styleable and animatable parts.

Source Code

import { MathTex, Create, FadeIn, Indicate, RED, BLUE, GREEN, WHITE } from 'manim-web';

// Create individually colored equation parts
const xSquared = new MathTex({ latex: 'x^2', color: RED });
const plus = new MathTex({ latex: '+', color: WHITE });
const ySquared = new MathTex({ latex: 'y^2', color: BLUE });
const equals = new MathTex({ latex: '=', color: WHITE });
const rSquared = new MathTex({ latex: 'r^2', color: GREEN });

// Animate each part independently
await scene.play(new Create(xSquared));
await scene.play(new Create(ySquared));
await scene.play(new Create(rSquared));

// Highlight specific parts
await scene.play(new Indicate(xSquared, { color: YELLOW }));

---

Animation Utilities

prepareAnimation normalizes animation inputs — accepts Animation instances or functions returning animations. overrideAnimation registers custom animations for mobject methods.

Source Code

import {
  Circle, Square, Create, Transform,
  prepareAnimation,
} from 'manim-web';

// Accept direct Animation instances
const circle = new Circle({ radius: 1, color: BLUE });
const anim1 = prepareAnimation(new Create(circle));
await scene.play(anim1);

// Accept functions returning animations
const square = new Square({ sideLength: 2, color: RED });
const anim2 = prepareAnimation(() => new Transform(circle, square));
await scene.play(anim2);