SVG Animator

Generate animated videos from SVG frames using text LLM. Supports any subject (animals, humans, characters, scenes, abstract art), automatic duration calcula...

Security Scan

The skill is mostly coherent for generating SVG-based animations locally, but there are some mismatches and modest risks (shell execution with user inputs; the README/description mentions LLM use while the code does not call any model or require API keys).

Purpose & Capability

Name and description claim 'use text LLM to generate SVG code' and 'no video API needed'. The SKILL.md instructs the agent to use its text model to generate SVG snippets and then use local tooling (rsvg-convert, ffmpeg) to render/encode. The included script (scripts/animate.js) programmatically generates SVG frames from a 'theme' string rather than calling any external LLM APIs. This is explainable (the agent/LLM itself could generate SVG text), but the description may lead users to expect networked LLM integration or API keys which are not present.

Instruction Scope

SKILL.md directs the agent and the script to write files to /tmp, convert SVG→PNG with rsvg-convert, and encode with ffmpeg. It also suggests copying output into an nginx directory to serve files. The instructions invoke shell commands (rsvg-convert, ffmpeg) and write to filesystem paths provided by the user (e.g., output path). There is no instruction to read unrelated system files or environment variables, but executing shell commands with user-supplied paths can be risky if inputs are not sanitized.

Install Mechanism

No install spec (instruction-only) and a single JS script included. This is low risk in terms of untrusted downloads. The skill requires system binaries (ffmpeg, rsvg-convert) that must be present; SKILL.md explicitly documents that requirement.

Credentials

The skill requests no environment variables or credentials (appropriate for its stated purpose). The code uses child_process.execSync to run external tools; if the script or agent interpolates untrusted user input into shell commands, that could permit command injection or privilege misuse. No network endpoints or secrets are requested.

Persistence & Privilege

always:false and no evidence of the skill attempting to alter other skills or global agent configuration. It writes temporary files under /tmp and may suggest copying to an nginx directory (user action). The skill does not appear to request persistent elevated privileges.

What to consider before installing

This skill is mostly coherent for generating SVG frames and assembling them into videos using local tools (ffmpeg and rsvg-convert). Before installing or running it: 1) Understand it runs local shell commands and writes files (default /tmp) — test in an isolated/sandbox environment. 2) Ensure ffmpeg and rsvg-convert are installed from your OS package manager. 3) Inspect scripts/animate.js for any execSync calls that include unsanitized user-supplied strings (output paths, --theme, --story). If you allow untrusted input, escape or validate it to avoid command injection. 4) The description mentions using a text LLM to generate SVG; the code does not contact any LLM API or require API keys — this is likely because the agent/LLM is expected to produce SVG text. If you need a networked LLM integration, confirm how credentials would be provided. 5) Avoid running this as root and avoid auto-copying outputs into webserver directories without checking file ownership/permissions. If you want higher assurance, run the script in a container or review the full, untruncated animate.js to confirm there are no unexpected execSync invocations or hidden network calls.

用文本模型生成 SVG 代码，逐帧渲染后合成视频。完全不需要视频生成 API！

支持的场景

• 动物：小狗奔跑、小猫跳跃、鱼儿游泳、鸟儿飞翔
• 人物：走路、跑步、跳舞、工作场景
• 场景：日出日落、云彩飘动、树叶落下、雨滴下落
• 抽象：几何变换、颜色渐变、粒子效果
• 故事：多场景连续动画（需要多段拼接）

使用流程

用户：生成一个"小猫伸懒腰"的动画
↓
1. 理解需求 → 确定主题、动作、时长
2. 设计帧序列 → 每帧的 SVG 代码
3. 生成帧 → Node.js 生成 SVG → rsvg-convert 转 PNG
4. 合成视频 → ffmpeg 合成 MP4/GIF
5. 输出 → 返回文件路径或 nginx 链接

时长计算规则

需求	帧数	时长	fps
简单动作（伸懒腰、眨眼）	8-12帧	1秒	10
常规动作（走路、跑步）	16-24帧	2秒	12
复杂动作（跳舞、翻滚）	30-48帧	3-4秒	12
短故事（2-3个场景）	60-120帧	5-10秒	12
长故事（5+场景）	120+帧	10秒+	15

动画原理

周期性运动（正弦函数）

// 帧索引 i，总帧数 totalFrames
const t = (i / totalFrames) * Math.PI * 2;  // 0 → 2π 循环

// 腿部摆动
const legOffset = Math.sin(t) * 40;

// 尾巴摇动
const tailAngle = Math.sin(t * 2) * 25;

// 身体上下颠簸
const bodyY = Math.sin(t) * 5;

多元素协调

// 腿、尾巴、身体用同一个 t，但幅度不同
const legPhase = t;           // 腿部周期
const tailPhase = t * 2;      // 尾巴周期快一倍
const bodyPhase = t;          // 身体与腿同步

// 组合使用
legOffset = Math.sin(legPhase) * 40;
tailAngle = Math.sin(tailPhase) * 25;
bodyY = Math.sin(bodyPhase) * 5;

帧生成代码模板

const fs = require('fs');
const { execSync } = require('child_process');

const frames = 24;  // 根据时长需求调整
const size = 400;

for (let i = 0; i < frames; i++) {
  const t = (i / frames) * Math.PI * 2;
  
  // 计算运动参数
  const legOffset = Math.sin(t) * 40;
  const tailAngle = Math.sin(t * 2) * 25;
  // ... 更多参数

  const svg = `<svg width='${size}' height='${size}' xmlns='http://www.w3.org/2000/svg'>
    <!-- 背景 -->
    <rect width='${size}' height='${size}' fill='#87CEEB'/>
    
    <!-- 地面 -->
    <rect x='0' y='${size*0.88}' width='${size}' height='${size*0.12}' fill='#90EE90'/>
    
    <!-- 主体 - 使用运动参数 -->
    <ellipse cx='${200 + legOffset * 0.5}' cy='${250 + Math.sin(t)*5}' ... />
    <!-- 更多元素 -->
  </svg>`;

  fs.writeFileSync(`/tmp/frames/frame_${String(i).padStart(2, '0')}.svg`, svg);
}

// 转 PNG
execSync('rsvg-convert frame_*.svg -o frame_%02d.png');

// 合成视频
execSync('ffmpeg -y -framerate 12 -i frame_%02d.png -c:v mpeg4 -q:v 2 output.mp4');

常用动画参数

走路/奔跑

const runCycle = {
  legSwing: Math.sin(t) * 40,      // 腿摆动幅度
  bodyBob: Math.sin(t * 2) * 5,   // 身体颠簸
  tailWag: Math.sin(t * 2) * 30,  // 尾巴摇
  armSwing: Math.sin(t) * 25      // 手臂摆动
};

飞行

const flyCycle = {
  wingUp: Math.sin(t) * -45,      // 翅膀上扬
  wingDown: Math.sin(t) * 45,     // 翅膀下落
  bodyTilt: Math.sin(t) * 10,     // 身体倾斜
  glide: Math.sin(t) * 20         // 滑翔高度变化
};

跳跃

const jumpCycle = {
  yOffset: -Math.abs(Math.sin(t)) * 100,  // 垂直位移
  legTuck: Math.abs(Math.sin(t)) * 30,   // 收腿
  armUp: Math.abs(Math.sin(t)) * -30      // 举手
};

摇摆/晃动

const swayCycle = {
  rotation: Math.sin(t) * 15,     // 整体摇摆角度
  xOffset: Math.sin(t) * 10,     // 水平位移
  wave: Math.sin(t * 3) * 5      // 轻微晃动
};

场景动画示例

日出

// 太阳从地平线升起
const progress = i / frames;
const sunY = size * 0.8 - progress * size * 0.6;  // 从下往上
const skyGrad = `rgb(${255 * progress}, ${200 * progress}, ${100 + 155 * progress})`;

云飘动

const cloudX = (i / frames) * size * 1.5;  // 从左往右
// 云朵透明度随位置变化
const opacity = 1 - (cloudX / size) * 0.5;

雨滴下落

// 多滴雨
for (let drop = 0; drop < 10; drop++) {
  const startFrame = (frames / 10) * drop;
  const dropPos = ((i - startFrame) / frames) * size;
  // 绘制雨滴在 dropPos 位置
}

多场景故事动画

当用户需要"讲一个故事"时，生成多个场景然后拼接：

// 场景1：小猫醒来（12帧）
// 场景2：伸懒腰（12帧）  
// 场景3：玩耍（24帧）
// 场景4：吃饭（16帧）
// 场景5：睡觉（12帧）

// 分别生成后用 ffmpeg 拼接
const scenes = ['scene1.mp4', 'scene2.mp4', 'scene3.mp4'];
const concatList = scenes.map(s => `file '${s}'`).join('\n');
fs.writeFileSync('/tmp/concat.txt', concatList);
execSync(`ffmpeg -y -f concat -safe 0 -i /tmp/concat.txt -c copy story.mp4`);

完整工作流

Step 1: 分析需求

"生成一个小狗追蝴蝶的故事动画"

分解：

• 主题：小狗 + 蝴蝶
• 动作：追逐（小狗跑 + 蝴蝶飞）
• 场景：草地、天空
• 时长：5-8秒（3个场景）

Step 2: 设计场景

1. 场景1（0-3秒）：小狗看到蝴蝶

   • 小狗站立，尾巴摇
   • 蝴蝶飞过

2. 场景2（3-6秒）：追逐

   • 小狗奔跑（24帧循环）
   • 蝴蝶飞舞（上下移动）

3. 场景3（6-8秒）：抓到/没抓到

   • 小狗停下
   • 蝴蝶继续飞 / 小狗开心

Step 3: 生成代码

# 创建帧目录
mkdir -p /tmp/animation_frames

# 用 Node.js 生成 SVG（根据设计的场景）
node generate_story.js

# 转换 PNG
rsvg-convert /tmp/animation_frames/*.svg -o /tmp/animation_frames/frame_%04d.png

# 合成视频
ffmpeg -y -framerate 12 -i /tmp/animation_frames/frame_%04d.png \
  -c:v mpeg4 -q:v 2 /tmp/story.mp4

Step 4: 提供下载

复制到 nginx 目录或直接发送文件路径

注意事项

1. ffmpeg 必须安装 - dnf install ffmpeg 或 apt install ffmpeg
2. rsvg-convert 必须 - 用于 SVG → PNG
3. 帧数不要太多 - 超过 200 帧可能很慢
4. 复杂故事分场景 - 不要把所有动作放一帧里
5. 背景简洁 - 复杂背景会影响性能

辅助脚本

使用 scripts/animate.js 简化流程：

# 基本动画
node scripts/animate.js --theme "dog running" --frames 24 --output /tmp/dog.mp4

# 自定义时长（秒）
node scripts/animate.js --theme "cat stretching" --duration 2 --output /tmp/cat.mp4

# 多场景故事
node scripts/animate.js --story "小兔子的一天" --scenes 5 --output /tmp/rabbit_day.mp4

输出格式

• MP4：适合分享，文件小
• GIF：适合嵌入网页/文档
• 链接：部署到 nginx 通过 http 提供

# 转 GIF
ffmpeg -i input.mp4 -vf "fps=12,scale=480:-1:flags=lanczos" output.gif