pixi-effects 0.50.0 → 0.50.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.50.1
+
+Fixes from a trial of 8 fresh agents (Sonnet, Opus) making videos with `scene2d` / `scene3d` on 0.50.0; nothing breaks.
+
+- **Fixed: an `.ogg` sound played nothing, with no warning.** PixiJS's own video loader took `.ogg` as a video, so an audio layer on it was silent and `check` said nothing; `.m4a`, `.flac` and `.opus` had no loader at all and stopped `init` with "Cannot read properties of null". An audio asset may now be `.mp3`, `.wav`, `.ogg`, `.oga`, `.m4a`, `.aac`, `.flac` or `.opus` (a query after the name is fine), and a sound asset that did not load, or a video with no sound track used as one, stops `init` with the layer, the asset, its file and the formats. Test film `audio-formats`.
+- **PixiJS's official skills are named where an agent writes PixiJS code.** `scene2d` and `scene3d` hold plain PixiJS / PixiJS 3D code, and PixiJS publishes official skills for both (`npx skills add pixijs/pixijs-skills`, MIT); SKILL.md, AGENTS.md, the README, the For AI page and the `scene2d` / `scene3d` sections say so, with the copy inside the npm package of the version the template loads (`pixi.js@8.23.0/skills/pixijs`, `@pixi/3d@0.1.0/skills/pixijs-3d`), readable with no install. The `scene3d` section lists the @pixi/3d geometries with their options and the materials (`emissive: { color, strength }`), and says that @pixi/3d ignores an option it does not know (3 of 4 agents grepped the package's types for them; one passed `tubeRadius` to `TorusGeometry` and got a fat ring).
+- **A PixiJS deprecation keeps its message in `check` and the chat's red box.** PixiJS prints it as a collapsed console group titled with the message and only the stack inside, so the collected warning was a bare stack; both templates now put an open group's title before the warnings inside it.
+- **The sound-effect knobs are shown in place.** 4 of 8 agents wrote `pitch` beside `sfx: 'chime'` (the warning caught it); SKILL.md and CHAT.md now show `sfx: { preset: 'chime', pitch: 7 }` with the units.
+- **`three`: `ctx.objects`** in `update`, what setup returned plus `camera`, as the `scene2d` and `scene3d` layers already have.
+- **`random(seed)` and `rand(seed)` have their own section** in the API reference, so `help random` answers with them (it printed the canvas layer).
+
 ## 0.50.0
 
 Nothing breaks: `scene2d`, a layer of PixiJS 2D objects built by your code (core, nothing to import), and two fixes for every engine: a rebuild that keeps a scene starts its keyframes from setup's values, and a routed `tint` keyframe moves by channel.

package/README.md

@@ -1,6 +1,6 @@
 # pixi-effects
 
-> **Status**: experimental — current release `0.50.0`. The API may still change between minor versions; see the [CHANGELOG](./CHANGELOG.md) for what each release changed.
+> **Status**: experimental — current release `0.50.1`. The API may still change between minor versions; see the [CHANGELOG](./CHANGELOG.md) for what each release changed.
 
 **[Gallery →](https://yjmtmtk.github.io/pixi-effects/examples/gallery/)** · 43 pieces written as plain data by AI models · **[For AI →](https://yjmtmtk.github.io/pixi-effects/for-ai.html)** · what an AI reads and runs · **[Playground →](https://yjmtmtk.github.io/pixi-effects/examples/playground.html)** in the browser.
 
@@ -10,7 +10,7 @@ Give any AI (ChatGPT, Claude, Codex, Cursor, Claude Code …) one sentence:
 
 > Use https://github.com/yjmtmtk/pixi-effects to make a video: a 10-second title for a bakery, warm colours, a soft chime at the end.
 
-That is all it needs. **To register it as a skill** in your agent (Claude Code, Codex, Cursor, Gemini CLI, Copilot, OpenCode, …): `npx skills add yjmtmtk/pixi-effects` (update with `npx skills update`). In Claude Code you can also run `/plugin install pixi-effects --marketplace yjmtmtk/pixi-effects`. **If you are the AI** that was asked to do this, do not read the whole repository: if you can run commands (a shell, Node 22, Chrome), read [`AGENTS.md`](./AGENTS.md) and [`skills/pixi-effects/SKILL.md`](./skills/pixi-effects/SKILL.md); if you can only write text (a browser chat), fetch https://raw.githubusercontent.com/yjmtmtk/pixi-effects/main/ai/CHAT.md and follow it. You will write the video as plain data in one HTML file, check it (the check tool writes a contact sheet to look at), and hand it over; the person opens the file and downloads the MP4 with the button in the player bar.
+That is all it needs. **To register it as a skill** in your agent (Claude Code, Codex, Cursor, Gemini CLI, Copilot, OpenCode, …): `npx skills add yjmtmtk/pixi-effects` (update with `npx skills update`). In Claude Code you can also run `/plugin install pixi-effects --marketplace yjmtmtk/pixi-effects`. For the PixiJS code you may write inside a `scene2d` or `scene3d` layer, PixiJS's own official skills help too: `npx skills add pixijs/pixijs-skills` ([pixijs/pixijs-skills](https://github.com/pixijs/pixijs-skills)). **If you are the AI** that was asked to do this, do not read the whole repository: if you can run commands (a shell, Node 22, Chrome), read [`AGENTS.md`](./AGENTS.md) and [`skills/pixi-effects/SKILL.md`](./skills/pixi-effects/SKILL.md); if you can only write text (a browser chat), fetch https://raw.githubusercontent.com/yjmtmtk/pixi-effects/main/ai/CHAT.md and follow it. You will write the video as plain data in one HTML file, check it (the check tool writes a contact sheet to look at), and hand it over; the person opens the file and downloads the MP4 with the button in the player bar.
 
 Declarative composition and video rendering for the web. After Effects-style timelines on top of [PixiJS v8](https://pixijs.com/), with a small timeline of its own and strict TypeScript types. The ease names and the way `to` / `from` / `set` read are [GSAP](https://gsap.com/)'s, with thanks. Render to MP4 / WebM / MOV via [mediabunny](https://mediabunny.dev/).
 
@@ -52,8 +52,8 @@ Drop the imports into an [importmap](https://developer.mozilla.org/docs/Web/HTML
   "imports": {
     "pixi.js":                 "https://esm.sh/pixi.js@8.23.0?bundle-deps",
     "mediabunny":              "https://esm.sh/mediabunny",
-    "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.50.0/dist/index.js",
-    "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.50.0/dist/Controller.js"
+    "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.50.1/dist/index.js",
+    "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.50.1/dist/Controller.js"
   }
 }
 </script>
@@ -66,7 +66,7 @@ Drop the imports into an [importmap](https://developer.mozilla.org/docs/Web/HTML
 
 The `mediabunny` line is needed only to export (the download button, `movie.render()`) or for a `video` layer; a page that only plays can leave it out and never fetches it (or call `useMediabunny(url)` instead, see [the API](docs/api.md#where-the-encoder-comes-from-usemediabunnysource)).
 
-Load the `dist/` files **as they are** (jsDelivr's `/npm/…/dist/…`, or unpkg's `https://unpkg.com/pixi-effects@0.50.0/dist/index.js`) rather than a CDN-rebundled build such as `esm.sh/pixi-effects` or jsDelivr's `+esm`: the entries (`pixi-effects`, `…/controller`, `…/three`) share internal chunks, which only works when each file is served untouched.
+Load the `dist/` files **as they are** (jsDelivr's `/npm/…/dist/…`, or unpkg's `https://unpkg.com/pixi-effects@0.50.1/dist/index.js`) rather than a CDN-rebundled build such as `esm.sh/pixi-effects` or jsDelivr's `+esm`: the entries (`pixi-effects`, `…/controller`, `…/three`) share internal chunks, which only works when each file is served untouched.
 
 > **A 3D scene?** Add three more entries (`pixi-effects/3d`, `@pixi/3d`, `@pixi/3d/extras`) — see [Adding a 3D scene](#adding-a-3d-scene-optional) below. **Using three.js?** Add two more entries (`three` and `pixi-effects/three`) to this importmap — see [Adding three.js](#adding-threejs-optional) below.
 >
@@ -81,7 +81,7 @@ Add three entries to the importmap above (PixiJS 3D needs `pixi.js` 8.23.0 or la
 {
   "imports": {
     "...":                     "(everything from the importmap above)",
-    "pixi-effects/3d":         "https://cdn.jsdelivr.net/npm/pixi-effects@0.50.0/dist/3d.js",
+    "pixi-effects/3d":         "https://cdn.jsdelivr.net/npm/pixi-effects@0.50.1/dist/3d.js",
     "@pixi/3d":                "https://cdn.jsdelivr.net/npm/@pixi/3d@0.1.0/dist/pixijs-3d.min.mjs",
     "@pixi/3d/extras":         "https://cdn.jsdelivr.net/npm/@pixi/3d@0.1.0/dist/pixijs-3d-extras.min.mjs"
   }
@@ -125,7 +125,7 @@ Add two more entries to the importmap above: three.js itself, and the `pixi-effe
     "...":                     "(everything from the importmap above)",
     "three":                   "https://esm.sh/three@0.178.0",
     "three/addons/":           "https://cdn.jsdelivr.net/npm/three@0.178.0/examples/jsm/",
-    "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.50.0/dist/three.js"
+    "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.50.1/dist/three.js"
   }
 }
 </script>

package/ai/CHAT.md

@@ -58,7 +58,7 @@ That is a complete, working video (the block between the two markers). Change th
 - **Shapes:** `shape: 'rect' | 'circle' | 'ellipse' | 'arc' | 'line' | 'polygon' | 'path'`. `rect`: `width height cornerRadius`; `circle`: `radius`; `line`: `from: [x, y], to: [x, y]` (canvas coordinates, no `x, y`); `path`: `d` (SVG path data). Style: `fillColor strokeColor strokeWidth fillAlpha`.
 - **Text:** `style` is a PixiJS text style (`fontSize fontFamily fontWeight fill letterSpacing align wordWrap wordWrapWidth lineHeight`). Use fonts that exist everywhere (`Georgia, serif`, `Arial, sans-serif`, `ui-monospace, monospace`); this page loads no web fonts. Estimate a text's width at about 0.6 × `fontSize` per character, keep important text 5 % away from the edges, and keep the bottom 60 px free (the player bar covers it in the preview, not in the file).
 - **Scenes.** Stack layers with `at` / `duration` over an opaque background rect. Do not remove layers.
-- **Sound with no files:** `{ type: 'audio', sfx: 'swoosh', at: 2 }`. Presets: `click pop swoosh swipe hit riser chime beep coin glitch typewriter`; optional `pitch`, `brightness`. A `riser` is loudest at its **end**: start it `duration` seconds before the hit. This page cannot load music or images from your own files; use shapes, text, sfx and `music` (below).
+- **Sound with no files:** `{ type: 'audio', sfx: 'swoosh', at: 2 }`. Presets: `click pop swoosh swipe hit riser chime beep coin glitch typewriter`; to change one: `sfx: { preset: 'chime', pitch: 7 }` (`pitch` in semitones, `brightness` −1 … 1; inside `sfx`, never beside it). A `riser` is loudest at its **end**: start it `duration` seconds before the hit. This page cannot load music or images from your own files; use shapes, text, sfx and `music` (below).
 - **Repeat with code, never by copying:** `Array.from({ length: 12 }, (_, i) => ({ type: 'shape', shape: 'circle', radius: 20, at: i * 0.15, duration: DURATION - i * 0.15, initial: { x: 120 + i * 90, y: 360, fillColor: '#ffd166' }, keyframes: [{ at: 0, from: { scale: 0 }, to: { scale: 1 }, duration: 0.4, ease: 'back.out(2)' }] }))` returns twelve layers: spread them into `sequences` with `...`.
 - **Helpers already imported** in the template: `kenBurns` (slow zoom for an image layer), `withFade`, `wiggle` (seeded shake as keyframes), `stagger`, `animateText` (per letter / word entrances), `followPath`, `particles` (seeded confetti / snow / sparks as layers), `deck` (slides). Each returns keyframes or layers: `keyframes: wiggle(...)`, `...particles(...)`. The full signatures are in `https://raw.githubusercontent.com/yjmtmtk/pixi-effects/main/skills/pixi-effects/reference/cheatsheet.md` (22 KB; read it only if you need a helper).
 - **Advanced:** `const INIT = { assets: [...], composition: { transitions: [...] } }` in the edit block adds `movie.init` options (the page merges it); most videos need nothing here.

package/ai/chat-template.html

@@ -39,9 +39,15 @@
       document.getElementById('problems-text').textContent = '\n' + window.__logs.join('\n');
     };
     const add = (line) => { window.__logs.push(line); show(); };
+    // A console group's title leads the warnings inside it (PixiJS prints a deprecation as a group titled with its message, the stack inside).
+    let group = '';
+    const text = (a) => { if (typeof a[0] === 'string' && a[0].includes('%')) { let i = 1; a = [a[0].replace(/%([csdifoO])/g, (_, f) => f === 'c' ? (i++, '') : String(a[i++])), ...a.slice(i)]; } return a.map(x => (x && x.message) || String(x)).join(' '); };
+    const gc = console.groupCollapsed.bind(console), ge = console.groupEnd.bind(console);
+    console.groupCollapsed = (...a) => { group = text(a); gc(...a); };
+    console.groupEnd = () => { group = ''; ge(); };
     for (const k of ['warn', 'error']) {
       const orig = console[k].bind(console);
-      console[k] = (...a) => { add(k + ': ' + a.map(x => (x && x.message) || String(x)).join(' ')); orig(...a); };
+      console[k] = (...a) => { add(k + ': ' + (group ? group + ' — ' : '') + text(a)); orig(...a); };
     }
     window.addEventListener('error', e => add('uncaught: ' + e.message));
     window.addEventListener('unhandledrejection', e => add('unhandled: ' + (e.reason && e.reason.message || e.reason)));
@@ -59,10 +65,10 @@
     "imports": {
       "pixi.js":                 "https://cdn.jsdelivr.net/npm/pixi.js@8.23.0/dist/pixi.min.mjs",
       "mediabunny":              "https://cdn.jsdelivr.net/npm/mediabunny@1.61.3/+esm",
-      "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.50.0/dist/index.js",
-      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.50.0/dist/Controller.js",
-      "pixi-effects/present":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.50.0/dist/present.js",
-      "pixi-effects/3d":         "https://cdn.jsdelivr.net/npm/pixi-effects@0.50.0/dist/3d.js",
+      "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.50.1/dist/index.js",
+      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.50.1/dist/Controller.js",
+      "pixi-effects/present":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.50.1/dist/present.js",
+      "pixi-effects/3d":         "https://cdn.jsdelivr.net/npm/pixi-effects@0.50.1/dist/3d.js",
       "@pixi/3d":                "https://cdn.jsdelivr.net/npm/@pixi/3d@0.1.0/dist/pixijs-3d.min.mjs",
       "@pixi/3d/extras":         "https://cdn.jsdelivr.net/npm/@pixi/3d@0.1.0/dist/pixijs-3d-extras.min.mjs"
     }

package/dist/3d.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
-var chunkVVUSZVP7_cjs = require('./chunk-VVUSZVP7.cjs');
+var chunkNXMNBFHM_cjs = require('./chunk-NXMNBFHM.cjs');
+require('./chunk-VQXZ2NOI.cjs');
 var chunkGXGIISFS_cjs = require('./chunk-GXGIISFS.cjs');
 var chunk3FCDRLW3_cjs = require('./chunk-3FCDRLW3.cjs');
 var chunkDOLTCXCL_cjs = require('./chunk-DOLTCXCL.cjs');
@@ -247,7 +248,7 @@ async function layerTexture(ctx, name, options = {}) {
 var OWN_KEYS = ["width", "height", "view", "resolution", "setup", "update", "dispose", "followCamera", "followLights", "followFog", "reuse"];
 var THREE_ONLY = ["renderer", "shareGpu", "antialias"];
 var LAYER_OWNED = ["width", "height", "autoResize"];
-var Scene3DSequence = class extends chunkVVUSZVP7_cjs.Sequence {
+var Scene3DSequence = class extends chunkNXMNBFHM_cjs.Sequence {
   _view = null;
   _ctx = null;
   _objects = {};
@@ -272,7 +273,7 @@ var Scene3DSequence = class extends chunkVVUSZVP7_cjs.Sequence {
   /** True once another layer took this layer's scene: destroying this one must not let it go. */
   _donated = false;
   /** What setup left on the objects the keyframes reach, shared with a layer that takes the scene over (core/setupValues.ts). */
-  _setupValues = new chunkVVUSZVP7_cjs.SetupValues();
+  _setupValues = new chunkNXMNBFHM_cjs.SetupValues();
   _pendingRebinds = [];
   _lightMirror = null;
   _fogMirror = null;
@@ -303,14 +304,14 @@ var Scene3DSequence = class extends chunkVVUSZVP7_cjs.Sequence {
     if (this.duration === void 0) this.duration = this.parent?.duration ?? this.root.duration;
     this._checkKeys();
     this._checkTint();
-    if (typeof spec.update === "function" && chunkVVUSZVP7_cjs.NOT_PURE.test(spec.update.toString())) {
+    if (typeof spec.update === "function" && chunkNXMNBFHM_cjs.NOT_PURE.test(spec.update.toString())) {
       this._say("pure", "update calls Math.random, Date.now, performance.now or new Date, so it is not deterministic: the same frame would draw differently in playback, in a seek and in an export. Derive the value from t");
     }
     const renderer = this.root.pixiRenderer;
     if (renderer && !renderer.renderPipes.view3d) {
       throw new Error(`${this._who()}: PixiJS 3D was loaded after the renderer started; import 'pixi-effects/3d' (and call register3D()) before movie.init`);
     }
-    const scope = chunkVVUSZVP7_cjs.buildScope(this, this.parent, this.root);
+    const scope = chunkNXMNBFHM_cjs.buildScope(this, this.parent, this.root);
     const width = resolveDim(spec.width, scope) ?? this.parent?.width ?? this.root.width;
     const height = resolveDim(spec.height, scope) ?? this.parent?.height ?? this.root.height;
     const viewOptions = { ...spec.view ?? {} };
@@ -865,7 +866,7 @@ function reuseKeyOf(spec, width, height) {
 function resolveDim(v, scope) {
   if (v === void 0) return void 0;
   if (typeof v === "number") return v;
-  return chunkVVUSZVP7_cjs.evaluateExpr(v, scope);
+  return chunkNXMNBFHM_cjs.evaluateExpr(v, scope);
 }
 var label2 = "pixi-effects: loadModel";
 async function loadModel(url, options = {}) {
@@ -951,7 +952,7 @@ function register3D() {
   }
   _3d.Model3D.defaultOptions.autoUpdate = false;
   _3d.AnimationPlayer.defaultOptions.autoUpdate = false;
-  chunkVVUSZVP7_cjs.registerSequenceType("scene3d", Scene3DSequence);
+  chunkNXMNBFHM_cjs.registerSequenceType("scene3d", Scene3DSequence);
 }
 function scene3d(spec) {
   return spec;