Manim

Manim plays a manim-web animation. The scene is defined by a build prop — a function that receives the manim-web module (imported internally by the component) and the recording proxy (play/wait) — so the manim code lives with the component and you never import manim-web yourself. It is client-only (the manim-web chunk is lazy-imported on mount). Install the optional peer with pnpm add manim-web.

Loading animation…

// apps/docs/src/components/examples/manim/default/react.tsx
import { Manim } from '@cloudvoyant/helical-react';

export default function ReactManimDefault() {
  return (
    <Manim
      width={640}
      height={360}
      build={async (manim, scene) => {
        const { Circle, Create, Square, Transform } = manim;
        const circle = new Circle({ radius: 1.5, color: '#f97316' });
        await scene.play(new Create(circle));
        await scene.wait(0.5);
        await scene.play(new Transform(circle, new Square({ sideLength: 2.5, color: '#38bdf8' })));
      }}
    />
  );
}

<!-- apps/docs/src/components/examples/manim/default/svelte.svelte -->
<script lang="ts">
  import { Manim } from '@cloudvoyant/helical-svelte';
</script>

<Manim
  width={640}
  height={360}
  build={async (manim, scene) => {
    const { Circle, Create, Square, Transform } = manim;
    const circle = new Circle({ radius: 1.5, color: '#f97316' });
    await scene.play(new Create(circle));
    await scene.wait(0.5);
    await scene.play(new Transform(circle, new Square({ sideLength: 2.5, color: '#38bdf8' })));
  }}
/>

Examples

API Reference

Prop	Type	Default	Description
`build`	`(manim, scene) => Promise<void> \| void`	—	Scene builder; `manim` is the internally-imported module, `scene` the recording proxy. Required.
`width` / `height`	`number`	`800` / `450`	Aspect-ratio components.
`caption`	`string`	—	Optional caption.