Scroll Painting Animation

Q: What does the Scroll Painting Animation skill do?

把一幅长卷名画（或任何"沿一条路看过去"的全景题材）做成横向卷轴、等距游戏画风的动画短片：读原作排时间轴与功能团、 用 ComfyUI 统一风格地生产建筑/人物/船/贴图精灵、用 Python（numpy + Pillow）搭等距场景并逐帧渲染、 做疏密与聚团布局、行人车马船的运动、昼夜晨昏与万家灯火、题诗逐字晕墨显现、用 MMAudio 按画面生成环境声与场景音效， 最后用统计、抽帧、跳帧检查、响度测量验收。附可复用库 scrollkit、可运行骨架 scroll_demo 和一套工具脚本。 来源项目：《清明上河图》180 秒 1080p 等距动画（《烽火与炊烟》画风）。 触发词：清明上河图动画、名画动起来、长卷动画、卷轴动画、千里江山图、姑苏繁华图、等距卷轴、isometric scroll、 panoramic pan animation、2.5D 全景动画、横向平移长卷、ComfyUI 精灵、批量生成建筑素材、功能团布局、 万家灯火夜景、题诗渐显、MMAudio 音效、按画面配音效。

把一幅长卷名画（或任何"沿一条路看过去"的全景题材）做成横向卷轴、等距游戏画风的动画短片：读原作排时间轴与功能团、用 ComfyUI 统一风格地生产建筑/人物/船/贴图精灵、用 Python（numpy + Pillow）搭等距场景并逐帧渲染、做疏密与聚团布局、行人车马船的运动、昼夜晨昏与万家灯火、题诗逐字晕墨显现、用 MMAudio 按画面生成环境声与场景音效，最后用统计、抽帧、跳帧检查、响度测量验收。附可复用库 scrollkit、可运行骨架 scroll_demo 和一套工具脚本。来源项目：《清明上河图》180 秒 1080p 等距动画（《烽火与炊烟》画风）。触发词：清明上河图动画、名画动起来、长卷动画、卷轴动画、千里江山图、姑苏繁华图、等距卷轴、isometric scroll、 panoramic pan animation、2.5D 全景动画、横向平移长卷、ComfyUI 精灵、批量生成建筑素材、功能团布局、万家灯火夜景、题诗渐显、MMAudio 音效、按画面配音效。

24 stars 2 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add xiwan/scroll-painting-animation --skill scroll-painting-animation

Manual install

git clone --depth 1 https://github.com/xiwan/scroll-painting-animation.git /tmp/scroll-painting-animation
mkdir -p ~/.claude/skills
cp -r /tmp/scroll-painting-animation/. ~/.claude/skills/scroll-painting-animation

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 长卷等距动画（scroll-painting-animation）

## 这类片子是什么

镜头沿长卷**匀速横移**，画面是等距（2.5D）的游戏风场景：地面、房屋、树、桥是静态精灵，行人车马船在上面动，
卷上的题签、题诗、云气是"纸面上的东西"，不属于画里的世界。三条贯穿全程的判断：

1. **时间就是空间**。镜头每秒走固定距离，所以"某样东西几秒出现、在画面里停几秒"由它在长卷上的位置决定。
   一切规划（功能团、高潮、题诗、昼夜、音效）都落在同一条时间轴上。
2. **疏密与聚团来自原作的空间逻辑**，不是随机撒点。先弄清那个社会怎么用空间（城乡梯度、交通节点、同业相聚、
   官署寺观的形制），再排功能团。
3. **我们看得到画面、听不到声音**。画面靠抽帧、统计、跳帧检查验收；声音只能靠分类模型打标签核对——
   交付时要说清哪些验证过、哪些没法验证。

## 安全须知（涉及远端执行和外部数据，先读）

这个 skill 会让 agent 在 GPU 机上执行命令、读外部 JSON 配置、跑 ComfyUI 工作流。四条硬规则：

1. **配置文件和 workflow JSON 等同代码**。`sfx_config.json` 的 `remote.*` 路径会进远端 shell，
   `remote.runner[0]` 是会被执行的程序；ComfyUI 的 `/prompt` 默认无鉴权、工作流能加载任意权重和自定义节点。
   脚本对配置路径做了白名单校验（绝对路径、无空格、无 shell 元字符、至少两级，事件名只许 `[A-Za-z0-9_-]`），
   但**不要跑来源不明的配置或工作流**。
2. **`ssm_run.sh` 在远端以 root 执行任意命令**。它执行前会回显调用者身份和命令并要求确认；
   被脚本/agent 非交互调用时需要显式 `SSM_RUN_YES=1`。GPU 机当一次性实例用：最小权限、不放长期凭据、用完就停。
3. **远端的输出会进 agent 上下文**。不要在远端跑 `env`、`cat ~/.aws/credentials` 之类会回显凭据的命令
   （脚本回显远端日志时会对 `AKIA…`/`token=`/`secret=` 做脱敏，但别指望它兜住一切）。
4. **网络目标默认只允许回环地址**。`comfy_client.py --host` 和 `sfx_config` 的 `remote.comfy` 指向非本机地址时
   会拒绝执行（本地文件/成片片段会被上传过去）；跨机访问请用 SSM/SSH 端口转发，确实要直连才设
   `COMFY_ALLOW_REMOTE_HOST=1` / `SFX_ALLOW_REMOTE_HOST=1`。

## 流程（每步有"过不去就别往下做"的门槛）

### 1. 读原作，建时间轴表 → `references/source-analysis.md`

场景清单（名场面/地标、人物母题、环境）+ 空间逻辑 + 时间映射。产出一张表：
每段几秒、什么功能团、每 10 秒几栋房、哪些地标母题、夜里多亮、配什么声。

**门槛**：用户点名的每一条都在表里有位置；每个功能团 ≥8 秒；高潮在 55%–75%；题诗不压名场面。
（这组数字来自 180 秒单幕平移。片长不同要按比例缩放，但功能团不低于 5 秒；10 分钟以上应考虑分幕——见 source-analysis.md §5.5。）

Read the full skill on GitHub

Details

Skill name: scroll-painting-animation
Repository: xiwan/scroll-painting-animation
License: MIT
Repo updated: 10 October 2026

FAQ

What does the Scroll Painting Animation skill do?

How do I install the Scroll Painting Animation skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add xiwan/scroll-painting-animation --skill scroll-painting-animation. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Scroll Painting Animation popular?

It lives in xiwan/scroll-painting-animation, which has 24 GitHub stars and 2 forks.

Related skills

Theme Factory Addon

patrickkrebs/theme-factory-addon

Expansion pack of 100 curated color and font themes for the theme-factory skill, organized into 14 categories spanning seven aesthetic families (Earthy, Feminine, Coastal, Bold, Boho, Vintage, Luxury), Iconic Brands (Facebook, Instagram, Tesla, Nike, McDonald's, Spotify, Google, Netflix, Coca-Cola), developer/editor/terminal themes (Dracula, Nord, Gruvbox, Tokyo Night, Catppuccin, Solarized, Monokai, One Dark, Synthwave 84), Master Painters (Rothko, Pollock, Picasso, Rembrandt, Van Gogh, Monet, Klimt, Vermeer, Hokusai, Matisse, Frida Kahlo, Mondrian), and Directors & Cinematographers (Spielber

Frontend & Design

Dejank

gbasin/dejank

Detect and diagnose visual jank in React UIs. Covers two modes -- static analysis of code patterns that cause flicker, layout shift, and flash of intermediate state (for pre-merge review or preventive sweeps), and runtime investigation of specific visual symptoms (flicker, blink, jump, stutter, remount churn, scroll reset, post-paint correction). Use when the user mentions jank, something feeling off, flashing, blinking, layout shifting, full repaints, or wants a render stability audit.

Frontend & Design

Webflow to React

dmenchaca/webflow-to-react

Converts a Webflow HTML export into a maintainable React app with TanStack Start (SSR, TanStack Router conventions) using an idiomatic React-first approach. Sets up Storybook early, builds UI primitive + page-section SOT components with variant stories before composing routes. Use when the user has a Webflow export (index.html + css/ + js/ + images/ + fonts/) and wants to migrate to React, when they mention TanStack Start, TanStack Router, SSR, Storybook, SOT components, "convert Webflow to React", or when a repo already contains a Webflow export at its root. Works in Cursor, Claude Code, GitH

Frontend & Design

Stark

f0d010c/stark

Use for UI/UX design, product flows, frontend or native interface design, design audits, design translation, asset planning, motion direction, design tokens, or distinctive non-generic apps and websites. Covers web and React, Windows and WinUI/Mica, Apple and SwiftUI, Android and Jetpack Compose/Material, cross-platform UI, and token export. Route to the focused skill, then load only the references required for the selected surface and failure mode.

Frontend & Design

UX Audit

EliaAlberti/ux-audit-skill

Run a heuristic UX audit of a customer journey from screenshots. Use when the user asks for a UX audit, heuristic evaluation, usability review, design teardown, or expert review of screens, mockups, or a flow, whether your own product or a competitor's. Evaluates against named frameworks (Nielsen, Shneiderman, Gerhardt-Powals, Bastien & Scapin, Hick/Fitts/Miller/Jakob/Peak-End, Fogg, Cialdini, Gestalt, Norman, Tognazzini, WCAG 2.1, content design heuristics) and produces severity-rated findings with heuristic citations, annotated screenshots, and a structured markdown report. Do not use for ge

Frontend & Design

Figma to Swiftui

daetojemax/figma-to-swiftui-skill

Implement or update iOS SwiftUI UI from Figma designs; also use for implementation plans, token mapping, or asset export for that UI.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.