scene.tsx

import { makeScene2D } from '@motion-canvas/2d/lib/scenes';
import { createRef } from '@motion-canvas/core/lib/utils';
import { MathTex } from '../components/manim_tex';
import { all, chain, waitFor } from '@motion-canvas/core/lib/flow';
import chroma from 'chroma-js';

export default makeScene2D(function* (view) {
  let tex = createRef<MathTex>();
  view.add(<MathTex tex={""} scale={0.25} currentColor={chroma("white")} ref={tex} />);

  yield;

  tex().tex("\\text{Hello!}");
  yield* tex().fadeIn(0.8);
  yield* waitFor(0.2);
  yield* tex().fadeOut(0.5);

  tex().tex("(a + b)^2");
  yield* tex().fadeIn(0.8);
  yield* waitFor(1);

  yield* tex().transform(x => {
    x.tex("(a + b)^2 = (a + b)(a + b)");
    x.scale(0.15);
  }, 1);

  yield* waitFor(2);

  yield* tex().transform(x => {
    x.tex(`\\begin{align*}(a + b)(a+b) = &
             \\\\= a\\cdot a + a \\cdot b + b \\cdot a + b \\cdot b &
             \\end{align*}`);
  }, 1);

  yield* waitFor(2);

  yield* tex().transform(x => {
    x.tex(`\\begin{align*}(a + b)(a+b) = &
             \\\\= a^2 + ab + ba + b^2
             \\end{align*}`);
  }, 1);

  yield* waitFor(2);

  yield* all(...tex().findAll(["a squared", "b squared"])().map(x => chain(
    x.currentColor(chroma("yellow"), 1),
    x.currentColor(chroma("white"), 1),
  )))

  yield* all(...tex().findAll(["a b", "b a"])().map(x => chain(
    x.currentColor(chroma("yellow"), 1),
    x.currentColor(chroma("white"), 1),
  )))

  yield* tex().transform(x => {
    x.tex(`\\begin{align*} (a + b)(a+b) = &
             \\\\= a^2 + 2ab + b^2
             \\end{align*}`);
  }, 1);

  yield* all(...tex().findAll(["2"])().map(x => chain(
    x.rotation(15, 0.5),
    x.rotation(-15, 0.5),
    x.rotation(0, 0.5),
  )))

  yield* waitFor(3);

  yield* tex().fadeOut(1);
});