Skip to main content

How to Create Math and Technical Animations in Confluence Using Manim

· 23 min read
NGPilot
NGPilot

Mathematical concepts are inherently dynamic. A limit converges, a derivative emerges from shrinking secant lines, a matrix transformation rotates a vector through space. Static screenshots and LaTeX formulas capture the result but miss the process -- and for many students and colleagues, the process is where understanding lives. Animations bridge that gap. They show how equations transform, how geometric constructions unfold step by step, and how abstract algebra connects to visual intuition.

Until recently, embedding math animations in documentation required a multi-tool workflow: write Python scripts with Manim, render MP4 files locally, upload them as attachments or embed them via external hosting, and hope nobody asked you to update them. Manim for Confluence eliminates that entire pipeline. You write animation code directly inside a Confluence macro, and the animation plays inline on the published page -- no file exports, no external hosting, no broken links when the video expires.

In this tutorial, you will learn how to create math and technical animations in Confluence using Manim for Confluence. We cover the fundamentals of the Manim scene API, walk through the macro configuration, and build several copy-paste-ready examples including equation derivations, shape transformations, and geometric proofs. By the end, you will be able to embed rich, interactive animations directly in your Confluence documentation.

What is Manim?

Manim is an open-source animation engine originally created by 3Blue1Brown (Grant Sanderson) for producing the math animations that power his YouTube channel. It provides a programmatic API for creating precise mathematical visualizations -- shapes, equations, graphs, transformations, and animated sequences -- all defined in code rather than drawn by hand.

The engine has since grown into two active projects: the original Manim (often called ManimGL) and the community edition ManimCE. Both share the same core philosophy: describe what should appear on screen using code, and the engine handles rendering frames, interpolation, and timing.

Manim for Confluence brings this capability directly into Confluence. Instead of rendering videos on your local machine, you write Manim-compatible scene code inside a macro editor on the Confluence page itself. The animation runs in the browser when someone views the page. This means your team's technical documentation, educational content, and internal wikis can include animated mathematical visualizations without any external tooling.

Why animate math in Confluence?

Static diagrams work well for simple concepts, but they fall short when you need to communicate movement, transformation, or sequential construction. Consider these scenarios where animations outperform static images:

  • Education and training. When onboarding new engineers or teaching mathematical concepts to non-specialists, an animation that shows a Fourier series converging to a square wave is far more effective than a series of still frames or a paragraph of text.
  • Proof visualization. Geometric proofs often involve construction steps -- draw a perpendicular, bisect an angle, rotate a triangle. An animation walks the viewer through each step in order, making the logical structure of the proof visible.
  • Algorithm explanation. Sorting algorithms, graph traversals, and matrix operations are easier to understand when you can watch the data structure change state over time.
  • Design rationale. When presenting architectural or mathematical design decisions in Confluence, an animated diagram can show why a particular approach works, not just that it works.

Confluence is where your team already reads documentation. Putting animations there instead of linking to external videos or GIF attachments means the content is searchable, version-controlled, and always accessible alongside the surrounding context.

Step-by-step tutorial: Creating math animations in Confluence

Step 1 -- Install Manim for Confluence

Manim for Confluence is distributed through the Atlassian Marketplace. To install it:

  1. Navigate to your Confluence site and click the gear icon (Settings) in the top right corner.
  2. Select Manage apps from the left sidebar.
  3. Click Find new apps and search for Manim for Confluence.
  4. Click Install on the app listing and follow the prompts.

You need Confluence Administrator permissions to install apps. Once installed, the macro is available on every page in your Confluence instance -- there is no per-space configuration needed.

Step 2 -- Insert the Manim macro on a page

Open or create a Confluence page and enter Edit mode. Click the + (Insert) button in the editor toolbar, or type / in the page body to open the macro browser. Search for Manim and select Manim for Confluence from the results.

The macro configuration panel opens immediately. This panel has three main areas:

  • Top bar with Save, Cancel, and Help controls
  • Toolbar with canvas dimensions, background color picker, and template quick-start buttons
  • Preview panel showing a live render of your animation
  • Code editor at the bottom, powered by Monaco (the same editor engine as VS Code)

Step 3 -- Write your animation code

The code editor accepts Manim scene API code. All Manim exports are available as global variables -- you do not need to write import statements. The scene object is injected automatically.

Here is the simplest possible animation:

const circle = new Circle({ radius: 1.5, color: BLUE });
await scene.play(new Create(circle));
await scene.wait(1);
await scene.play(new FadeOut(circle));

This code creates a blue circle, animates it being drawn onto the canvas, waits one second, then fades it out. The preview panel updates automatically as you type, so you can see the result immediately.

If you are new to Manim, start with one of the built-in templates by clicking a template button in the toolbar. The templates include:

  • Basic -- Creates, transforms, and fades shapes (circle to square to triangle)
  • Manim Logo -- Recreates the Manim CE logo using grouped shapes and LaTeX
  • Sine Curve -- Animates a dot tracing a sine wave with a rotating circle
  • Moving Angle -- Animates an angle label using a ValueTracker
  • Boolean Ops -- Demonstrates union, intersection, and difference of ellipses
  • Point Trace -- A dot that leaves a visible trail as it moves

Clicking a template loads its code into the editor and refreshes the preview instantly. This is the fastest way to learn the API -- load a template, modify a parameter, and watch how the animation changes.

Step 4 -- Configure canvas and playback settings

The toolbar provides controls for the visual canvas:

SettingDescriptionDefault
Width (px)Canvas width in pixels800
Height (px)Canvas height in pixels450
BackgroundColor picker for the canvas background#1C1C1C

Advanced settings control playback behavior:

SettingDescriptionDefault
AutoplayWhether the animation starts automatically on page loadtrue
Playback speedMultiplier for animation speed (0.25x to 2x)1
Controls auto-hide delayMilliseconds before player controls fade out2500
Controls positionWhere player controls appear (top-left, top-right, bottom-left, bottom-right)bottom-right
Controls themeLight or dark player controlsdark

Set the canvas dimensions to match your layout. A wide canvas (1000x450) works well for equation derivations that extend horizontally. A square canvas (600x600) is better for geometric constructions that need balanced vertical and horizontal space.

Step 5 -- Save, publish, and share

Click Save on the macro configuration panel to persist your animation code and settings. Then click Publish on the Confluence page. The animation renders inline wherever you placed the macro.

Visitors do not need any plugins, extensions, or special browser settings. The animation runs entirely in the browser using standard web technologies. If autoplay is enabled, the animation starts as soon as the page loads. Otherwise, viewers use the playback controls overlaid on the canvas to play, pause, and scrub through the animation.

To edit an existing animation, open the page in Edit mode, click the Manim macro block, click the Edit (pencil) icon, and the configuration panel reopens with your previously saved code and settings.

The Manim scene API in Manim for Confluence

Manim for Confluence uses a browser-based rendering engine that implements the core Manim scene API. This section covers the key concepts and classes you will use when writing animations.

Scene lifecycle

Every animation runs within a scene object that is provided automatically. You call scene.play() to execute animations and scene.wait() to pause between them. The await keyword is required before each scene.play() and scene.wait() call because animations execute asynchronously.

await scene.play(new Create(shape));
await scene.wait(0.5);
await scene.play(new Transform(shape, target));
await scene.wait(1);

Mobject classes

Mobjects (mathematical objects) are the building blocks of Manim animations. Here are the most commonly used classes:

ClassDescriptionExample
CircleA circle with configurable radiusnew Circle({ radius: 2, color: BLUE })
SquareA square with configurable side lengthnew Square({ sideLength: 2, color: RED })
TriangleAn equilateral trianglenew Triangle({ color: GREEN })
LineA line segment between two pointsnew Line([-3, 0, 0], [3, 0, 0])
ArrowA line with an arrowheadnew Arrow([-2, 1, 0], [2, 1, 0])
MathTexLaTeX-rendered equationnew MathTex("E = mc^2")
TexLaTeX-rendered textnew Tex("Theorem 1")
TextPlain text labelnew Text("Step 1")
DotA filled pointnew Dot([1, 2, 0])
NumberPlaneA coordinate gridnew NumberPlane()
PolygonA polygon from vertex coordinatesnew Polygon([0,0,0], [1,0,0], [1,1,0])
ArcA partial circle arcnew Arc({ radius: 1, startAngle: 0, angle: Math.PI/2 })

All mobjects support common configuration options: color, fillOpacity, strokeWidth, and positioning methods like .moveTo(), .shift(), .scale(), and .rotate().

Animation classes

Animation classes define how mobjects appear, change, and disappear. Pass them to scene.play():

ClassDescription
CreateDraws the outline of a shape progressively
FadeInFades a mobject from transparent to visible
FadeOutFades a mobject from visible to transparent
TransformSmoothly morphs one mobject into another
ReplacementTransformLike Transform, but replaces the source mobject
WriteAnimates text being written character by character
IndicateFlashes or highlights an existing mobject
GrowFromCenterScales a mobject up from zero at its center
MoveToTargetMoves a mobject to a previously set target position

Coordinate system

Manim uses a coordinate system where the origin (0, 0) is at the center of the canvas. The x-axis extends left to right, and the y-axis extends bottom to top. Coordinates are specified as arrays: [x, y, z]. The z-coordinate is typically 0 for 2D animations.

The visible range depends on the canvas aspect ratio. By default, the x-axis spans roughly from -7 to 7 and the y-axis from -4 to 4. Adjust the canvas dimensions in the toolbar if your animation needs more space in a particular direction.

Copy-paste example 1: Equation derivation with LaTeX

This example demonstrates an animated equation derivation. It shows the quadratic formula being derived step by step, with each transformation highlighted as it happens. This pattern is useful for educational content, lecture notes, and any documentation that walks through mathematical proofs.

// Animated quadratic formula derivation
const eq1 = new MathTex(
"ax^2 + bx + c = 0"
).moveTo([0, 2, 0]);

const eq2 = new MathTex(
"x^2 + {b \\over a}x + {c \\over a} = 0"
).moveTo([0, 0.5, 0]);

const eq3 = new MathTex(
"x^2 + {b \\over a}x = -{c \\over a}"
).moveTo([0, -1, 0]);

const eq4 = new MathTex(
"x^2 + {b \\over a}x + {b^2 \\over 4a^2} = {b^2 \\over 4a^2} - {c \\over a}"
).moveTo([0, -2.5, 0]);

const eq5 = new MathTex(
"\\left(x + {b \\over 2a}\\right)^2 = {b^2 - 4ac \\over 4a^2}"
).moveTo([0, -4, 0]);

const title = new Text("Quadratic Formula Derivation", {
color: YELLOW,
fontSize: 28
}).moveTo([0, 3.5, 0]);

// Animate step by step
await scene.play(new Write(title));
await scene.wait(0.5);

await scene.play(new Write(eq1));
await scene.wait(1);

await scene.play(new Transform(eq1, eq2));
await scene.wait(1);

await scene.play(new Transform(eq1, eq3));
await scene.wait(1);

await scene.play(new Transform(eq1, eq4));
await scene.wait(1);

await scene.play(new Transform(eq1, eq5));
await scene.wait(2);

await scene.play(new FadeOut(eq1), new FadeOut(title));

How this works:

  1. Each equation step is defined as a MathTex object with LaTeX syntax. The moveTo() method positions each equation vertically.
  2. Write animates the title appearing character by character.
  3. Transform morphs one equation into the next, creating a smooth visual transition between derivation steps.
  4. scene.wait() adds pauses between steps so viewers can read each equation before it transforms.
  5. The final FadeOut cleans up the canvas.

Customization tips:

  • Change the LaTeX strings to animate any equation derivation you need -- Taylor series, integration by parts, matrix decompositions.
  • Add color properties to highlight changed terms: new MathTex("\\color{red}{b^2} \\over 4a^2").
  • Use fontSize in the MathTex constructor to scale equations up or down.
  • Position steps horizontally by adjusting the x-coordinate in moveTo() if you want to show the derivation left-to-right instead of top-to-bottom.

Copy-paste example 2: Geometric proof animation

This example animates a classic geometric construction: proving that the angles of a triangle sum to 180 degrees. It constructs a triangle, labels the angles, then visually folds the angles into a straight line. This is the kind of animation that makes abstract proofs tangible for students and reviewers.

// Geometric proof: Angles of a triangle sum to 180 degrees

// Define triangle vertices
const A = [-2, -1.5, 0];
const B = [2, -1.5, 0];
const C = [0, 2, 0];

// Create the triangle
const triangle = new Polygon(A, B, C, {
color: WHITE,
strokeWidth: 3
});

// Create angle arcs at each vertex
const angleA = new Arc({
radius: 0.5,
startAngle: Math.atan2(B[1] - A[1], B[0] - A[0]),
angle: 0.7,
color: YELLOW
}).moveTo([A[0] + 0.3, A[1] + 0.2, 0]);

const angleB = new Arc({
radius: 0.5,
startAngle: Math.atan2(C[1] - B[1], C[0] - B[0]),
angle: 0.6,
color: BLUE
}).moveTo([B[0] - 0.3, B[1] + 0.2, 0]);

const angleC = new Arc({
radius: 0.5,
startAngle: Math.PI + Math.atan2(A[1] - C[1], A[0] - C[0]),
angle: 0.8,
color: RED
}).moveTo([C[0] - 0.15, C[1] - 0.25, 0]);

// Labels
const labelA = new Text("a", { color: YELLOW, fontSize: 22 })
.moveTo([A[0] + 0.7, A[1] + 0.5, 0]);
const labelB = new Text("b", { color: BLUE, fontSize: 22 })
.moveTo([B[0] - 0.7, B[1] + 0.5, 0]);
const labelC = new Text("c", { color: RED, fontSize: 22 })
.moveTo([C[0] + 0.3, C[1] - 0.5, 0]);

const vertexLabels = new Tex("A", { color: WHITE })
.moveTo([-2.4, -1.9, 0]);
const vertexLabelB = new Tex("B", { color: WHITE })
.moveTo([2.4, -1.9, 0]);
const vertexLabelC = new Tex("C", { color: WHITE })
.moveTo([0, 2.5, 0]);

// Title
const title = new Text("Angles in a Triangle Sum to 180\u00B0", {
color: YELLOW,
fontSize: 26
}).moveTo([0, 3.5, 0]);

// Step 1: Draw the triangle
await scene.play(new Write(title));
await scene.wait(0.5);
await scene.play(new Create(triangle));
await scene.play(
new FadeIn(vertexLabels),
new FadeIn(vertexLabelB),
new FadeIn(vertexLabelC)
);
await scene.wait(0.5);

// Step 2: Show the angles
await scene.play(
new Create(angleA),
new Create(angleB),
new Create(angleC)
);
await scene.play(
new FadeIn(labelA),
new FadeIn(labelB),
new FadeIn(labelC)
);
await scene.wait(1);

// Step 3: Show the straight line proof
const straightLine = new Line([-3, -3, 0], [3, -3, 0], {
color: WHITE,
strokeWidth: 2
});

const proofAngle1 = new Arc({
radius: 0.5,
startAngle: 0,
angle: 0.7,
color: YELLOW
}).moveTo([-1.5, -3, 0]);

const proofAngle2 = new Arc({
radius: 0.5,
startAngle: 0.7,
angle: 0.6,
color: BLUE
}).moveTo([0, -3, 0]);

const proofAngle3 = new Arc({
radius: 0.5,
startAngle: 1.3,
angle: 0.8,
color: RED
}).moveTo([1.5, -3, 0]);

const proofLabel = new Text("a + b + c = 180\u00B0", {
color: GREEN,
fontSize: 28
}).moveTo([0, -4, 0]);

await scene.play(new Create(straightLine));
await scene.play(
new Transform(angleA, proofAngle1),
new Transform(angleB, proofAngle2),
new Transform(angleC, proofAngle3)
);
await scene.play(
new Transform(labelA, new Text("a", { color: YELLOW, fontSize: 22 }).moveTo([-1.5, -3.5, 0])),
new Transform(labelB, new Text("b", { color: BLUE, fontSize: 22 }).moveTo([0, -3.5, 0])),
new Transform(labelC, new Text("c", { color: RED, fontSize: 22 }).moveTo([1.5, -3.5, 0]))
);
await scene.wait(0.5);
await scene.play(new Write(proofLabel));
await scene.wait(2);

How this works:

  1. Three vertices define the triangle. The Polygon constructor connects them with line segments.
  2. Arc objects represent the interior angles at each vertex, calculated using Math.atan2 for proper positioning.
  3. Text labels identify each angle with a distinct color.
  4. The animation progresses through three phases: drawing the triangle, highlighting the angles, and then transforming those angles onto a straight line to demonstrate the 180-degree sum.
  5. Color coding (yellow, blue, red) makes it easy to track which angle maps where during the transformation.

Customization tips:

  • Change the vertex coordinates to animate different triangle shapes.
  • Adapt this pattern for other geometric proofs: the Pythagorean theorem, circle theorems, or congruence proofs.
  • Add scene.play(new Indicate(mobject)) calls to highlight specific elements before transforming them.
  • Use MathTex for formal proof statements instead of plain Text for a more mathematical look.

Additional animation patterns

Beyond equations and geometric proofs, Manim for Confluence supports a wide range of technical animation patterns. Here are several you can adapt for your own documentation.

Shape transformations

The template system includes a Basic template that demonstrates the core transformation workflow: creating a circle, morphing it into a square, then into a triangle. This pattern generalizes to any mobject-to-mobject transformation:

const circle = new Circle({ radius: 1.5, color: BLUE });
const square = new Square({ sideLength: 2.5, color: RED });
const triangle = new Triangle({ color: GREEN });

await scene.play(new Create(circle));
await scene.wait(0.5);
await scene.play(new Transform(circle, square));
await scene.wait(0.5);
await scene.play(new Transform(circle, triangle));
await scene.wait(1);

The Transform animation handles interpolation automatically -- it matches the vertices of the source and target mobjects and animates the transition between them.

Graph and function plotting

Use NumberPlane to create a coordinate grid, then plot functions with parametric curves:

const axes = new NumberPlane({
xRange: [-5, 5, 1],
yRange: [-3, 3, 1],
backgroundLineColor: GREY,
axisColor: WHITE
});

const label = new Text("f(x) = sin(x)", {
color: YELLOW,
fontSize: 22
}).moveTo([0, 3, 0]);

await scene.play(new Create(axes));
await scene.play(new Write(label));

// Trace the sine curve
const curve = axes.plot(Math.sin, {
color: BLUE,
strokeWidth: 3
});

const dot = new Dot(axes.coordsToPoint(0, 0), { color: RED });
await scene.play(new Create(dot));
await scene.play(new Create(curve), new MoveToTarget(dot));
await scene.wait(2);

This pattern is useful for visualizing mathematical functions, comparing graphs, and demonstrating calculus concepts like derivatives and integrals.

ValueTracker for parametric animation

ValueTracker is Manim's way of creating time-dependent animations. It drives a value from one number to another, and you can use that value to control the position, scale, rotation, or color of any mobject:

const tracker = new ValueTracker(0);

const dot = new Dot([0, 0, 0], { color: YELLOW, radius: 0.15 });
const label = new MathTex("x = 0").moveTo([0, -2, 0]);

// Animate x from -3 to 3
tracker.addValueChangeListener((val) => {
const x = val;
dot.moveTo([x, Math.sin(x), 0]);
label.setText(`x = ${x.toFixed(2)}`);
});

await scene.play(new Increment(tracker, -3, { runTime: 0.001 }));
await scene.play(new Increment(tracker, 6, { runTime: 4 }));

The Moving Angle template in the toolbar uses this exact pattern. Load it to see a complete working example.

Rendering and playback

Understanding how the rendering pipeline works helps you optimize animations for the best viewer experience.

Browser-based rendering

Manim for Confluence renders animations entirely in the browser. When a viewer loads a Confluence page containing a Manim macro, the browser downloads the scene code, executes it using a built-in rendering engine, and plays the resulting frames as a smooth animation. This approach has several advantages:

  • No server-side rendering. The animation does not need to be pre-rendered or converted to video. Changes to the code take effect immediately on the next page load.
  • Cross-platform compatibility. The animation works in any modern browser without plugins. Chrome, Firefox, Safari, and Edge are all supported.
  • Responsive playback controls. Viewers can play, pause, and scrub through the animation. If autoplay is disabled, the viewer decides when to start watching.

Performance considerations

Complex animations with many mobjects or long run times can affect browser performance. Follow these guidelines to keep animations smooth:

  • Limit mobject count. Keep the number of simultaneous on-screen mobjects under 100 for optimal frame rates. If you need more elements, consider splitting the animation into multiple sequential phases.
  • Minimize simultaneous animations. Playing five Transform animations at once is more demanding than playing them sequentially. Use scene.play() with multiple animations only when they truly need to happen in parallel.
  • Use appropriate canvas dimensions. A 1000x450 canvas renders faster than a 4000x2000 canvas. Match the canvas size to the content, not the screen size.
  • Keep animations short. For educational content, 10 to 30 seconds is the sweet spot. Longer animations can be split across multiple macros on the same page.

Playback settings

The advanced playback settings let you fine-tune the viewing experience:

  • Autoplay is ideal for embedded animations that support surrounding text. Viewers see the animation start automatically as they scroll to it.
  • Disable autoplay for interactive demonstrations where the viewer should read instructions first, then click play.
  • Playback speed at 0.5x is useful for complex animations where viewers need to study each frame. Use 1.5x or 2x for simple transitions that do not need real-time pacing.
  • Controls position matters for layout. Place controls at bottom-right for left-aligned text content, or top-left for right-aligned layouts. The goal is to keep controls visible without overlapping important animation content.

Troubleshooting common issues

When animations do not render as expected, check these common causes:

"Loading animation..." appears but nothing plays. The macro has not been configured yet. Click the macro to open the editor, add animation code, and save.

The animation throws an error in the preview. Open the browser console for details. The most common causes are typos in class names (for example, Circel instead of Circle) and missing await before scene.play() calls. Every scene.play() and scene.wait() must be preceded by await.

The preview does not update after code changes. The preview refreshes automatically on code changes. If it appears stuck, change the canvas width by 1 pixel and change it back. This forces a full remount of the preview component.

The animation looks cut off or misaligned. Check your canvas dimensions. If your mobjects extend beyond the default 800x450 canvas, increase the width and height in the toolbar. Also verify that your moveTo() coordinates are within the visible range.

LaTeX equations do not render correctly. Ensure that your LaTeX syntax is valid. Common issues include unescaped special characters and mismatched braces. Test your LaTeX in the preview before publishing.

For additional help, click the ? (Help) button in the macro configuration panel. It opens the full user documentation inline, so you can reference it without leaving the editor.

Best practices for math animations in Confluence

Start simple and iterate

Begin with a template or a minimal animation that demonstrates your core concept. Get the basic shape or equation on screen first, then add complexity incrementally. This iterative approach is faster than trying to write a complex animation in one pass, and the live preview makes it easy to verify each change.

Annotate with text and labels

Mathematical animations are most effective when each visual element is labeled. Use Text for plain labels, Tex for mathematical notation, and MathTex for formatted equations. Place labels near their associated mobjects using moveTo() or nextTo() positioning.

Use color intentionally

Color serves two purposes in math animations: distinguishing between elements and highlighting changes. Assign distinct colors to different mathematical objects (the triangle is white, the angles are yellow, blue, and red). Use bright colors like YELLOW or GREEN to draw attention to elements that are changing or being introduced.

Keep animations focused

Each animation should illustrate one concept. If you need to show multiple concepts, use separate macros on the same page rather than cramming everything into one long animation. A page with three 15-second animations is more effective than a page with one 45-second animation, because viewers can re-watch specific parts independently.

Write descriptive page content around the animation

The animation is a visual aid, not a replacement for written explanation. Surround each Manim macro with text that explains what the viewer is about to see, what to pay attention to, and what the result means. This gives context to viewers who skim the page and provides searchable text for Confluence's full-text index.

Version your animations with page history

Because Manim animations are stored as code in the macro, Confluence page history tracks every change. When you update an animation, the previous version is preserved. This is especially useful in educational contexts where curriculum evolves over time -- you can always revert to a previous version if an update introduces confusion.

Security and permissions

Manim for Confluence is a Forge app, which means it runs inside Atlassian's sandboxed infrastructure. The animation code executes within a secure iframe in the viewer's browser. It cannot access Confluence page content, user data, or external network resources. This sandbox model ensures that embedding animation code on shared pages is safe for all viewers.

For a deeper discussion of plugin security in Confluence, read our guide on using plugins safely.

Who should use Manim for Confluence

Manim for Confluence is built for teams and individuals who communicate technical concepts through documentation:

  • Engineering teams documenting algorithms, data structures, and system behavior. An animation that shows a hash table resizing or a binary tree rebalancing is more effective than a static diagram.
  • Educators and trainers creating internal learning materials. Walk students through derivations, constructions, and proofs step by step.
  • Data scientists and analysts explaining statistical concepts. Animate confidence intervals converging, distributions transforming, and regression lines fitting.
  • Product managers communicating technical requirements. Show developers exactly how a mathematical model should behave rather than describing it in prose.
  • Technical writers enriching documentation with visual explanations. A 10-second animation can replace a full page of written description for spatial or dynamic concepts.

Read our roundup of the best Confluence apps for developers to see how Manim for Confluence fits alongside other tools in a modern Confluence workflow.

Mathematical animations turn abstract concepts into visual experiences. With Manim for Confluence, those experiences live directly in your documentation -- searchable, versioned, and accessible to everyone on your team. Install the app from the Atlassian Marketplace, paste one of the examples above into a Confluence page, and start bringing your technical content to life.