manim3
v1.0.3
Published
A TypeScript animation library for creating mathematical animations, inspired by Python's Manim
Maintainers
yogeshgawadeReadme
Manim3
A TypeScript animation library for creating mathematical animations, inspired by Python's Manim. Built on top of Three.js for high-performance WebGL rendering.
Installation
npm install manim3 threeNote: three is a peer dependency and must be installed separately.
Quick Start
NPM (Recommended)
import { Scene, Circle, moveTo, create, fadeIn } from 'manim3';
// Create a scene
const scene = new Scene(
document.getElementById('canvas-container')!,
{ width: 1920, height: 1080 }
);
// Create a circle
const circle = new Circle({
radius: 2,
color: '#58C4DD',
fillColor: '#83C9DD',
fillOpacity: 0.5,
});
// Add to scene and animate
scene.add(circle);
// Build timeline and play
scene.scheduler.reset();
scene.at(0).play(create(circle, 1));
scene.at('+=0.5').play(moveTo(circle, [3, 0, 0], 1));
scene.scheduler.play();CDN (No Build Required)
Use Manim3 directly in the browser with no build step:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/manim3@latest/dist/ManimPlayer.css">
</head>
<body>
<div id="player-container"></div>
<script type="module">
import { Scene, ManimPlayer, Circle, create } from 'https://esm.sh/manim3@latest';
// Create scene and player
const container = document.getElementById('player-container');
const scene = new Scene(container, { width: 960, height: 540 });
const player = new ManimPlayer(container, scene);
// Create and animate a circle
const circle = new Circle({ radius: 1, color: '#58C4DD' });
scene.add(circle);
scene.scheduler.reset();
scene.at(0).play(create(circle, 1));
scene.scheduler.play();
</script>
</body>
</html>Features
- 2D & 3D Graphics: Geometric shapes, text, graphs, and 3D objects
- Animation System: Rich animation tracks (move, rotate, scale, color, morph, create, etc.)
- LaTeX/Math Support: Render mathematical expressions with MathJax/KaTeX
- SVG Import: Load and animate SVG files
- Timeline Control: Precise scheduling with bookmarks and relative positioning
- Audio Sync: Synchronize animations with audio and voiceovers
- Export: Export animations as video frames
Core Concepts
Mobjects
Mobjects (Mathematical Objects) are the basic building blocks:
import { Circle, Rectangle, Line, Arrow, Text } from 'manim3';
const circle = new Circle({ radius: 1, color: '#FF0000' });
const rect = new Rectangle({ width: 2, height: 1 });
const line = new Line({ start: [-1, 0, 0], end: [1, 0, 0] });Animations
Apply animations using the timeline-based API:
import { Scene, create, moveTo, rotateTo, scaleTo, fadeOut, smooth } from 'manim3';
// Create scene
const scene = new Scene(container, { width: 1920, height: 1080 });
// Reset scheduler before building timeline
scene.scheduler.reset();
// Play animations at specific times with relative offsets
scene.at(0).play(create(circle, 1, smooth)); // Start at t=0
scene.at('+=0.5').play(moveTo(circle, [2, 0, 0], 1, smooth)); // +0.5s after previous
scene.at('+=0.5').play(rotateTo(circle, [0, 0, Math.PI], 1)); // +0.5s gap
scene.at('+=0.5').play(scaleTo(circle, 2, 1, smooth));
scene.at('+=0.5').play(fadeOut(circle, 1, smooth));
// Start playback
scene.scheduler.play();Scenes
Scenes coordinate rendering and animation:
import { Scene, ThreeDScene } from 'manim3';
// Scene constructor takes container as first argument
const scene2D = new Scene(container, { width: 1920, height: 1080 });
const scene3D = new ThreeDScene(container, { width: 1920, height: 1080 });ManimPlayer
A ready-to-use video player component with playback controls, scrubber, and export functionality:
import { Scene, ManimPlayer } from 'manim3';
const container = document.getElementById('player-container');
const scene = new Scene(container, { width: 960, height: 540 });
// Create player with options
const player = new ManimPlayer(container, scene, {
showExport: true, // Show export controls
keyboardShortcuts: true, // Enable Space (play/pause) and R (restart)
});Note: When using ManimPlayer, include the CSS file:
- NPM: Import from
node_modules/manim3/dist/ManimPlayer.css - CDN: Link to
https://unpkg.com/manim3@latest/dist/ManimPlayer.css
API Overview
Core Classes
Mobject- Base class for all objectsVMobject- Vectorized mobject with bezier curvesGroup/VGroup- Collections of mobjectsScene- 2D animation sceneThreeDScene- 3D animation sceneManimPlayer- Video player component with controls
Geometric Shapes
Circle,Ellipse,Arc,SectorRectangle,Square,Polygon,TriangleLine,Arrow,CurvedArrow,DoubleArrowDot,SmallDot,LargeDotAnnulus,AnnularSector
Text & Math
Text- Canvas-based textMathTex/Tex- LaTeX renderingMarkupText- Styled textParagraph- Multi-line textDecimalNumber/Integer- Animated numbers
Graphing
Axes- 2D coordinate systemNumberLine- 1D axisNumberPlane- Grid backgroundFunctionGraph- Plot functionsComplexPlane- Complex number visualizationVectorField- Vector field displayStreamLines- Flow visualization
3D Objects
Sphere,Cube,Cylinder,ConeTorus,PolyhedronArrow3D,Line3DSurface3D,ParametricSurface
Animations
create()- Draw border then fillmoveTo()- Position interpolationrotateTo()- Rotation interpolationscaleTo()- Scale interpolationcolorTo()- Color interpolationfadeIn()/fadeOut()- Opacity changesmorphTo()- Shape morphinggrowFromCenter()- Grow from centerindicate()- Pulse to draw attentionwiggle()- Rotation oscillationcrossFade()- Crossfade between objects
Utilities
- Rate functions:
linear,smooth,easeInOutQuad, etc. ValueTracker- Animate scalar values- Color palette from
constants/colors
Development
# Install dependencies
npm install
# Run tests
npm test
# Build for production
npm run build
# Type check
npm run lintLicense
MIT
Credits
Inspired by 3Blue1Brown's Manim.