Painted Animation

Community

jumpersun

painted-animation

用代码制作或修改水彩墨线风格的角色动画、叙事短片与歌词 MV，包含分镜、角色表演、逐镜头渲染检查及 MP4 输出。适用于手绘二维动画，不用于动态文字主导的产品展示片。

Overview

Publisher	jumpersun
Repository	`framecraft-skills`
Skill name	`painted-animation`
Stars	4
Forks	0
Bundled files	29
Links	Skill source Repository

Markdown instructions
A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.
Works with any LLM
AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.
29 bundled files
Scripts, templates, and references the model can read while it works. Files are read-only and never executed.
Open source
Published by jumpersun on GitHub. Read the source before you install it.

Installation

Install the Painted Animation AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

Open the app and go to Plugins → Skills.
Choose "Install from GitHub".
Paste the skill folder URL below and confirm.
https://github.com/jumpersun/framecraft-skills/tree/main/skills/painted-animation
Enable the skill in any chat where you want it available.

Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills

git clone --depth 1 https://github.com/jumpersun/framecraft-skills.git /tmp/framecraft-skills
mkdir -p .claude/skills
cp -r /tmp/framecraft-skills/skills/painted-animation .claude/skills/painted-animation

Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Painted Animation in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Painted Animation on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Painted Animation is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

Loaded only when it is needed
The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.
Switch models mid-chat
Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

水彩角色动画

基于 p5.js、p5.brush、Puppeteer 和 ffmpeg 制作可编辑的视频。所有路径相对于本 SKILL.md 所在目录；先解析真实 skill 目录，再执行其中脚本。支持 Codex，不依赖 Claude API 或固定模型。

建立项目

确定主题、时长、比例、语言和音频来源。沿用用户已给的信息；可推断的细节直接决定。先检查已有项目，修改视频时继续使用该项目。
新建项目先运行 bash <skill-dir>/scripts/new_project.sh --check。需要 Node ≥22.12、npm、rsync、Chrome、ffmpeg；歌词节拍分析另需 Python 3 和 numpy。PATH 中版本不合适时优先选用已有运行时，设置本次命令的 PATH；Chrome 可用 CHROME_PATH 指定。依赖缺失时准确报告，不把检查失败写成 ready。
运行 bash <skill-dir>/scripts/new_project.sh <new-project-dir>；目标必须不存在。--keep-demo 保留演示镜头，--skip-install 只复制模板。已带锁文件的项目使用 npm ci；依赖装在作品项目里，保持 Skill 模板干净。
阅读项目的 ANIMATION_GUIDE.md，用 Codex 图片查看工具查看表情和视角。歌词或多章节作品再读 music-video.md。

项目和中间文件放在用户工作区；projectless 聊天默认放 work/，最终 MP4、封面和交付说明放 outputs/。模板默认 1920×1080；竖屏要同时调整布局、相机和字幕区域，并逐镜头检查。

分镜与实现

先在项目写 STORYBOARD.md：一句话故事、角色和情绪弧线、色彩变化、逐镜头时间表，以及每一时刻观众需要理解什么。把分镜展示给用户；已有明确制作授权时继续实现，只有关键内容缺失才询问。

src/config.js 设置 duration、bpm、offset、audio。一镜头一个绘制函数，章节放在 src/scenes/，使用 IIFE 避免 p5 全局命名冲突；用 shots([[t0, fn], ...]) 注册并加入 studio.html。
默认保持水彩、纸张纹理、墨线抖动和二维角色表演。Clawd 可替换为用户角色；先统一角色模型和关键姿势，再补运动。
一次呈现一个信息点，动作有准备和余势，重要含义留出阅读时间。转场衔接角色动作、视线或构图。
每帧必须只由时间 t 决定；使用 hash、boilSeed 和确定的随机种子，避免跨帧状态。为独立背景和道具设置 boilSeed，减少无意抖动。
默认用动作讲故事；用户要求标题、中文标注或字幕时按要求加入，用 overlayHook 绘制清晰文字，并检查字体、遮挡和阅读时间。用户需求优先于上游指南的无文字风格偏好。
歌词 MV 使用用户提供的歌曲和 LRC/时间表；beat_grid.py 用于估计 BPM 与节拍相位，结果仍需核对。karaoke.js 按行时间推进高亮，不提供自动逐字识别或人声生成。
仅在用户授权多 Agent 时采用 music-video.md 的章节委派方法；否则顺序完成各章。

渲染检查与输出

在作品项目中执行：

bash
node render.mjs --sheet=0.1,0.8,1.6,2.4 --cols=4 --w=480 --out=out/check/shot.jpg
node render.mjs --strip=2.1:2.6 --out=out/check/motion.jpg
node render.mjs --sheet=2.3 --crop=760,420,500,400 --w=500 --out=out/check/face.jpg
node render.mjs --frames --workers=4 --fps=24
node render.mjs --encode --out=out/video.mp4

用 view_image 或当前 Codex 提供的图片工具查看实际渲染图：覆盖每个镜头、关键动作、转场和承载情绪的面部。检查脚和手持物接触、表情过渡、观众阅读时间、文字与画面冲突；修正后重新渲染对应检查图。

短视频也可 node render.mjs --clip --out=out/video.mp4。--frames 将项目画面输入和帧率写入缓存签名：代码、布局或本地视觉资产变化会使已有生成帧失效；未变化可续跑。--range=a:b 只渲染区间，新签名后须补齐整片才能 encode；--force 强制重画选定区间。--encode 验证完整帧序列，继承渲染时的音频配置，也接受 --audio=assets/song.mp3 覆盖；改变帧率须重渲染。

字体当前仍从 Google Fonts 加载。网络不可用或要求可复现交付时，将所需字体及许可放到项目 assets/fonts，改为本地 @font-face 并确认字体加载后渲染；不要把 fallback 字体当成已验收。GPU 性能须实际测量，水彩填充多时先抽样再决定复杂度和并发数。

交付前用 ffprobe 检查尺寸、帧率、时长、视频/音轨，再用 ffmpeg 完整解码验证。明确区分静帧检查、连续帧检查、完整观看和试听；只报告实际完成的验证。保留源码与音频来源，需要时打包。模板回归检查：node --test <skill-dir>/scripts/test-render.mjs。

用户反馈歌词视频画面单一，或需要多场景案例时，阅读 qingtian-workflow.md。上游来源、许可证和迁移差异见 provenance.md；上游案例见 xiaozhen。

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Painted Animation AI skill do?

Why use Painted Animation on TypingMind?

Because you install it once and use it with any model. Painted Animation is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Painted Animation in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/jumpersun/framecraft-skills/tree/main/skills/painted-animation. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Painted Animation?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Painted Animation?

As many as you like. As long as a model supports skills, you can use Painted Animation with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Painted Animation AI skill free?

It is published on GitHub by jumpersun. Check the repository for licensing terms. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Brag

NousResearch

OrganizationPopular

Project launch video via Hyperframes, upstream-maintained.

Comfyui

Generate images, video, and audio via diffusion workflows.

Heartmula

HeartMuLa: Suno-like song generation from lyrics + tags.

Hyperframes

Render MP4/WebM videos from HTML compositions.

Overview

Installation

Install in TypingMind

Install in another agent

Use it in TypingMind

Works with any AI model

Skill instructions

水彩角色动画

建立项目

分镜与实现

渲染检查与输出

Bundled files

Frequently asked questions

Related AI Skills

Set up your own AI workspace now