# pixi-effects

> Declarative motion graphics and video for the web. Describe a video as plain objects (text, shapes, images, video, audio, nested compositions, a 2.5D camera, optional three.js), play it in a canvas, export MP4 / WebM / MOV. Built on PixiJS v8 and mediabunny. Written to be authored by AI: no per-frame code.

Rules that cause most failures (details in the skill and pitfalls):

- Keyframe `at` is measured from the start of its own layer (negative = back from the layer's end). A layer's `at` and a transition's `at` are composition time.
- Layers are hidden, not removed, after their lifespan; z-order is array order (later = on top).
- Angles are degrees; +z is toward the viewer; any number can be an expression such as 'GW/2 - w/2'.
- Anchors: rect/circle/ellipse are centred, text and image are top-left, compositions use pivotX/pivotY.
- Verify by looking: seek with `await movie.gotoFrame(n, true)`, check at least 5 timestamps, and read `window.__logs` (library warnings are instructions).

## Start here

- **If you are an AI in a chat with no shell and no files** (a browser chat, a preview window): read only [Chat guide](https://raw.githubusercontent.com/yjmtmtk/pixi-effects/main/ai/CHAT.md) and copy [chat-template.html](https://raw.githubusercontent.com/yjmtmtk/pixi-effects/main/ai/chat-template.html); everything below is for an AI that can run commands.
- **If your agent supports skills:** `npx skills add yjmtmtk/pixi-effects` registers the workflow below as a skill (Claude Code also: `/plugin install pixi-effects --marketplace yjmtmtk/pixi-effects`)
- [Skill: workflow and rules](https://raw.githubusercontent.com/yjmtmtk/pixi-effects/main/skills/pixi-effects/SKILL.md): how to build, check and export a video; read first
- [Quick start](https://raw.githubusercontent.com/yjmtmtk/pixi-effects/main/skills/pixi-effects/reference/quickstart.md): 2 KB: the commands (`npx pixi-effects new | view | check | help <word> | recipe [id]`), a working title card, and what goes wrong most; read this before the cheatsheet
- [Cheatsheet](https://raw.githubusercontent.com/yjmtmtk/pixi-effects/main/skills/pixi-effects/reference/cheatsheet.md): every layer type, prop, default and convention on one page (look things up here, or `npx pixi-effects help <word>`)
- [Recipes](https://raw.githubusercontent.com/yjmtmtk/pixi-effects/main/skills/pixi-effects/reference/recipes.md): tested building blocks (kinetic type, lower-third, count-up, bar chart, 2.5D title, camera orbit, slideshow with transitions, sound effects without files, music written as text, three.js, a presentation deck, visuals that follow music)
- [Pitfalls](https://raw.githubusercontent.com/yjmtmtk/pixi-effects/main/skills/pixi-effects/reference/pitfalls.md): real mistakes made by AI authors, with fixes
- [Directing a film](https://raw.githubusercontent.com/yjmtmtk/pixi-effects/main/skills/pixi-effects/reference/direction.md): for an AI with a shell and files: a product film or company intro, before building: brief, style guide, shot list, assets rule, review protocol (any renderer; a browser chat skips it)
- [Starter template](https://raw.githubusercontent.com/yjmtmtk/pixi-effects/main/skills/pixi-effects/template.html): copy this file to begin

## Reference

- [DSL reference](https://raw.githubusercontent.com/yjmtmtk/pixi-effects/main/docs/dsl.md): composition, sequences, 3D layers and camera, keyframes, expressions, filters, transitions, presets (wiggle, stagger, animateText, followPath, particles, react, deck), music written as text, stops for presentations
- [API reference](https://raw.githubusercontent.com/yjmtmtk/pixi-effects/main/docs/api.md): Movie, Controller, Presenter (presentations, PDF export), audio analysis (audioEnvelope), events, render options, pixi-effects/three
- [Media tools](https://raw.githubusercontent.com/yjmtmtk/pixi-effects/main/docs/media.md): `npx pixi-effects probe | trim | frames | sound`: look at, listen to and cut a video or sound you were handed, with no ffmpeg installed
- [README](https://raw.githubusercontent.com/yjmtmtk/pixi-effects/main/README.md): install, CDN import map, quickstart

## Optional

- [Everything above in one file](https://raw.githubusercontent.com/yjmtmtk/pixi-effects/main/llms-full.txt)
- [Gallery](https://yjmtmtk.github.io/pixi-effects/examples/gallery/), [playground](https://yjmtmtk.github.io/pixi-effects/examples/playground.html) and [For AI](https://yjmtmtk.github.io/pixi-effects/for-ai.html)