Remotion vs Manim: Which Should You Use for Math and Science Animation?

If you have ever watched a 3Blue1Brown video and thought “I want to make explainers like that,” you have almost certainly run into Manim — the Python animation engine Grant Sanderson built for his own channel. And if you are a web developer who builds video programmatically, you have probably run into Remotion, the React-based framework that renders JSX components into MP4 files.

Both tools generate video from code, but they were built for different problems, in different ecosystems, with different animation models. This comparison covers language, animation model, math notation, and rendering — and ends with what migrating a Manim-style explainer to React actually involves.

---

What Each Tool Was Built For

Manim exists to animate mathematics. It began as the personal tooling behind the 3Blue1Brown YouTube channel and was later forked into the community-maintained Manim Community Edition (Manim CE), which is what most people install today. Its primitives are mathematical: coordinate axes, function plots, geometric shapes, LaTeX equations, vector fields, and transformations between them. The famous “morph one equation into another” effect is a one-liner.

Remotion exists to make video a web development problem. Every frame is a React component render, captured by headless Chromium and encoded into a video file. Its primitives are the web’s primitives: HTML, CSS, SVG, canvas, and the entire npm ecosystem. It was built for programmatic, data-driven video — personalized variants, API-triggered renders, web skills reused for motion design.

The shortest version of this article: Manim is a math animation engine that outputs video. Remotion is a video engine that renders anything a browser can display — including math.

---

Language and Ecosystem: Python vs React/TypeScript

Manim is Python. You write classes that extend Scene, and the library leans on NumPy for geometry. If your background is scientific computing, data science, or academia, this is home turf — the same language you already use for analysis can drive your animations, and passing a NumPy array straight into a plot is natural.

Remotion is React and TypeScript. Compositions are components, animation state derives from the current frame, and props flow in the way they do in any React app. If your background is web development, the learning curve is shallow: you are writing the JSX you write every day, with hooks like useCurrentFrame() and useVideoConfig() replacing browser events.

The ecosystem difference matters more than the syntax difference. In Manim, you get math-focused plugins (voiceover helpers, slide tooling, physics extensions). In Remotion, you get npm: charting libraries, three.js, markdown renderers, any React component you have ever written. A styled table, a syntax-highlighted code snippet, or a UI mockup renders natively in the browser model — and is genuinely painful to build out of Manim mobjects.

---

Animation Models Compared: Scenes and Mobjects vs Frames and Components

The deepest difference between the tools is how they think about time.

Manim is imperative and sequential. Inside a Scene subclass’s construct(), each self.play(...) runs to completion before the next begins:

from manim import *

class SineIntro(Scene):
    def construct(self):
        axes = Axes(x_range=[0, 10], y_range=[-1.5, 1.5])
        curve = axes.plot(lambda x: np.sin(x), color=BLUE)
        label = MathTex(r"f(x) = \sin(x)").to_corner(UR)

        self.play(Create(axes), run_time=2)
        self.play(Create(curve), Write(label), run_time=3)
        self.wait()

You describe what happens next and Manim owns the timeline — it reads like a screenplay, a great fit for linear explainers.

Remotion is declarative and frame-based. There is no “play” — there is only the current frame number, and your component is a pure function of it. Here is the equivalent sine curve, drawn progressively with SVG:

import {
  AbsoluteFill,
  useCurrentFrame,
  useVideoConfig,
  interpolate,
  Easing,
} from 'remotion';

const buildSinePath = (progress: number): string => {
  const totalPoints = 200;
  const visible = Math.floor(totalPoints * progress);
  const commands: string[] = [];
  for (let i = 0; i <= visible; i++) {
    const t = i / totalPoints;
    const x = 160 + t * 1600;
    const y = 540 - Math.sin(t * Math.PI * 4) * 220;
    commands.push(`${i === 0 ? 'M' : 'L'} ${x} ${y}`);
  }
  return commands.join(' ');
};

export const SineWaveDraw: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const progress = interpolate(frame, [0, 3 * fps], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.bezier(0.33, 1, 0.68, 1),
  });

  return (
    <AbsoluteFill style={{ backgroundColor: '#0d1117' }}>
      <svg viewBox="0 0 1920 1080">
        <line x1={160} y1={540} x2={1760} y2={540} stroke="#3d444d" strokeWidth={2} />
        <line x1={160} y1={100} x2={160} y2={980} stroke="#3d444d" strokeWidth={2} />
        <path
          d={buildSinePath(progress)}
          stroke="#58a6ff"
          strokeWidth={6}
          fill="none"
          strokeLinecap="round"
        />
      </svg>
    </AbsoluteFill>
  );
};

Scenes are sequenced with <Sequence>, which offsets when content appears:

import { AbsoluteFill, Sequence, useVideoConfig } from 'remotion';

export const SineExplainer: React.FC = () => {
  const { fps } = useVideoConfig();

  return (
    <AbsoluteFill style={{ backgroundColor: '#0d1117' }}>
      <Sequence durationInFrames={3 * fps}>
        <TitleCard title="Why Sine Waves Are Everywhere" />
      </Sequence>
      <Sequence from={3 * fps} durationInFrames={6 * fps}>
        <SineWaveDraw />
      </Sequence>
      <Sequence from={9 * fps}>
        <EquationReveal tex={'f(x) = \\sin(x)'} />
      </Sequence>
    </AbsoluteFill>
  );
};

The trade-off: Manim’s imperative model is more natural for “then this, then that” narration-driven explainers. Remotion’s frame-based model is more natural for parallel, overlapping motion and for anything driven by data — and because every frame is a pure function of the frame number, scrubbing, previewing, and distributed rendering come for free.

---

Math Notation: LaTeX Support in Manim vs KaTeX in Remotion

For a math explainer, notation quality is non-negotiable — and this is Manim’s strongest card.

Manim renders real LaTeX. MathTex and Tex mobjects compile through an actual LaTeX distribution (TeX Live or MiKTeX must be installed on your machine), so anything LaTeX can typeset, Manim can animate. Equations become vector glyphs treated as mobjects, so TransformMatchingTex can morph one equation into another, moving shared symbols smoothly — the signature 3Blue1Brown “the equation rearranges itself” move, built in.

The cost is the dependency: a multi-gigabyte LaTeX install, occasional dvisvgm issues, and slower iteration when equations recompile.

Remotion uses browser-based math rendering — typically KaTeX, installed from npm and bundled with your project (no CDN involved; KaTeX ships its fonts inside the package, so the output is self-contained):

import {
  AbsoluteFill,
  useCurrentFrame,
  useVideoConfig,
  spring,
  interpolate,
} from 'remotion';
import katex from 'katex';
import 'katex/dist/katex.min.css';

export const EquationReveal: React.FC<{ tex: string }> = ({ tex }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const enter = spring({
    frame,
    fps,
    config: { mass: 0.6, stiffness: 120, damping: 14 },
  });
  const translateY = interpolate(enter, [0, 1], [40, 0]);
  const opacity = interpolate(enter, [0, 1], [0, 1], {
    extrapolateRight: 'clamp',
  });

  const html = katex.renderToString(tex, {
    displayMode: true,
    throwOnError: false,
  });

  return (
    <AbsoluteFill
      style={{
        backgroundColor: '#0d1117',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <div
        style={{
          fontSize: 72,
          color: '#e6edf3',
          transform: `translateY(${translateY}px)`,
          opacity,
        }}
        dangerouslySetInnerHTML={{ __html: html }}
      />
    </AbsoluteFill>
  );
};

KaTeX renders instantly and covers the large majority of common notation, but it is a subset of LaTeX — obscure packages and exotic environments are out. More importantly, KaTeX output is styled HTML, not individually addressable glyph mobjects. Animating a whole equation (fade, slide, scale, highlight) is trivial; morphing between two equations symbol-by-symbol requires splitting the expression into fragments you animate separately. If per-symbol equation choreography is the core of your video, Manim wins this section outright.

---

Rendering Pipelines, Speed, and Output Formats

Manim renders with its Cairo backend by default (ManimGL and Manim CE’s OpenGL renderer trade fidelity guarantees for real-time preview) and stitches frames into video with FFmpeg. The CLI is quality-flag driven — manim -pql scene.py SineIntro for fast low-res previews, -qh for 1080p60 production renders. Partial movie files are cached, so re-rendering an untouched scene is fast. Output is MP4 by default, with GIF and transparent formats available.

Rendering is local and single-machine — completely fine for a render-one-video-and-upload-it YouTube workflow, but there is no first-party story for cloud-scale rendering or generating many variants per day.

Remotion renders through headless Chromium and encodes with FFmpeg. Output covers H.264/H.265 MP4, WebM, ProRes, GIF, image sequences, and transparent video. Three things stand out against Manim:

1. Remotion Studio (npx remotion studio) gives you a scrubbable timeline preview with live-editable props — an iteration loop Manim’s render-and-watch cycle cannot match.
2. Distributed rendering via Remotion Lambda splits one render across many cloud functions, and the same composition can be rendered from an API with different props each time — the backbone of automated pipelines, covered in programmatic video with React and Remotion.
3. The Player lets the identical composition run interactively inside a web page before any file is rendered.

For one beautiful video, rendering speed differences are noise. For a system that produces videos, Remotion’s pipeline is in a different category.

---

When Manim Wins / When Remotion Wins

Choose Manim when:

• The video is about mathematics: proofs, derivations, geometry, calculus visualizations
• You need full LaTeX and symbol-level equation morphing (TransformMatchingTex)
• You or your team live in Python and NumPy
• You are producing linear, narration-driven explainers for a channel, one video at a time
• Built-in mathematical objects (axes, vector fields, 3D surfaces) map directly onto your storyboard

Choose Remotion when:

• Math is one ingredient among many: charts, UI mockups, code snippets, branded layouts, mixed media
• You want data-driven or automated video — many variants, API-triggered renders, CI pipelines
• Your team already works in React/TypeScript and wants one skill set for web and video
• You need styling depth (typography, layout, gradients, blend modes) that CSS provides and mobjects do not
• The output must also live on the web as an interactive Player embed, not only as a file

A useful heuristic: if your reference is 3Blue1Brown, start with Manim. If it is a polished product explainer, a data story, or an educational series that needs to scale, start with Remotion — see educational and e-learning video production with Remotion.

---

Migrating a Manim-Style Explainer to React

Suppose you want to rebuild a Manim explainer in Remotion — to automate variants, or to fold it into a web product. The concepts translate more directly than you might expect:

Manim concept	Remotion equivalent
Scene + construct()	A composition component with <Sequence> blocks
self.play(Create(...))	interpolate() driving a progressive SVG path or clip
self.play(Write(tex))	KaTeX render + opacity/translate animation
run_time=2	Frame ranges: [0, 2 * fps]
rate_func=smooth	Easing.bezier(...) or a spring()
ValueTracker + updaters	Any value derived from useCurrentFrame()
Axes.plot(fn)	SVG path computed from the same function

The ValueTracker row is the pattern behind most “a point travels along the curve” animations. In Remotion, the frame is the value tracker:

import { useCurrentFrame, useVideoConfig, interpolate } from 'remotion';

// Rendered inside the plot's <svg> element alongside the axes and curve
export const MovingPoint: React.FC = () => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();

  // t sweeps 0 → 4π across the composition, like a ValueTracker
  const t = interpolate(frame, [0, durationInFrames - 1], [0, Math.PI * 4]);
  const x = 160 + (t / (Math.PI * 4)) * 1600;
  const y = 540 - Math.sin(t) * 220;

  return (
    <>
      <circle cx={x} cy={y} r={14} fill="#f0883e" />
      <text x={x + 24} y={y - 24} fill="#f0883e" fontSize={36}>
        {`sin(${t.toFixed(2)}) = ${Math.sin(t).toFixed(2)}`}
      </text>
    </>
  );
};

No updater registration, no mutable state — position and label are recomputed from the frame, which is exactly what makes renders parallelizable.

What does not translate cleanly: symbol-level equation morphs (redesign those moments as crossfades or staged reveals), Manim’s built-in 3D scene camera (reach for React Three Fiber instead), and layout helpers like next_to() and arrange() (use flexbox — frankly, an upgrade). Numeric readouts, bar charts, and counters port especially well; the techniques in data visualization animations in Remotion are the same ones you would use for a migrated math dashboard scene.

Budget the migration by scene type: plot-and-annotate scenes port in an hour or two each; equation-choreography scenes need rethinking, not translation.

---

Science and Education Template Packs for Remotion

Manim’s ecosystem has a visual tradition — a Manim video looks like a Manim video. In Remotion you start from a blank canvas: freedom, but also work.

Pre-built science and education templates close that gap. Instead of designing axes, annotation callouts, step-by-step reveals, and formula cards from scratch, you drop in components with tuned timing and typed props and focus on the content. Because they are ordinary Remotion compositions, they slot into the same automated pipelines — render one lesson or a hundred from the same template.

---

Summary Table

Factor	Manim	Remotion
Language	Python	React / TypeScript
Animation model	Imperative scenes (self.play)	Declarative, frame-based components
Math notation	Full LaTeX, symbol-level morphing	KaTeX/MathJax subset, block-level animation
Rendering	Local Cairo/OpenGL + FFmpeg	Headless Chromium, local or distributed (Lambda)
Preview	Render-and-watch (GL for real-time)	Remotion Studio with live props
Styling depth	Mobject attributes	Full CSS, SVG, canvas, npm ecosystem
Automation / variants	DIY scripting	First-class (APIs, props, cloud rendering)
Web embedding	Export a file	Interactive <Player> in any React app
Best for	Pure math explainers, one-off videos	Mixed-media education, data-driven video at scale

---

FAQ

Q: Can Remotion reproduce the 3Blue1Brown look?

Visually, largely yes — dark background, vector plots, and annotated equations are all straightforward with SVG and KaTeX. The hardest part is symbol-level equation morphing, which Manim gives you for free and Remotion requires you to hand-build.

Q: Does Manim require a LaTeX installation?

For Tex and MathTex objects, yes — a working LaTeX distribution such as TeX Live or MiKTeX. Plain Text objects render through Pango without LaTeX. KaTeX in Remotion has no system dependency; it installs from npm like any package.

Q: Can I use both in one project?

Yes — render equation-heavy segments in Manim as transparent video files, then composite them into a Remotion composition alongside branded layouts and data graphics via the <OffthreadVideo> component.

Q: What about MathJax instead of KaTeX in Remotion?

MathJax covers more LaTeX than KaTeX but is slower. For video rendering, KaTeX’s synchronous renderToString is the more predictable choice. Either way, bundle the library with your project rather than loading it from a CDN, so renders are deterministic and self-contained.

---

Skip the Blank Canvas

If you land on Remotion for your math or science content, RenderComp offers production-ready Remotion templates — animated charts, counters, step-by-step reveal layouts, and educational formats — each with TypeScript prop interfaces and editable source, ready to render on day one.

Browse the collection at rendercomp.com →