Manim Video
- 1.4k installs
- 238k repo stars
- Updated August 5, 2026
- affaan-m/ecc
This is a copy of manim-video by affaan-m - installs and ranking accrue to the original listing.
manim-video is a Claude Code skill that generates precise Manim animations for technical concepts, system diagrams, graphs, and product walkthroughs for developers who need motion-based explainers instead of talking-head
About
manim-video is an ECC-origin Claude Code skill for building reusable Manim explainers where motion, structure, and clarity matter more than photorealism. It guides agents to scaffold scenes for graphs, workflows, architecture diagrams, metric progressions, and short product or launch explainers suitable for X posts or landing pages. The skill integrates with the wider ECC video stack when a project needs compositing or handoff beyond raw Manim output. Developers reach for manim-video when a concept is inherently spatial or temporal and static screenshots fail to communicate behavior, topology, or step-by-step flow.
- Creates short 16:9 MP4 technical explainer animations
- 7-step workflow: thesis → 3-6 scenes → outline → code → render → polish → handoff
- Outputs include MP4, thumbnail, storyboard, and scene plan
- Designed for graphs, workflows, architecture diagrams, and metric progressions
- Hands off to video-editing or remotion-video-creation when further compositing is required
Manim Video by the numbers
- 1,370 all-time installs (skills.sh)
- +84 installs in the week ending Aug 5, 2026 (Skillselion tracking)
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/affaan-m/ecc --skill manim-videoAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.4k |
|---|---|
| repo stars | ★ 238k |
| Last updated | August 5, 2026 |
| Repository | affaan-m/ecc ↗ |
How do you animate system diagrams with Manim?
Generate precise animated explainers for technical concepts, system diagrams, graphs, and product walkthroughs using Manim.
Who is it for?
Developers documenting architecture, algorithms, or product flows who want programmatic, reproducible motion graphics instead of manual video editing.
Skip if: Developers who need photorealistic footage, live-action talking heads, or React-based programmatic video should use Remotion or traditional editors instead.
When should I use this skill?
The user asks for a technical explainer animation, animated graph, workflow diagram, architecture walkthrough, or short launch video built with Manim.
What you get
Reusable Manim scene modules, rendered explainer animations, and optional handoff into the ECC video pipeline.
- Manim scene source files
- Rendered explainer animation
By the numbers
- Integrates with the ECC multi-skill video stack for post-Manim handoff
Files
Manim Video
Use Manim for technical explainers where motion, structure, and clarity matter more than photorealism.
When to Activate
- the user wants a technical explainer animation
- the concept is a graph, workflow, architecture, metric progression, or system diagram
- the user wants a short product or launch explainer for X or a landing page
- the visual should feel precise instead of generically cinematic
Tool Requirements
manimCLI for scene renderingffmpegfor post-processing if neededvideo-editingfor final assembly or polishremotion-video-creationwhen the final package needs composited UI, captions, or additional motion layers
Default Output
- short 16:9 MP4
- one thumbnail or poster frame
- storyboard plus scene plan
Workflow
1. Define the core visual thesis in one sentence. 2. Break the concept into 3 to 6 scenes. 3. Decide what each scene proves. 4. Write the scene outline before writing Manim code. 5. Render the smallest working version first. 6. Tighten typography, spacing, color, and pacing after the render works. 7. Hand off to the wider video stack only if it adds value.
Scene Planning Rules
- each scene should prove one thing
- avoid overstuffed diagrams
- prefer progressive reveal over full-screen clutter
- use motion to explain state change, not just to keep the screen busy
- title cards should be short and loaded with meaning
Network Graph Default
For social-graph and network-optimization explainers:
- show the current graph before showing the optimized graph
- distinguish low-signal follow clutter from high-signal bridges
- highlight warm-path nodes and target clusters
- if useful, add a final scene showing the self-improvement lineage that informed the skill
Render Conventions
- default to 16:9 landscape unless the user asks for vertical
- start with a low-quality smoke test render
- only push to higher quality after composition and timing are stable
- export one clean thumbnail frame that reads at social size
Reusable Starter
Use assets/network_graph_scene.py as a starting point for network-graph explainers.
Example smoke test:
manim -ql assets/network_graph_scene.py NetworkGraphExplainerOutput Format
Return:
- core visual thesis
- storyboard
- scene outline
- render plan
- any follow-on polish recommendations
Related Skills
video-editingfor final polishremotion-video-creationfor motion-heavy post-processing or compositingcontent-enginewhen the animation is part of a broader launch
from manim import DOWN, LEFT, RIGHT, UP, Circle, Create, FadeIn, FadeOut, Scene, Text, VGroup, CurvedArrow
class NetworkGraphExplainer(Scene):
def construct(self):
title = Text("Connections Optimizer", font_size=40).to_edge(UP)
subtitle = Text("Prune low-signal follows. Strengthen warm paths.", font_size=20).next_to(title, DOWN)
you = Circle(radius=0.45, color="#4F8EF7").shift(LEFT * 4 + DOWN * 0.5)
you_label = Text("You", font_size=22).move_to(you.get_center())
stale_a = Circle(radius=0.32, color="#7A7A7A").shift(LEFT * 1.6 + UP * 1.2)
stale_b = Circle(radius=0.32, color="#7A7A7A").shift(LEFT * 1.2 + DOWN * 1.4)
bridge = Circle(radius=0.38, color="#21A179").shift(RIGHT * 0.2 + UP * 0.2)
target = Circle(radius=0.42, color="#FF9F1C").shift(RIGHT * 3.2 + UP * 0.7)
new_target = Circle(radius=0.42, color="#FF9F1C").shift(RIGHT * 3.0 + DOWN * 1.4)
stale_a_label = Text("stale", font_size=18).move_to(stale_a.get_center())
stale_b_label = Text("noise", font_size=18).move_to(stale_b.get_center())
bridge_label = Text("bridge", font_size=18).move_to(bridge.get_center())
target_label = Text("target", font_size=18).move_to(target.get_center())
new_target_label = Text("add", font_size=18).move_to(new_target.get_center())
edge_stale_a = CurvedArrow(you.get_right(), stale_a.get_left(), angle=0.2, color="#7A7A7A")
edge_stale_b = CurvedArrow(you.get_right(), stale_b.get_left(), angle=-0.2, color="#7A7A7A")
edge_bridge = CurvedArrow(you.get_right(), bridge.get_left(), angle=0.0, color="#21A179")
edge_target = CurvedArrow(bridge.get_right(), target.get_left(), angle=0.1, color="#21A179")
edge_new_target = CurvedArrow(bridge.get_right(), new_target.get_left(), angle=-0.12, color="#21A179")
self.play(FadeIn(title), FadeIn(subtitle))
self.play(
Create(you),
FadeIn(you_label),
Create(stale_a),
Create(stale_b),
Create(bridge),
Create(target),
FadeIn(stale_a_label),
FadeIn(stale_b_label),
FadeIn(bridge_label),
FadeIn(target_label),
)
self.play(Create(edge_stale_a), Create(edge_stale_b), Create(edge_bridge), Create(edge_target))
optimize = Text("Optimize the graph", font_size=24).to_edge(DOWN)
self.play(FadeIn(optimize))
self.play(FadeOut(stale_a), FadeOut(stale_b), FadeOut(stale_a_label), FadeOut(stale_b_label), FadeOut(edge_stale_a), FadeOut(edge_stale_b))
self.play(Create(new_target), FadeIn(new_target_label), Create(edge_new_target))
final_group = VGroup(you, you_label, bridge, bridge_label, target, target_label, new_target, new_target_label)
self.play(final_group.animate.shift(UP * 0.1))
self.wait(1)
Related skills
Remotion Best PracticesGet Remotion-specific coding guidance that prevents common video rendering mistakes when creating animated React videos.451k4.2k
Ai Video GenerationGenerate videos using 40+ AI models including Veo, Seedance, and others via inference.sh442k665Ai Image GenerationGenerate images using 50+ AI models including FLUX, Gemini, and Replicate via inference.sh441k665Ai Avatar VideoGenerate videos featuring AI avatars for product demos, tutorials, marketing, or explainers441k665Remotion RenderRender videos programmatically using React components and Remotion framework441k665
Remotion RenderGenerate high-quality MP4 videos from React code using Remotion inside an AI coding agent.363k665How it compares
Choose manim-video when Python Manim scenes and diagram-first motion are the deliverable; pick React Remotion skills for component-driven MP4 pipelines.
FAQ
What does manim-video generate?
manim-video guides Claude Code to produce Manim scene code and animations for technical concepts, graphs, system diagrams, and product walkthroughs. Output is motion-focused explainers that can integrate with the ECC video stack for further production steps.
When should developers use manim-video over Remotion?
manim-video fits Python Manim workflows where mathematical layout, graph animation, and diagram clarity are primary. Remotion suits React-component video pipelines; manim-video targets ECC-style technical explainers without a React runtime.