Manim Visualizer
Creates animated visualizations using Manim (3Blue1Brown's animation engine).
Quick Start
bash
# Install manim pip install manim # Generate visualization python scripts/visualize.py explore --type=workflow
Visualization Types
1. Workflow Animation
Shows skill execution phases as animated flowchart.
python
# Input: SkillMetadata with phases
# Output: workflow-{skill}.mp4
Phases flow left-to-right with:
- Phase boxes appearing sequentially
- Tool icons animating in
- Parallel phases shown side-by-side
- Completion checkmarks
2. Agent Spawning
Visualizes parallel agent spawning from Task tool.
python
# Shows: # - Central orchestrator # - Agents spawning outward # - Parallel execution lines # - Results merging back
3. Architecture Diagram
Static-to-animated architecture visualization.
python
# Components: # - Boxes for services/modules # - Arrows for data flow # - Highlights for focus areas
Output Specs
| Type | Resolution | Duration | FPS |
|---|---|---|---|
| workflow | 1920x400 | 5-10s | 30 |
| agents | 1920x600 | 3-5s | 30 |
| architecture | 1920x1080 | 5-8s | 30 |
Integration with Remotion
Manim outputs are imported as overlays:
tsx
<Sequence from={hookEnd} durationInFrames={150}>
<OffthreadVideo src={staticFile("manim/workflow.mp4")} />
</Sequence>
Color Palette
Matches OrchestKit branding:
- •Primary: #8b5cf6 (purple)
- •Success: #22c55e (green)
- •Warning: #f59e0b (amber)
- •Info: #06b6d4 (cyan)
- •Background: #0a0a0f (dark)
Related Skills
- •
remotion-composer: Combines Manim MP4 outputs with terminal recordings - •
demo-producer: Full demo pipeline orchestration - •
terminal-demo-generator: Terminal recordings that pair with Manim animations - •
video-storyboarding: Scene planning before animation creation