Communitygithub.com

CrissAlvarezH/animated-video

Remotion(React, SVG, three.js)을 사용하여 코드로 설명 영상, 캐릭터 스토리, 모션 그래픽, 타이포그래피, 종이 콜라주, 애니메이션 인포그래픽 등 2D/3D 애니메이션 비디오를 제작합니다. 스크립트나 음성 해설을 기반으로 모든 화면 비율을 지원합니다. 대본 애니메이션, 릴, 모션 그래픽 제작 요청 시 사용하세요. 카메라 푸티지 편집(video-edit)이나 AI 생성 클립(higgsfield-*)에는 적합하지 않습니다.

animated-video란 무엇인가요?

이 기술은 코드 기반으로 완전한 애니메이션 비디오를 제작하기 위한 전문 AI 에이전트 스킬입니다. React 기반의 Remotion 라이브러리를 활용하여 SVG, three.js 등으로 모든 이미지를 절차적으로 생성하거나 승인된 소스 에셋으로 렌더링합니다. 설명 영상, 캐릭터 스토리, 모션 그래픽, 타이포그래피, 종이 콜라주, 애니메이션 인포그래픽 등 다양한 스타일을 지원하며, 1인 에이전트부터 여러 에이전트가 병렬로 작업하는 대규모 제작까지 확장 가능합니다. 음성 해설 기반의 타임라인, 장면별 핵심 프레임 보드, 음소거 테스트, 피드백 기반 반복 개선 등 체계적인 워크플로우를 제공합니다. 사용자의 선호도와 브리핑에 맞춰 독창적인 비주얼 아이디어를 탐색하며, 각 개념을 가장 효과적으로 전달하는 이미지를 찾는 것을 핵심 원칙으로 삼습니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/CrissAlvarezH/ai-reel-gen-app/tree/HEAD/.claude/skills/animated-video

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

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

문서

애니메이션 비디오

Reel Studio 워크스페이스: reel-studio 스킬(.claude/skills/reel-studio/SKILL.md)과 비디오의 스타일 스킬(styles/<id>/SKILL.md)을 먼저 로드하세요. 이들이 아래 기본값보다 우선합니다: 스타일은 이미 비디오별로 선택되어 있으며(다른 스타일이나 스타일 프레임 라운드를 제안하지 마세요), 내레이션은 ElevenLabs(Reel Studio → Ajustes → Voz의 음성)이며 타이밍은 tools/el_words.py(Whisper가 아님)를 사용하고, 새 프로젝트는 스타일의 템플릿(templates/remotion-film/이 아님)에서 시작합니다. 이미지 검색은 웹 전체에서 자유롭게 수행됩니다. Ajustes → Imágenes은 선택적 API 통합 및 이미지 생성만 제어합니다. 방법을 위해 이 스킬을 사용하세요: 그림 브레인스토밍, 컨셉 승인, 보드, 음소거 테스트, 리뷰.

브리핑을 모든 이미지가 코드로 만들어진 완성된 애니메이션 비디오로 전환합니다: 절차적으로 그리거나 승인된 소스 에셋을 결정론적으로 렌더링합니다. 이미지 또는 비디오 생성기의 푸티지는 별도의 경로(2단계)입니다. ~/.animated-video/profile.md이 존재하면 먼저 읽으세요: 사용자가 명시한 선호도가 여기의 기본값보다 우선합니다.

영화의 구성 요소

아이디어가 허용하는 만큼 독창적이 되세요. 영화가 보여주는 모든 개념에 대해, 이해를 더 빠르게 하면서도 더 놀라운 이미지를 찾으세요. 기발하고, 불가능하고, 재미있거나 아름다운 아이디어는 환영이며, 각각은 하나의 테스트로 판단됩니다: 시청자가 문자 그대로의 이미지보다 더 빠르게 메커니즘을 이해하거나 더 오래 기억합니까? 문자 그대로의 이미지는 그것을 이길 수 있는 것이 없을 때만 승리하는 차선책입니다. 정확성은 아이디어를 확인합니다. 내레이션이 근거를 제공하는 은유는 유지됩니다.

그림이 설명하고, 음성이 확인합니다. 소리를 끄면, 시청자는 화면에서 일어나는 일을 통해 각 단계를 배웁니다: 메커니즘은 원인과 결과(자르기, 보내기, 치기, 복사하기)로 수행되며, 각 대사의 아이디어는 단어로 표시되고, 레이블은 이벤트를 대체하지 않고 지원합니다(모션).

그림은 질문을 담고 있습니다. 스크립트는 질문을 열어두고 단계별로 답변합니다. 첫 번째 프레임은 그 질문을 제기하며, 내레이션이 도달하기 전에는 어떤 그림, 레이블 또는 제목도 답을 보여주지 않습니다: 답을 본 시청자는 떠날 이유가 생깁니다.

색상은 눈을 안내합니다. 각 색상이 의미하는 바를 일찍 결정하세요: 시청자가 따라가는 대상은 강조색을 띠며 프레임에서 가장 밝고 채도가 높으며, 색상은 영화 전체에서 그 의미를 유지합니다. 각각의 다른 역할에 고유한 색상을 지정하고 의미를 전달하지 않는 모든 것은 조용히 유지하세요. 참조 룩을 일치시키려면 프레임에서 색상을 샘플링하고 애니메이터에게 숫자를 제공하세요: 조명, 안개 및 그레이딩은 명명된 색상을 회색으로 만듭니다.

각 브리핑에 맞게 새롭게 디자인하세요. 스타일 팩, 파트 및 과거 필름은 출발점입니다. 사용자가 좋아했던 과거 필름은 완성도와 속도의 기준을 설정하며, 아이디어, 장치 또는 룩의 기준은 절대 아닙니다.

피드백은 그림을 좁히되, 상상력은 절대 좁히지 않습니다. 사용자가 아이디어를 거부하면, 그 아이디어의 문제점(혼란스럽다, 억지스럽다, 싸구려처럼 보인다)을 기록하고 어떤 종류든 더 나은 아이디어를 찾으세요. 사용자가 전체 범주에 대한 규칙으로 명시할 때만 규칙이 됩니다. 다른 에이전트를 위해 작성하는 브리핑은 사용자가 명시한 규칙만 담습니다.

추천과 함께 질문하세요 "예"가 완전한 답변이 되도록 합니다. 처음에 이 스킬이 높은 노력으로 가장 강력한 모델과 함께 사용될 때 가장 잘 작동한다고 말하세요.

제작 규모를 작품에 맞추기

  • 짧거나 간단함: 한 에이전트가 처리할 수 있으며 스틸을 확인합니다. 브레인스토밍은 여전히 새 에이전트에, 음소거 테스트는 여전히 실행됩니다.
  • 더 길거나 많은 막: 사용자가 승인할 때까지 그림, 컨셉 및 룩을 한 에이전트와 유지한 다음, 제작에 맞게 병렬화하세요. 보드는 각 박자의 아이디어를 고정합니다. 애니메이션을 만드는 사람은 움직임을 소유하며 더 나은 그림을 보면 제안합니다. 전체 영화에 대해 하나의 큐 시트를 유지하여 사운드가 의도적으로 유지되도록 합니다. 긴 실행에서는 스틸과 남은 전체 시간과 함께 상태를 보내고, 에이전트가 기계 시계로 상태 라인에 타임스탬프를 찍도록 합니다. 자체 보고 시간은 몇 시간씩 차이가 날 수 있기 때문입니다.
  • 완성된 영화의 수정: 어떤 섹션을 재구축할지 묻고 가장 약한 섹션을 추천합니다. 나머지는 유지하고 새 부분을 스플라이스하세요.
  • 다른 사람의 타임라인에 삽입(video-edit가 소유한 카메라 편집 내 애니메이션 샷): 삽입. 타임라인 소유자가 불분명할 때는 한 번 묻습니다.
  • 영화 속 카메라 앞 발표자: 해당 샷을 계획하기 전에 합성.

1. 그림과 컨셉 찾기

연출에서 중심축을 선택하세요: 이야기(무언가를 원하는 누군가) 또는 설명(어떻게 작동하는지, 왜, 숫자가 의미하는 바). 그림은 제작 규칙을 보지 않는 새로운 브레인스토밍 에이전트에서 나오며, 별도의 선택자가 판단합니다(그림 찾기). 그런 다음 진정으로 다른 컨셉, 당신의 추천, 선택된 컨셉을 각 박자의 그림과 함께 시간 기반 비트 시트로 작성합니다. 완성된 스크립트는 단어를 결정하며 그림은 결정하지 않습니다. video-script 스킬이 설치된 경우, 내레이션을 해당 체크리스트와 대조하여 확인하세요.

제작하기 전에 컨셉과 그림에 대한 사용자의 승인을 받으세요. 짧은 작품도 포함됩니다.

2. 형식과 스타일 확정

  • 요청이 형식과 스타일을 명시하면 한 줄로 확인하세요. 그렇지 않으면 진정으로 다른 스타일을 같은 박자의 스타일 프레임으로 보여주고(스타일) 선택을 받으세요. 선택한 스타일의 팩을 읽으세요(팩이 있는 경우).
  • 경로와 비용에 대해 물으세요: 코드로 만든 것은 샷당 무료이며 일관됩니다. AI 비디오는 클립당 비용이 들고 변동합니다.
  • 영화가 보여주는 실제 사물, 장소 및 인터페이스의 사진을 찾아보세요. 실제 인물이 등장하면 해당 푸티지가 어디에 있는지 묻고 그 프레임을 가져오세요.

3. 오디오 스파인 구축

모든 박자는 내레이션에서 시간을 측정합니다(내레이션이 없으면 먼저 선택된 음악 베드에서 측정). 사용자의 녹음을 선호합니다. 녹음이 있기 전에는 대체 단어 타이밍을 기반으로 구축하며 레이블을 붙입니다. templates/remotion-film/align.py는 단어 타임스탬프와 음량 엔벨로프를 제공합니다. cue("phrase")로 단어로부터 모든 큐를 파생시키면 새 VO가 영화를 다시 시간 측정합니다. 캡션은 대본과 대조하여 확인된 수동 작성 의미 단위입니다. 음악 및 효과는 첫 번째 컷과 함께 제공됩니다: 사용자의 파일, 에셋 라이브러리 또는 디스크의 샘플을 먼저 사용하고(templates/parts/audio/designed.py), 합성된 것은 레이블을 붙입니다.

4. 스켈레톤과 보드

templates/remotion-film/을 복사하고, 막, 캡션 및 오디오를 연결하고, 타임라인 전체에 스틸을 렌더링합니다(파이프라인). 확인되지 않은 사실은 영화에 포함하지 마세요.

전체 애니메이션 전에 사용자에게 키프레임 보드를 보여주세요: 선택한 스타일로 각 비트의 스틸이며, 실제 씬 파일로 제작되어 완성된 샷으로 성장합니다. 승인된 스틸은 그 사이에 어떤 일이 일어나는지 보여주지 않습니다. 의미가 움직임에 있을 때는 애니메틱(VO 위에서 비트를 수행하는 대략적인 모양)이 저렴하게 보여줍니다.

5. 에셋 및 샷 구축

설치된 경우 먼저 에셋 라이브러리를 검색하세요. 반복되는 요소는 이야기가 필요로 하는 모든 규모에서 유지됩니다: 캐릭터에 따른 그려진 캐릭터; 파트에는 지구본, iMessage iPhone, 디자인된 사운드, 사실성 키트 및 밀집된 three.js 모션을 위한 모션 키트가 있습니다. 가져온 것을 다시 스타일링하세요.

여러 에이전트가 애니메이션을 만들 때는 스타일 팩과 앵커 프레임(각 비트에 대한 참조 필름의 프레임 또는 보드)에서 가져온 하나의 작성된 룩과 바를 제공하세요. 모든 스타일에서 실제 사물, 인터페이스, 회사 또는 장소는 인식 가능하며, 대체물도 동일한 주의를 받습니다. 각 막의 사운드 이벤트를 그 막을 그리는 상수에서 파생시켜 비트를 이동하면 사운드도 함께 이동하도록 하세요.

6. 리뷰 및 전달

에이전트는 재생이 아닌 프레임만 봅니다: 연속 프레임 스트립으로 모션을 확인하고(시간적 확인), 측정으로 오디오를 확인하고, 측정된 것만 말하세요. 자신의 눈을 신뢰할 수 없을 때는 독립적인 새 에이전트가 판단하게 하세요(리뷰). 라운드가 거의 개선되지 않거나 최고 이슈가 사용자를 필요로 할 때 반복을 중단하세요.

첫 번째 전체 컷이 사용자에게 가기 전에, 새 판사가 음소거 테스트를 실행합니다. 따라갈 수 없는 것을 수정하세요. 거부된 전체 컷은 그림에서 다시 시작합니다(재시작).

최종본을 렌더링하고(render.sh는 음량을 정규화합니다. 긴 영화는 청크로 진행), 첫 번째 프레임, 마지막 초, 음량을 확인하세요. 경로, 미해결 이슈, 건너뛴 확인, 소스 이미지 및 합성되거나 발명된 것을 보고하세요. 각 버전을 프로젝트의 git 저장소에 커밋하세요. 에셋 라이브러리가 설치된 경우 카탈로그를 닫으세요.

요청 시 반성 프로토콜로 반성하세요.

Individual skills in this repo

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

CrissAlvarezH/new-style

Create a new visual style for the creator's videos in a Reel Studio workspace (styles/<id>/style.json): interview him for its name, feel, colours and what each one means, fonts, motion, where pictures come from, reference links and images, then write the style so it shows in Estilos and new videos can use it. Use when he asks for a new style or presses "Nuevo estilo" on the Estilos page.

CrissAlvarezH/persona-hablando

The "Persona hablando + animaciones" format of a Reel Studio video — the creator talks to camera in his own recording; you transcribe it, agree the cuts with him (pauses, flubs, retakes), cut it, and lay the video's style animations over or between his shots. Use for any video whose format.txt says persona-hablando.

CrissAlvarezH/reel-studio

How a narrated explainer video is made in a Reel Studio workspace, in any visual style — script, pictures, voice, images, build, board, sound, mute test, render — following the creator's settings from the studio (profile, format, voice, image sources). Use for any new or revised video in a project's videos/ (projects/<id>/videos/). The video's style adds its own skill (styles/<id>/SKILL.md) for the look and the Remotion kit; LESSONS.md has what past videos taught.

CrissAlvarezH/video-script

Write short-form video scripts that hold viewers, using the creator's own video analytics. Use when choosing the hook of a chosen idea, writing or tightening a script before filming (talking-head or narrated explainer), or turning a posted video's insights into lessons. Coming up with ideas is content-ideas'.

관련 스킬