Communitygithub.com

assafkip/claude-video-editor

Manim Community Edition을 사용한 수학 및 기술 애니메이션 제작 파이프라인. 3Blue1Brown 스타일의 설명 영상, 알고리즘 시각화, 방정식 유도, 아키텍처 다이어그램, 데이터 스토리를 생성합니다. 사용자가 애니메이션 설명, 수학 애니메이션, 개념 시각화, 알고리즘 워크스루, 기술 설명 영상, 3Blue1Brown 스타일 영상 또는 기하학적/수학적 콘텐츠의 프로그래밍 방식 애니메이션을 요청할 때 사용합니다.

claude-video-editor란 무엇인가요?

이 기술은 Manim Community Edition을 활용하여 수학 및 기술 애니메이션을 제작하는 완전한 파이프라인입니다. 3Blue1Brown 스타일의 교육 영상, 알고리즘 시각화, 방정식 유도, 아키텍처 다이어그램, 데이터 스토리를 비롯한 다양한 유형의 애니메이션 설명 영상을 제작할 수 있습니다. 모든 장면에 일관된 색상 팔레트와 타이포그래피, 애니메이션 속도를 적용하며, 기하학적 직관을 먼저 보여준 후 수식을 제시하는 교육 영화의 창의적 기준을 따릅니다. Python 단일 스크립트 기반으로 브라우저, Node.js, GPU가 필요 없으며, 계획(plan.md) → 코딩(script.py) → 렌더링(manim) → 이어붙이기(ffmpeg) → 오디오(선택) → 검토의 6단계 파이프라인으로 구성됩니다. 각 장면은 독립적으로 렌더링 가능한 클래스로 작성되며, 저해상도(-ql)와 고해상도(-qh) 옵션을 제공하여 효율적인 반복 작업을 지원합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/assafkip/claude-video-editor/tree/HEAD/skills/video-use/skills/manim-video

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

Manim 영상 제작 파이프라인

창의적 기준

이것은 교육 영화입니다. 모든 프레임이 가르치고, 모든 애니메이션이 구조를 드러냅니다.

코드를 한 줄도 작성하기 전에, 이야기 흐름을 명확히 하세요. 이것이 어떤 오해를 바로잡는가? "아하 순간"은 무엇인가? 어떤 시각적 이야기가 시청자를 혼란에서 이해로 이끄는가? 사용자의 프롬프트는 출발점일 뿐입니다 — 교육적 야망을 가지고 해석하세요.

대수보다 기하학을 먼저. 도형을 먼저 보여주고, 방정식은 나중에 보여주세요. 시각적 기억은 상징적 기억보다 더 빠르게 인코딩됩니다. 시청자가 공식보다 기하학적 패턴을 먼저 볼 때, 방정식은 자연스럽게 이해됩니다.

첫 렌더링의 완성도는 협상 불가입니다. 출력물은 수정 작업 없이 시각적으로 명확하고 미학적으로 일관되어야 합니다. 만약 지저분해 보이거나, 타이밍이 나쁘거나, "AI가 만든 슬라이드"처럼 보인다면 잘못된 것입니다.

불투명도 계층화로 주의를 유도합니다. 모든 것을 최대 밝기로 보여주지 마세요. 기본 요소는 1.0, 맥락 요소는 0.4, 구조 요소(축, 격자)는 0.15로 설정하세요. 뇌는 시각적 현저성을 계층별로 처리합니다.

여유 시간. 모든 애니메이션 후에는 self.wait()가 필요합니다. 시청자는 방금 나타난 것을 흡수할 시간이 필요합니다. 한 애니메이션에서 다음 애니메이션으로 절대 서두르지 마세요. 핵심 장면 후 2초의 멈춤은 결코 낭비가 아닙니다.

일관된 시각적 언어. 모든 장면이 색상 팔레트, 일관된 타이포그래피 크기, 일치하는 애니메이션 속도를 공유합니다. 각 장면마다 무작위로 다른 색상을 사용하는 기술적으로 올바른 영상은 미학적 실패입니다.

사전 요구 사항

scripts/setup.sh를 실행하여 모든 종속성을 확인하세요. 필요 사항: Python 3.10+, Manim Community Edition v0.20+ (pip install manim), LaTeX (Linux: texlive-full, macOS: mactex), ffmpeg. 참조 문서는 Manim CE v0.20.1에서 테스트되었습니다.

모드

모드입력출력참조
개념 설명주제/개념기하학적 직관을 갖춘 애니메이션 설명references/scene-planning.md
방정식 유도수학 표현단계별 애니메이션 증명references/equations.md
알고리즘 시각화알고리즘 설명데이터 구조를 사용한 단계별 실행references/graphs-and-data.md
데이터 스토리데이터/지표애니메이션 차트, 비교, 카운터references/graphs-and-data.md
아키텍처 다이어그램시스템 설명연결과 함께 구축되는 구성 요소references/mobjects.md
논문 설명연구 논문핵심 발견 및 방법 애니메이션references/scene-planning.md
3D 시각화3D 개념회전하는 표면, 매개변수 곡선, 공간 기하학references/camera-and-3d.md

스택

프로젝트당 단일 Python 스크립트. 브라우저, Node.js, GPU가 필요하지 않습니다.

계층도구목적
핵심Manim Community Edition장면 렌더링, 애니메이션 엔진
수학LaTeX (texlive/MiKTeX)MathTex를 통한 방정식 렌더링
영상 I/Offmpeg장면 이어붙이기, 포맷 변환, 오디오 먹싱
TTSElevenLabs / Qwen3-TTS (선택)나레이션 음성

파이프라인

계획 --> 코딩 --> 렌더링 --> 이어붙이기 --> 오디오 (선택) --> 검토
  1. 계획 — 이야기 흐름, 장면 목록, 시각 요소, 색상 팔레트, 음성 대본을 포함한 plan.md 작성
  2. 코딩 — 장면당 하나의 클래스로 구성된 script.py 작성, 각 클래스는 독립적으로 렌더링 가능
  3. 렌더링 — 초고: manim -ql script.py Scene1 Scene2 ..., 제작: -qh
  4. 이어붙이기 — ffmpeg 장면 클립 연결하여 final.mp4 생성
  5. 오디오 (선택) — ffmpeg를 통해 음성 해설 및/또는 배경 음악 추가. references/rendering.md 참조
  6. 검토 — 미리보기 스틸 렌더링, 계획과 비교 확인, 조정

프로젝트 구조

project-name/
  plan.md                # 이야기 흐름, 장면 분석
  script.py              # 모든 장면이 포함된 단일 파일
  concat.txt             # ffmpeg 장면 목록
  final.mp4              # 이어붙인 출력물
  media/                 # Manim에 의해 자동 생성
    videos/script/480p15/

창의적 방향

색상 팔레트

팔레트배경기본보조강조사용 사례
클래식 3B1B#1C1C1C#58C4DD (파랑)#83C167 (초록)#FFFF00 (노랑)일반 수학/CS
따뜻한 학술#2D2B55#FF6B6B#FFD93D#6BCB77친근함
네온 테크#0A0A0A#00F5FF#FF00FF#39FF14시스템, 아키텍처
모노크롬#1A1A2E#EAEAEA#888888#FFFFFF미니멀리스트

애니메이션 속도

맥락run_time이후 self.wait()
제목/소개 등장1.5초1.0초
핵심 방정식 공개2.0초2.0초
변형/모핑1.5초1.5초
보조 레이블0.8초0.5초
FadeOut 정리0.5초0.3초
"아하 순간" 공개2.5초3.0초

타이포그래피 규모

역할글꼴 크기사용법
제목48장면 제목, 시작 텍스트
머리말36장면 내 섹션 헤더
본문30설명 텍스트
레이블24주석, 축 레이블
캡션20자막, 작은 글씨

글꼴

모든 텍스트에 고정폭 글꼴을 사용하세요. Manim의 Pango 렌더러는 모든 크기에서 비례 글꼴의 커닝이 깨집니다. 전체 권장 사항은 references/visual-design.md를 참조하세요.

MONO = "Menlo"  # 파일 상단에 한 번 정의

Text("Fourier Series", font_size=48, font=MONO, weight=BOLD)  # 제목
Text("n=1: sin(x)", font_size=20, font=MONO)                  # 레이블
MathTex(r"\nabla L")                                            # 수학 (LaTeX 사용)

가독성을 위한 최소 font_size=18.

장면별 변형

모든 장면에 동일한 구성을 절대 사용하지 마세요. 각 장면마다:

  • 팔레트에서 다른 지배 색상 사용
  • 다른 레이아웃 — 항상 모든 것을 중앙에 배치하지 마세요
  • 다른 애니메이션 진입 방식 — Write, FadeIn, GrowFromCenter, Create 사이에서 다양하게 사용
  • 다른 시각적 무게 — 일부 장면은 밀집, 다른 장면은 여백

워크플로우

1단계: 계획 (plan.md)

코드 작성 전에 plan.md를 작성하세요. 포괄적인 템플릿은 references/scene-planning.md를 참조하세요.

2단계: 코딩 (script.py)

장면당 하나의 클래스. 모든 장면은 독립적으로 렌더링 가능합니다.

from manim import *

BG = "#1C1C1C"
PRIMARY = "#58C4DD"
SECONDARY = "#83C167"
ACCENT = "#FFFF00"
MONO = "Menlo"

class Scene1_Introduction(Scene):
    def construct(self):
        self.camera.background_color = BG
        title = Text("Why Does This Work?", font_size=48, color=PRIMARY, weight=BOLD, font=MONO)
        self.add_subcaption("Why does this work?", duration=2)
        self.play(Write(title), run_time=1.5)
        self.wait(1.0)
        self.play(FadeOut(title), run_time=0.5)

핵심 패턴:

  • 모든 애니메이션에 자막 사용: self.add_subcaption("text", duration=N) 또는 self.play()에 subcaption="text"
  • 장면 간 일관성을 위해 파일 상단에 공유 색상 상수 배치
  • 모든 장면에서 self.camera.background_color 설정
  • 깔끔한 종료 — 장면 종료 시 모든 mobject를 FadeOut: self.play(FadeOut(Group(*self.mobjects)))

3단계: 렌더링

manim -ql script.py Scene1_Introduction Scene2_CoreConcept  # 초고
manim -qh script.py Scene1_Introduction Scene2_CoreConcept  # 제작

4단계: 이어붙이기

cat > concat.txt << 'EOF'
file 'media/videos/script/480p15/Scene1_Introduction.mp4'
file 'media/videos/script/480p15/Scene2_CoreConcept.mp4'
EOF
ffmpeg -y -f concat -safe 0 -i concat.txt -c copy final.mp4

5단계: 검토

manim -ql --format=png -s script.py Scene2_CoreConcept  # 미리보기 스틸

중요한 구현 노트

LaTeX를 위한 Raw 문자열

# 잘못됨: MathTex("\frac{1}{2}")
# 올바름:
MathTex(r"\frac{1}{2}")

가장자리 텍스트의 buff는 0.5 이상

label.to_edge(DOWN, buff=0.5)  # 절대 < 0.5 안 됨

텍스트 교체 전 FadeOut

self.play(ReplacementTransform(note1, note2))  # note2 위에 Write(note2) 사용 금지

추가되지 않은 Mobject는 절대 애니메이션하지 않기

self.play(Create(circle))  # 먼저 추가해야 함
self.play(circle.animate.set_color(RED))  # 그런 다음 애니메이션

성능 목표

품질해상도FPS속도
-ql (초고)854x48015장면당 5-15초
-qm (중간)1280x72030장면당 15-60초
-qh (제작)1920x108060장면당 30-120초

항상 -ql로 반복하세요. 최종 출력만 -qh로 렌더링하세요.

참조

파일내용
references/animations.md핵심 애니메이션, 속도 함수, 합성, .animate 구문, 타이밍 패턴
references/mobjects.md텍스트, 도형, VGroup/Group, 위치 지정, 스타일링, 커스텀 mobject
references/visual-design.md12가지 디자인 원칙, 불투명도 계층화, 레이아웃 템플릿, 색상 팔레트
references/equations.mdManim에서의 LaTeX, TransformMatchingTex, 유도 패턴
references/graphs-and-data.md축, 플로팅, BarChart, 애니메이션 데이터, 알고리즘 시각화
references/camera-and-3d.mdMovingCameraScene, ThreeDScene, 3D 표면, 카메라 제어
references/scene-planning.md이야기 흐름, 레이아웃 템플릿, 장면 전환, 계획 템플릿
references/rendering.mdCLI 참조, 품질 사전 설정, ffmpeg, 음성 해설 워크플로우, GIF 내보내기
references/troubleshooting.mdLaTeX 오류, 애니메이션 오류, 일반적인 실수, 디버깅
references/animation-design-thinking.md애니메이션할 때 vs 정적 표시 시기, 분해, 페이싱, 나레이션 동기화
references/updaters-and-trackers.mdValueTracker, add_updater, always_redraw, 시간 기반 updater, 패턴
references/paper-explainer.md연구 논문을 애니메이션으로 전환 — 워크플로우, 템플릿, 도메인 패턴
references/decorations.mdSurroundingRectangle, Brace, 화살표, DashedLine, Angle, 주석 생명주기
references/production-quality.md코드 전, 렌더링 전, 렌더링 후 체크리스트, 공간 레이아웃, 색상, 템포

창의적 발산 (사용자가 실험적/창의적/독특한 출력을 요청할 때만 사용)

사용자가 창의적, 실험적 또는 비전통적인 설명 방식을 요청할 경우, 애니메이션을 설계하기 전에 전략을 선택하고 추론하세요.

  • SCAMPER — 사용자가 표준 설명에 새로운 시각을 원할 때
  • 가정 뒤집기 — 사용자가 일반적인 교육 방식을 도전하고 싶을 때

SCAMPER 변형

표준 수학/기술 시각화를 가져와 변형하세요:

  • 대체: 표준 시각적 은유를 대체 (수직선 → 구불구불한 길, 행렬 → 도시 격자)
  • 결합: 두 가지 설명 접근법을 결합 (대수적 + 기하학적 동시에)
  • 역순: 거꾸로 유도 — 결과에서 시작하여 공리로 분해
  • 수정: 매개변수를 과장하여 왜 중요한지 보여줌 (10배 학습률, 1000배 표본 크기)
  • 제거: 모든 표기법 제거 — 애니메이션과 공간 관계로만 순수하게 설명

가정 뒤집기

  1. 이 주제가 시각화되는 "표준" 방식 목록화 (좌→우, 2D, 이산적 단계, 형식적 표기법)
  2. 가장 근본적인 가정 선택
  3. 뒤집기 (우→좌 유도, 2D 개념의 3D 임베딩, 단계 대신 연속적 모핑, 표기법 제로)
  4. 뒤집기가 표준 접근법이 숨기는 것을 무엇을 드러내는지 탐구

Individual skills in this repo

This repo contains 9 individual skills — each has its own dedicated page.

assafkip/claude-video-editor

Build videos from stills when there is nothing to cut — narration first (ElevenLabs v3 with audio tags), then still keyframes from ANY source (AI image tools, screenshots, photos, HyperFrames-rendered HTML), animated deterministically with the animate-stills recipe (HyperFrames camera moves + GSAP atmosphere). Use when the user wants an explainer, documentary-style video, or any video built from generated or collected visuals instead of recorded footage.

assafkip/claude-video-editor

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

assafkip/claude-video-editor

HyperFrames CLI tool — hyperframes init, lint, preview, render, transcribe, tts, doctor, browser, info, upgrade, compositions, docs, benchmark. Use when scaffolding a project, linting or validating compositions, previewing in the studio, rendering to video, transcribing audio, generating TTS, or troubleshooting the HyperFrames environment.

assafkip/claude-video-editor

Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-composition wiring, component snippet merging, and registry discovery.

assafkip/claude-video-editor

Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.

assafkip/claude-video-editor

Beginner-friendly end-to-end video creator for HyperFrames. Use when the user says "make a video", "create a video", "new video", "build a video", "video from scratch", "I want to make a video", "help me create a video", or when someone who's never used HyperFrames before arrives with a concept, script, or rough idea and wants a finished MP4. Interviews the user in one pass, then builds the full video with mandatory preview and visual-verification gates.

assafkip/claude-video-editor

Build and iterate short-form vertical (9:16) videos in Hyperframes — TikTok/Reels/Shorts style. Use when Nate says "short-form video", "vertical video", "TikTok/Reels/Shorts", "make a short", "talking-head + motion graphics", or when the target is a 1080x1920 composition with face video + synced scene overlays + karaoke captions. Encodes the full May Shorts 19 playbook: face-mode choreography, audio-synced scene timing, karaoke captions, and the 10-rule quality checklist.

assafkip/claude-video-editor

Edit any video by conversation — the orchestrator for the bundled video pipeline. Use when the user wants to edit, cut, caption, grade, or add motion graphics to footage; drops a folder of clips and says "edit this"; or asks to make a promo/teaser/tutorial/short. Routes to video-use (the cut engine) and HyperFrames (motion-graphics overlays), with a motion-craft library for taste.

assafkip/claude-video-editor

Capture a website and create a HyperFrames video from it. Use when: (1) a user provides a URL and wants a video, (2) someone says "capture this site", "turn this into a video", "make a promo from my site", (3) the user wants a social ad, product tour, or any video based on an existing website, (4) the user shares a link and asks for any kind of video content. Even if the user just pastes a URL — this is the skill to use.

관련 스킬