manim-web-demo

demo.js

const player = new manim.Player(container, {
    width,
    height,
    autoPlay: true,
    backgroundColor: manim.BLACK,
});

player.sequence(async (scene) => {
    const circle = new manim.Circle({ radius: 1.5, color: manim.BLUE, fillOpacity: 1 });
    await scene.play(new manim.Create(circle));
    await scene.wait(0.5);

    const square = new manim.Square({ sideLength: 3, color: manim.RED, fillOpacity: 1 });
    await scene.play(new manim.Transform(circle, square));
    await scene.play(new manim.Indicate(circle));

    const triangle = new manim.Triangle({ color: manim.GREEN, fillOpacity: 1 });
    triangle.scale(2);
    await scene.play(new manim.Transform(circle, triangle));
    await scene.play(new manim.Rotate(circle, { angle: Math.PI }));
    await scene.play(new manim.FadeOut(circle));

    const circle2 = new manim.Circle({ radius: 1, color: manim.YELLOW, fillOpacity: 1 });
    await scene.play(new manim.FadeIn(circle2));
    await scene.wait(1);
});