kiselas

Every Frame Is Code — Development skill for Claude Code

Development community

Every frame is code: an Agent Skill for Claude Code, Codex and ChatGPT that makes motion graphics, 3D scenes and games in HTML/JS and renders them to MP4 frame by frame.

How to install Every Frame Is Code

This entry records only its repository, not the path inside it, so there is no exact command to give. Open kiselas/every-frame-is-code and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Every Frame Is Code does

Every frame is code: an Agent Skill for Claude Code, Codex and ChatGPT that makes motion graphics, 3D scenes and games in HTML/JS and renders them to MP4 frame by frame. Canvas 2D, WebGL, Three.js, GLSL, Web Audio.

Alternatives in Development

Portaljs Add Chart — Add a chart (line, bar, area, pie, or scatter) to a dataset's showcase in a PortalJS portal 2.3k ★
JEngine — The solution that allows unity games to update in runtime 2.2k ★
Ian Xiaohei Scenes — Xiaohei 2.0 Codex Skill for Chinese real-object article illustrations and long-scroll story images 486 ★

README

motion-kit

**Every frame is code.** A knowledge kit that lets an AI agent make graphics with code:
videos, explainers, kinetic typography, 3D scenes and games, and then render them to MP4 on its own.

Demo film teaser: fire, engraving, 3D sphere, palette montage, pixel game, transition catalog, contact sheet, final title

Not a single generated pixel: the whole film is one HTML file that draws every frame.
Source: examples/demo/demo.html · script: examples/demo/SCRIPT.md

[![License: MIT](https://img.shields.io/badge/license-MIT-black)](LICENSE) [![Agent Skill: Claude · Codex · ChatGPT](https://img.shields.io/badge/Agent_Skill-Claude_·_Codex_·_ChatGPT-d97757)](SKILL.md) ![Canvas 2D · WebGL · Three.js · Web Audio](https://img.shields.io/badge/Canvas_2D_·_WebGL_·_Three.js_·_Web_Audio-1d3557)

Why

Models can write graphics code, but without rules they produce the same screensaver every time: a dark navy background, a neon gradient, particles "for atmosphere", everything moving linearly and all at once, text on top of objects, and crossfades as the only transition.

motion-kit is a set of rules and recipes that closes those gaps. The core architectural idea: **a frame is a pure function of time**, `draw(ctx, t)`. Everything else follows from it:

seek to any second: a frame does not depend on the previous ones;
frame-by-frame rendering without stutter: headless Chrome waits for every frame, however long it takes to draw;
one-line edits: change an easing curve or a color, re-render, and get the same film with exactly one difference;
sound in sync with the picture: the Web Audio score reads the same event list as the drawing code.