JavaScript 动画技能

用代码绘制 Canvas 影片并合成配乐。

作者的双技能包组合 JavaScript 动画与 Web Audio 配乐流程，控制逐帧运动并检查音画同步，无需依赖生成图像素材。

适用场景

  • 制作 Canvas 动画影片
  • 用代码合成音乐和音效
  • 渲染并检查音画同步

使用方法

提供故事、视觉风格、时长和输出格式，协调动画与配乐时序，再按上游流程渲染和检查同步。

Skills

  • javascript-animation

    This skill should be used when the user asks to "draw every frame in JavaScript", "make an animation with no image assets", "animate this in code / on a canvas", "make a hand-drawn style animated video", "turn this into a short animated film", "make an animated explainer drawn in code", "make an animated story / picture book of my photos", or "make a zero-asset animation like the Opus 5.5 ones". Produces a single self-contained HTML file whose frames are computed on an HTML canvas (seekable, deterministic), renders it to MP4, and self-checks the result. Pairs with the soundtrack skill for code-synthesized music. NOT for charts from data (use chart-animation) or 3D/WebGL (use threejs-animation / shader-glsl from webgl-animation-skills); pure text motion and depth drawn by projection on the 2D canvas are in scope.

    iart-ai/javascript-animation-skills

  • soundtrack

    This skill should be used when the user asks to "add music to the animation", "make the music in code", "synthesize a soundtrack", "compose background music that fits the cuts", "sync the music to the video", "check if the audio lines up with the picture", or "the music is too sudden / startling". Covers a code-synthesized score that lives inside the animation page (Web Audio API, rendered offline to WAV), AI-generated or user-supplied music, and an automatic check that cuts land on the beat without a startling jump in loudness.

    iart-ai/javascript-animation-skills