SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsvfx-video

vfx-video

Design & creation

View repository

Updated 10-15 21:54

About this skill

vfx-video — VFX video & web animation generation

Turn requirements intoVFX video (MP4)orweb display animation (HTML). Core idea:compute first with Python, then animate; everything is organized according to AE implementation principles(Layer / Keyframe / Easing / Composite / effect stack / motion blur).

Comes with a pure Python compositing engine vfxkit（numpy+scipy+Pillow+ffmpeg，does not depend on Manim). For physics/math simulations use scipy to solve differential equations and obtain trajectories, then sample and draw frame by frame. Reference implementations:ManimCommunity/manim(Manim is optional in this skill, used only for LaTeX vector formulas).

In this document, <skill> = this skill directory (within the project it is vfx-video/, i.e. 特效视频/vfx-video). For the executor:Strictly follow the stages; wherever a still frame can be rendered and visually inspected, always look first before continuing. If unsure about an API, read references/vfxkit-guide.md, don't guess from memory.

0. Core principles (required reading)

  1. Recipes first (most important). The most reliable way to produce a "premium feel" is to use high-level recipes vfxkit.recipes + named palettes vfxkit.palettes，do not assemble primitive elements from scratch. Recipes already have polished keyframes/easing/glow/color grading/readability built in. Check references/recipes.mdfirst; a finished piece can be made in a few lines.But recipes are the floor, not the ceiling—for effects that recipes do not have, drop down to low-level primitives and customize:ShapeLayer(draw_fn) arbitrary frame-by-frame drawing, arbitrary img→img numpy pixel effects,scipy custom physics, arbitrary easing functions. For the complete customization guide, see references/extend.md(capability ceiling = "you can compute every frame's pixels").
  2. Design first, code later. Do not write code without a storyboard. See stage B.
  3. One screen tells one thing. Before moving to the next point, fade out the elements from the previous screen that are no longer needed.Never let elements overlap or drift off-screen.
  4. Compute first, draw later. Physics/math: first use vk.physics.* to solve the trajectory Interp, rendering only does "sampling + drawing", not live integration at every frame.
  5. Automatic self-check + small-step verification (key feedback loop). Before rendering, first run check_comp.py(automatically detects drawing issues/blank frames/low contrast/overlap, no need to view the image), fix according to the prompts; then render.py --still T output a PNG to personally inspect the layout; only then render the video.
  6. Determinism. Randomness (particles/grain) must always be passed a fixed seed; time is only taken from the input parameter t .
  7. Self-check before delivery. For video, confirm the MP4 exists and can play; for web, confirm the browser can open it and interactions work.

1. Stage overview (copy this checklist first to track)

进度：
- [ ] A. 明确需求（类型/形式/画幅时长/风格/数据来源）
- [ ] B. 写分镜 storyboard.md + 选引擎与产物形式
- [ ] C. 准备环境（setup.sh + check_env.py）
- [ ] D. 制作
        视频：选调色板+配方组装 build() → check_comp.py 自检 → 静帧自检 → 完整渲染 → 验证 MP4
        网页：套 HTML 模板 → 填内容/交互 → 浏览器验证
- [ ] E. 交付（文件路径 + 如何查看 + 默认值 + 可调项）

2. Stage A — Clarify requirements

Confirm the following items.For anything the user has not made clear, use reasonable defaults and explain them at delivery; do not repeatedly ask follow-up questions.

Dimension Key point Default
Type Text/shape animation · Image→effect video · Physics/math simulation · Comprehensive Depends on user description
Form Video (MP4) / Web page (HTML) / Both See decision below
Aspect ratio · Frame rate · Duration 1920×1080 / 30fps / Short film 6–15s hook; 30s full
Style Color scheme/font/rhythm (cinematic/tech/minimal/data…) Dark + high contrast
Data source What equations/parameters to use for physics simulation See physics-cookbook.md
Language Chinese and English (text layer cjk=True displays Chinese) Follow the user (Chinese)

Form decision: Need a fixed-duration finished video/publish to platform/heavy effects → Video; need to drag parameters and see instantly/embed in a web page/interaction → Web page; both → first use video to tell the main story, then use a web page for exploration.

3. Phase B — Write the storyboard + choose the engine (most important)

Copy templates/storyboard.md and fill it in. A qualified storyboard includes:One-sentence goal + Shot list(each shot: visuals/animation keyframes/transition method) + Ending。

Choose the engine:

Requirement Engine Entry point
Text/shape animation, effect videos vfxkit templates/comp_project.py
One image → effect animation video vfxkit templates/image_effect.py
Physics/math simulation (double pendulum, etc.) vfxkit + vk.physics references/physics-cookbook.md
Web page display/interactive animation HTML Canvas templates/web_animation.html
Must have LaTeX vector formula typesetting Manim (optional) references/manim-optional.md

You must have a storyboard before entering Phase D.

4. Phase C — Prepare the environment (only needed for making videos; pure web pages can skip)

Execute in order,check the output at each step：

bash <skill>/scripts/setup.sh        # 装 numpy/scipy/Pillow，检查 ffmpeg（幂等，轻量）
python3 <skill>/scripts/check_env.py # 必须 PASS 才继续
python3 <skill>/scripts/selftest.py  # 可选：端到端跑一遍引擎

manim and LaTeX are shown as optional,all effects can be made without them. Only when LaTeX formulas are needed setup.sh --with-manim。

5. Phase D — Video (vfxkit)

First read references/recipes.md(scene→recipe quick reference, most commonly used); if you need to hand-write primitives or troubleshoot, then read references/vfxkit-guide.md; for images/physics read references/image-effects.md、references/physics-cookbook.md。

Execute step by step:

  1. Create project: create in the workspace <英文短名>/video.py(or copy templates/comp_project.py). The file must define build() -> vk.Composition。
  2. Recipe-first assembly build(): choose palettes.get(...) palette → from recipes.md copy the recipe for the corresponding scene (rich_background / kinetic_text / text_shine / ken_burns / trail / tagline / transition / flip_in / equalizer / particle_burst …) → finally rx.cinematic_grade(comp). Only when the recipes are insufficient, hand-write layers + keyframes (see extend.md）。
  3. Automatic self-check (required)：
python3 <skill>/scripts/check_comp.py video.py    # 查出画/空帧/低对比/重叠，按提示改
  1. Still-frame self-check：
python3 <skill>/scripts/render.py video.py --still 2.0 --out /tmp/p.png   # 能看图就亲眼确认布局
  1. Draft/final render：
python3 <skill>/scripts/render.py video.py draft.mp4 --fps 24 --preset ultrafast --crf 24   # 草稿
python3 <skill>/scripts/render.py video.py out.mp4   --preset slow --crf 18 --mb 8           # 定稿
  1. Verify MP4: confirm the file exists and size > 0, you can use ffmpeg -ss T -i out.mp4 -frames:v 1 f.png to extract frames for confirmation.

Physics simulation key points：traj, meta = vk.physics.XXX(...) Compute the trajectory first;rx.trail(comp, sample_fn) draw the trail,ShapeLayer(draw) in state=traj(t) sample and draw the rods/balls;solve_fps far above the video fps to ensure stability. For the complete runnable code, see references/physics-cookbook.md。

Video quality baseline: no overlap/going off-screen, sufficient contrast, stays long enough to finish reading the subtitles, (physics) trajectory is correct, and there is a freeze frame or clean fade-out at the end.

6. Phase D — Web page (HTML Canvas)

Read references/web-animation.md, copy templates/web_animation.html and modify.

  1. Copy as index.html. Built in: dark theme, DPR-adaptive canvas,requestAnimationFrame loop, CSS kinetic title, (example) RK4 double pendulum.
  2. Fill in content: real-time physics integration or precomputed trajectory playback; use CSS keyframes/gradients for text; use Canvas2D for shapes (shadowBlur for glow).
  3. Add interaction(if needed):<input type=range> bind parameters → redraw; click/keyboard control.
  4. Verify: open in browser (mac open index.html), confirm the animation is smooth, no distortion on resize, interactions work, and it is usable on mobile.

Web page quality baseline: single file can be opened directly; at least 1 interaction that truly affects the visuals (if positioned as interactive); responsive without overflow.

7. Phase E — Delivery

Provide a brief delivery note:

  • Artifact paths (MP4 / HTML / storyboard / project .py).
  • How to view (use a player for video; double-click for web page or open）。
  • Which defaults were used (aspect ratio/duration/style/engine).
  • Points for further polish (change color scheme, extend shots, add motion blur, add interactive parameters, swap in real images/depth-map parallax, add voiceover/BGM).

8. Common errors quick reference

Symptom Cause Fix
ffmpeg not found ffmpeg not installed brew install ffmpeg
Jagged lines/curves ShapeLayer insufficient anti-aliasing Use ss=3(default) or ss=4; default resolution is 1080p
Chinese/arrows/symbols become boxes cjk not enabled TextLayer(..., cjk=True) / cv.text(..., cjk=True)
Text is not in the expected position Layers are centered automatically by default Explicitly position.const([x,y])
Layer does not appear opacity=0 / outside the time window / off-screen --still confirm at that moment; check keyframes and start/end
Physics animation goes crazy/unstable Step size too large Increase solve_fps; add to rendering --mb 8
Rendering is very slow Full-frame effects + high resolution Lower the settings for drafts (low resolution/ultrafast/disable heavy effects); apply the final settings only for the final version
latex failed(Manim only) Used MathTex but no LaTeX Install LaTeX or change to Text; or just use vfxkit

For complete troubleshooting, see references/vfxkit-guide.md。

Resource index

  • references/recipes.md — Scenario→recipe quick reference (most commonly used, look at this first)
  • references/extend.md — Beyond recipes: custom drawing/effects/physics/easing (look here when recipes are not enough; includes capability boundaries and workarounds)
  • references/ae-principles.md — AE concepts → vfxkit comparison (layers/keyframes/easing/effects/blending/motion blur/expressions)
  • references/vfxkit-guide.md — Engine API, easing tables, effects tables, drawing API, discipline, error quick reference
  • references/image-effects.md — Image→effect video (Ken Burns/light sweep/particles/color grading/2.5D parallax)
  • references/physics-cookbook.md — Physics/math simulation recipes (double pendulum/N-body/Lorenz/projectile/vibrating string/Fourier)
  • references/web-animation.md — Self-contained HTML Canvas animation and interaction
  • references/manim-optional.md — When and how to use Manim (LaTeX vector formulas only)
  • templates/comp_project.py · image_effect.py · web_animation.html · storyboard.md
  • examples/gorden_title/render.py — Dazzling per-character text animation example (only 8-line recipe: background + per-character + burst + light sweep + tagline + color grading), including finished video out.mp4 and GIF preview. For more scenarios such as physics/data/transitions, see references/recipes.md、references/physics-cookbook.md、references/extend.md
  • scripts/setup.sh · check_env.py · render.py(runner) · check_comp.py(automatic check) · selftest.py
  • vfxkit/ — Engine source code:recipes(high-level recipes) · palettes(palette) · easing / keyframe / layer / effects / comp / shapes / physics