JavaScript Animation Skills

Draw canvas films and synthesize their soundtracks in code.

The author’s two-Skill package combines JavaScript animation with a Web Audio soundtrack workflow. It produces frame-controlled motion and checks audio-video synchronization without requiring generated image assets.

Use cases

  • Create a canvas animation film
  • Synthesize music and effects in code
  • Render and check synchronized video

How to use

Provide the story, visual style, duration, and output format. Keep the animation and soundtrack timing coordinated, then follow upstream rendering and synchronization checks.

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