# Motion Kit

> Code-drawn motion graphics, animated videos, explainers, kinetic typography, transitions, editing, Three.js scenes and browser games with strong game feel. Use when you need to make a good-looking animation, video, intro, interactive scene or game in HTML/JS and render it to MP4.

- **Type:** Skill
- **Install:** `agentstack add skill-kiselas-every-frame-is-code-every-frame-is-code`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [kiselas](https://agentstack.voostack.com/s/kiselas)
- **Installs:** 0
- **Category:** [Web & Browser](https://agentstack.voostack.com/c/web-and-browser)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [kiselas](https://github.com/kiselas)
- **Source:** https://github.com/kiselas/every-frame-is-code
- **Website:** https://kiselas.github.io/every-frame-is-code/

## Install

```sh
agentstack add skill-kiselas-every-frame-is-code-every-frame-is-code
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Motion Kit

1. Read `00-agent-brief.md` in full. These rules are mandatory.
2. Read the files for the task:
   - any video: `01-pipeline.md`, `04-motion-easing.md`, `06-montage.md`, `12-render-qa.md`, `13-performance.md`;
   - choosing a style: `03-visual-style.md`;
   - transitions between scenes: `05-transitions.md`;
   - fire, particles, glow, grain, shaders: `07-effects-cookbook.md`;
   - titles and animated text: `08-kinetic-typography.md`;
   - music, sound effects, voice-over: `09-audio-sync.md`;
   - games: `10-games-juice.md`;
   - 3D: `11-threejs.md`.
3. Show the plan as data first (style, beat grid, shots, events), then write the code.
4. Write the page to render fast from the start (`13-performance.md`): sprites instead of per-draw blur, no pixel readbacks in the frame loop, static layers cached. Iterate with `render.mjs --draft` on fragments.
5. After rendering, build a contact sheet (`render/contact-sheet.sh`), look at it, and fix issues by specific timecodes.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [kiselas](https://github.com/kiselas)
- **Source:** [kiselas/every-frame-is-code](https://github.com/kiselas/every-frame-is-code)
- **License:** MIT
- **Homepage:** https://kiselas.github.io/every-frame-is-code/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-kiselas-every-frame-is-code-every-frame-is-code
- Seller: https://agentstack.voostack.com/s/kiselas
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.