Claude Animated Shorts: three.js와 Remotion으로 내 PC에서 뽑는 애니메이션 숏츠 스킬
AI 영상 생성기 없이 three.js와 Remotion만으로 55~70초 세로 애니메이션 숏츠를 렌더하는 무료 Claude 스킬, 사흘 만에 별 1,200개를 넘었어요
- 누가
- mromidev가 「How to Make Viral Animated Shorts Using Claude (Full Workflow)」 영상에서 쓴 스킬을 그대로 공개했어요. 이야기 숏츠를 만드는 사람을 위한 거예요.
- 언제
- 2026년 11월 1일에 첫 커밋이 올라왔고, 그날 참조 시트까지 추가됐어요. 릴리스 태그는 없어요.
- 어디서
- Claude Code 스킬로 ~/.claude/skills/cartoon-3d-short/에 복사해서 써요. Remotion(@remotion/three), Node, Python 3, ffmpeg가 있는 내 PC에서 렌더해요.
이게 불편했어요
이야기 숏츠를 만들려면 AI 영상 생성기에 장면마다 프롬프트를 넣고, 캐릭터가 컷마다 달라지는 걸 참고, 마음에 드는 컷이 나올 때까지 돌려야 했어요. 길이가 1분이면 컷이 열다섯 개쯤 되니 그 자체가 일이었어요.
그래서 이렇게 풀어요
이 스킬은 영상을 생성하지 않고 코드로 렌더해요. 채색 텍스처와 잉크 선이 있는 3D 마을을 three.js로 세우고, 그 위에 납작한 2D 캐릭터 카드를 세운 뒤 Remotion이 프레임을 뽑아요. 그래서 캐릭터는 모든 컷에서 같고, 카메라와 타이밍은 story.ts의 숫자로 고칠 수 있어요. 참조 숏츠 20편을 잰 보고서가 함께 들어 있어 「그 채널 느낌」을 측정값으로 맞춰요.
안에서는 이렇게 돌아가요
- 1
나 → Claude Code
「cartoon short skill로 ○○ 숏츠 만들어 줘」README의 한 문장이에요. 주제를 주면 에이전트가 스킬 폴더의 SKILL.md를 따라가요.README.md - 2
Claude Code → cartoon-3d-short
사실 조사 → 대본 → voice.wav + words.json진짜 있었던 일 하나와 일상 비유를 고르고, 훅·배경·고조·스냅·「다행히/불행히」·설명·반전 순서로 55~70초 대본을 써요. 목소리를 만들고 단어 타이밍을 손봐요.SKILL.md - 3
cartoon-3d-short → story.ts
templates/bridge 복사, SHOTS·CAMS·KICKS 작성15개 샷의 프레임 구간, 낮/노을 조명, 카메라 키, 충격 흔들림, 렌즈 블러를 적어요. 모든 반응은 단어보다 0~3프레임 먼저 와요.templates/bridge/story.ts - 4
story.ts → Remotion + three.js
three.js 월드와 2D 카드 캐릭터를 조립world.ts가 하늘·강·마을·체인 다리를 매 프레임 세우고, cast.ts의 캔버스 캐릭터는 빌보드로 서요. ink.ts가 3D에 잉크 선을 긋고요.templates/bridge/world.ts - 5
Claude Code → Remotion + three.js
스틸을 뽑아 참조 프레임과 나란히 비교bridge-stills.mjs로 특정 프레임을 렌더하고 sbs_sheet.py로 참조와 붙여 검수해요. 색·조명·잉크·깊이를 점수로 매겨 고쳐요.templates/scripts/bridge-stills.mjs - 6
Remotion + three.js → video.mp4
2K 렌더 + 합성 사운드 믹스 + QAnpx remotion render로 1440x2560을 뽑고, mix.py가 음성·행진곡·효과음을 -15 LUFS로 섞어요. short_qa.py가 모든 프레임을 검사해요.templates/audio/mix.py
넣으면 이렇게 나와요
나한테 맞을까요
이럴 때 좋아요
- 역사나 과학 이야기를 세로 숏츠로 만들고 싶은데, 영상 생성기 결과물의 들쭉날쭉함이 싫을 때
- 캐릭터와 세계가 모든 컷에서 같아야 하는 시리즈를 만들 때
- Remotion을 이미 쓰고 있어서 코드로 카메라와 타이밍을 다루는 게 편할 때
이건 안 돼요
- Remotion 프로젝트에 @remotion/three를 붙이고 Node, Python 3, ffmpeg까지 갖춰야 해요. 복사해서 바로 돌아가는 앱이 아니에요
- 번들마다 public/ 1.3GB가 임시 폴더에 복사돼요. README가 REMOTION_TMP를 큰 드라이브로 잡으라고 해요
- 2K 렌더는 약 4fps라 67초에 10분쯤 걸린다고 SKILL.md에 적혀 있어요. 스틸 스크립트는 Windows의 Chrome 경로를 가리켜요(코드 기준)
- 참조 프레임은 스타일 공부용이고, 이야기·캐릭터·목소리는 내 것이어야 해요. 목소리 생성 도구는 정해져 있지 않아요
Claude Animated Shorts: cartoon story shorts rendered in code
A free Claude skill renders 55 to 70 second vertical cartoon shorts with three.js and Remotion, no AI video generator, and passed 1,200 stars in three days
- Who
- mromidev published the skill from the video "How to Make Viral Animated Shorts Using Claude", for people who make story shorts.
- When
- The first commit landed on 1 November 2026, with the reference contact sheets the same day. No release tags.
- Where
- A Claude Code skill copied to ~/.claude/skills/cartoon-3d-short/; renders on your PC with Remotion, Node, Python 3 and ffmpeg.
What was hard
Making a story short with an AI video generator meant prompting every scene, accepting a character who looked different in every cut, and rerolling until a cut came out right. At one minute that is about fifteen cuts, which was the work itself.
What it does about it
This skill renders the film in code instead of generating it. A 3D town with painted textures and ink outlines is built in three.js, flat 2D character cards stand in it, and Remotion renders the frames. The characters are therefore identical in every cut, and camera and timing are numbers in story.ts you can edit. Measured reports on 20 reference shorts come with it, so that channel's look is matched by measurement.
How it runs inside
- 1
You → Claude Code
"Use the cartoon short skill and make a short about …"The README's one sentence. Given a topic, the agent follows SKILL.md in the skill folder.README.md - 2
Claude Code → cartoon-3d-short
Facts → script → voice.wav + words.jsonOne true story and an analogy become a 55–70 s script: hook, escalation, snap, explanation, twist; then the voice.SKILL.md - 3
cartoon-3d-short → story.ts
Copy templates/bridge, write SHOTS, CAMS, KICKS15 shots' frame ranges, light, camera keys, kicks and blur; each reaction lands 0–3 frames before its word.templates/bridge/story.ts - 4
story.ts → Remotion + three.js
Assembles the three.js world and 2D cardsworld.ts builds sky, river, town and bridge each frame; cast.ts cards stand as billboards; ink.ts draws the lines.templates/bridge/world.ts - 5
Claude Code → Remotion + three.js
Stills side by side with reference framesbridge-stills.mjs renders chosen frames, sbs_sheet.py pairs them with references; colour, ink and depth get scored.templates/scripts/bridge-stills.mjs - 6
Remotion + three.js → video.mp4
2K render, synthesized mix, QAnpx remotion render at 1440x2560; mix.py blends voice, march and SFX to -15 LUFS; short_qa.py checks every frame.templates/audio/mix.py
What goes in, what comes out
Is it for you
Good for
- History or science stories as vertical shorts when you dislike the unevenness of generated video
- A series where characters and world must stay the same in every cut
- You already use Remotion and prefer camera and timing as code
Not for
- You need a Remotion project with @remotion/three plus Node, Python 3 and ffmpeg; it is not an app that runs after a copy
- Every bundle copies 1.3 GB of public/ into the temp folder; the README says to point REMOTION_TMP at a big drive
- A 2K render runs at about 4 fps, about 10 minutes for 67 s per SKILL.md; the stills script points at a Windows Chrome path (from the code)
- Reference frames are for style study only; story, characters and voice must be your own, and no voice tool is prescribed