pixi-effects 0.49.0 → 0.50.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # 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.
+
+- **PixiJS 2D built by code: the `scene2d` layer** (core, nothing to import). `{ type: 'scene2d', setup({ root, width, height, texture }), update(t, ctx), dispose, width, height, reuse }`: your PixiJS display objects (`Graphics`, `Sprite`, `AnimatedSprite`, `Text`, a thousand pieces) as one layer, shaped like the `scene3d` layer, so a free box of PixiJS 2D no longer needs a `Sequence` subclass. Keyframes reach `scene2d.<object>.<path>` (raw PixiJS values); `anchorX` / `anchorY` place its box; `update` with a clock or `Math.random` warns; an `AnimatedSprite` left playing is posed from the layer's time (anything else with `autoUpdate` is turned off and said, a `<video>` texture is said); `check` draws it in two orders and names a layer whose same frame differs; `movie.pick` names the object under a point (`kind: 'scene2d'`, `hit.scene2d.object` by its label, `grab().move(x, y)`; empty space falls through) and `check --pick` prints it; `ctx.texture(name)` is a movie asset's texture; a named layer keeps its scene across `setVars` (`setup` runs once). Recipe `scene2d-basics`.
+- **Fixed: a rebuild that keeps a scene (`scene2d`, `scene3d`, `three` with `reuse`) started its keyframes from the last frame the old movie showed.** After `setVars` late in a movie, a keyframe into the scene (`scene3d.cube.position.y`, `three.box.position.y`) began where the old movie had left the object, not where `setup` put it, so the picture differed from a fresh page. The values `setup` left are noted and put back at the swap; the old movie is not touched while the new tree is built. A layer used as a matte source that keeps its scene is committed too.
+- **Fixed: a keyframe on a routed `tint`** (`scene2d.box.tint`, any `<router>.<object>.tint`) moves channel by channel and takes any colour form (it was interpolated as one number, or started from a colour it could not read).
+- PixiJS 3D's own pointer events (`mesh.on('pointerdown')`) are tested to work in a scene3d layer; README and every gallery / interactive example load pixi.js 8.23.0.
+
 ## 0.49.0
 
 Nothing breaks: 3D scenes drawn by PixiJS 3D (`@pixi/3d`), the new main 3D engine, as a `scene3d` layer (entry `pixi-effects/3d`); three.js stays as the sub engine. PixiJS 8.23 in the template.

package/README.md

@@ -1,6 +1,6 @@
 # pixi-effects
 
-> **Status**: experimental — current release `0.49.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/).
 
@@ -25,6 +25,7 @@ Declarative composition and video rendering for the web. After Effects-style tim
 - **Music written as text** — `{ type: 'audio', music: { bpm: 96, tracks: [{ inst: 'keys', notes: 'Cmaj7:4 Am7:4' }], drums: { kick: 'x...x...' } } }`: a tune with no audio file, played by a small built-in synthesiser (keys, pluck, pad, bass, lead, bell, music box, drums; chords by name, swing, fades, a ritardando). Deterministic, in the exported file at the same moment; an AI writes it as easily as a title.
 - **Audio-reactive visuals** — `audioEnvelope('music.mp3')` analyses loudness, bass / mid / treble and the beats per frame; `react()` turns them into keyframes, so the picture follows the music and still renders identically.
 - **2.5D layers & camera** — add `threeD: true`, `z`, `rotationX/Y` and a `{ type: 'camera' }` layer for parallax, flips and dolly zooms; no three.js needed.
+- **PixiJS 2D by code** — a `scene2d` layer hands you a PixiJS container: build `Graphics`, `Sprite`s, `AnimatedSprite`s or a thousand pieces in `setup`, set them from the time in `update`, and it is a layer like any other (keyframes reach its objects as `scene2d.dot.alpha`, `movie.pick` names them, `check` holds it to "a function of the time").
 - **3D scenes** *(optional)* — a real 3D scene (meshes, glTF models, PBR, lights, shadows) as a layer via `pixi-effects/3d`, drawn by [PixiJS 3D](https://pixijs.com/3d) inside PixiJS's own renderer, so masks, filters, blend modes and opacity work on it like on any layer; keyframes drive its objects (`scene3d.cube.rotation.y`). It can live in the composition's space (`followCamera`, `followLights`, `followFog`), load and pose a glTF from the time (`loadModel`), show a 2D layer on a mesh (`layerTexture`) and be clicked into (`movie.pick`).
 - **three.js layer** *(optional)* — drop a real three.js scene in as a layer via `pixi-effects/three`; keyframes drive its objects (`three.cube.rotation.y`). It can live in the composition's space: the composition's camera, lights, shadows and fog drive the scene, so one `cameraPath()` flies through the flat layers and a glTF model together (`threeGltf`).
 - **Built-in player UI — or your own** — a drop-in HTML5-`<video>`-style overlay controller (play, scrub, mute, volume, fullscreen, export-to-file) whose colours are one option (`theme: { accent: '#ff4d6d' }`); or build a player yourself on the movie's `<video>`-named events (`play pause ended seeking seeked volumechange error`).
@@ -49,10 +50,10 @@ Drop the imports into an [importmap](https://developer.mozilla.org/docs/Web/HTML
 <script type="importmap">
 {
   "imports": {
-    "pixi.js":                 "https://esm.sh/pixi.js@8.22.0?bundle-deps",
+    "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.49.0/dist/index.js",
-    "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.49.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>
@@ -65,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.49.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.
 >
@@ -80,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.49.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"
   }
@@ -124,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.49.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.49.0/dist/index.js",
-      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.49.0/dist/Controller.js",
-      "pixi-effects/present":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.49.0/dist/present.js",
-      "pixi-effects/3d":         "https://cdn.jsdelivr.net/npm/pixi-effects@0.49.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/ai/tools/check.mjs

@@ -520,7 +520,7 @@ export async function runCheck(opts, log = console.log) {
     const layoutProblems = rv.problems.filter(g => g.kind !== 'canvas'), canvasProblems = rv.problems.filter(g => g.kind === 'canvas');
     report.inspect = { checkedFrames: rv.frames, issues: layoutProblems, review: rv.review, canvas: canvasProblems.map(g => g.message), canvasLayers: rv.canvas ?? [] };
     if (layoutProblems.length) report.problems.push(`${layoutProblems.length} kind(s) of layout issue from movie.inspect`);
-    if (canvasProblems.length) report.problems.push(`${canvasProblems.length} layer(s) (canvas / three / scene3d) that do not draw the same picture for the same time (movie.canvasProblems)`);
+    if (canvasProblems.length) report.problems.push(`${canvasProblems.length} layer(s) (canvas / three / scene3d / scene2d) that do not draw the same picture for the same time (movie.canvasProblems)`);
     // fonts: a web font whose file did not load is a problem (the library lists a layer with no available font for review)
     report.fonts = rv.fonts;
     if (rv.fonts.failed.length) report.problems.push(`${rv.fonts.failed.length} web font(s) failed to load: ${rv.fonts.failed.join(', ')} (the layers that use them are drawn in a fallback)`);
@@ -553,7 +553,7 @@ export async function runCheck(opts, log = console.log) {
         if (rows.some(([, px]) => px > 0)) w.depthBlur = Object.fromEntries(rows);
         // pick: what is under each --pick point at this moment (the frame is on screen after the snapshot above)
         if (opts.pick.length) {
-          w.pick = await cdp.eval(`(${JSON.stringify(opts.pick)}).map(p => ({ x: p.x, y: p.y, hits: movie.pickAll(p.x, p.y).map(h => ({ name: h.name ?? h.path, path: h.path, kind: h.kind, object: h.three ? h.three.object : h.scene3d ? h.scene3d.object : undefined })) }))`).catch(() => []);
+          w.pick = await cdp.eval(`(${JSON.stringify(opts.pick)}).map(p => ({ x: p.x, y: p.y, hits: movie.pickAll(p.x, p.y).map(h => ({ name: h.name ?? h.path, path: h.path, kind: h.kind, object: h.three ? h.three.object : h.scene3d ? h.scene3d.object : h.scene2d ? h.scene2d.object : undefined })) }))`).catch(() => []);
         }
         // light: how lit each threeD layer is at this moment (left out when the composition has no light)
         const lit = await cdp.eval(`movie.inspect(${w.frame}).then(r => r.layers.filter(l => l.light !== undefined).map(l => [l.path, l.light]))`).catch(() => []);
@@ -895,7 +895,7 @@ export async function runSteps(cdp, steps, outDir, size, consoleLines, seenLogs)
     await sleep(300);                                                       // the page's handlers and rebuilds settle
     const after = await cdp.eval('JSON.parse(JSON.stringify(movie.vars || {}))').catch(() => ({}));
     res.vars = Object.fromEntries(Object.keys({ ...before, ...after }).filter(k => JSON.stringify(before[k]) !== JSON.stringify(after[k])).map(k => [k, [before[k], after[k]]]));
-    if (last) res.hits = await cdp.eval(`movie.pickAll(${last.x}, ${last.y}).map(h => h.kind === 'three' ? h.path + ' (three: ' + (h.three && h.three.object || '?') + ')' : h.kind === 'scene3d' ? h.path + ' (scene3d: ' + (h.scene3d && h.scene3d.object || '?') + ')' : h.path)`).catch(() => []);
+    if (last) res.hits = await cdp.eval(`movie.pickAll(${last.x}, ${last.y}).map(h => h.kind === 'three' ? h.path + ' (three: ' + (h.three && h.three.object || '?') + ')' : h.kind === 'scene3d' ? h.path + ' (scene3d: ' + (h.scene3d && h.scene3d.object || '?') + ')' : h.kind === 'scene2d' ? h.path + ' (scene2d: ' + (h.scene2d && h.scene2d.object || '?') + ')' : h.path)`).catch(() => []);
     res.frame = await cdp.eval('movie.currentFrame').catch(() => null);
     res.playing = await cdp.eval('!!movie.isPlaying').catch(() => null);
     const now = await pageLogs();
@@ -930,8 +930,8 @@ function finish(report, outDir, log) {
     if (g.length > 8) L.push(`            … ${g.length - 8} more (report.json)`);
     const cv = report.inspect.canvas ?? [];
     const rows = report.inspect.canvasLayers ?? [];
-    if (cv.length) { L.push(`  canvas    ${cv.length} layer(s) (canvas / three / scene3d) that do not draw the same picture for the same time:`); for (const m of cv.slice(0, 4)) L.push(`            - ${m}`); }
-    for (const kind of ['canvas', 'three', 'scene3d']) {                       // silence must not be the only sign that the check ran
+    if (cv.length) { L.push(`  canvas    ${cv.length} layer(s) (canvas / three / scene3d / scene2d) that do not draw the same picture for the same time:`); for (const m of cv.slice(0, 4)) L.push(`            - ${m}`); }
+    for (const kind of ['canvas', 'three', 'scene3d', 'scene2d']) {                       // silence must not be the only sign that the check ran
       const mine = rows.filter(r => (r.kind ?? 'canvas') === kind);
       if (!mine.length) continue;
       const good = mine.filter(r => r.ok), slow = [...mine].sort((a, b) => b.drawMs - a.drawMs)[0];
@@ -952,7 +952,7 @@ function finish(report, outDir, log) {
   }
   for (const w of (report.at ?? []).filter(x => x.pick)) {
     for (const p of w.pick) {
-      const says = p.hits.length ? p.hits.map(h => h.kind === 'three' || h.kind === 'scene3d' ? `${h.name} (${h.kind}: ${h.object || '?'})` : h.name).join(', ') : 'nothing';
+      const says = p.hits.length ? p.hits.map(h => h.kind === 'three' || h.kind === 'scene3d' || h.kind === 'scene2d' ? `${h.name} (${h.kind}: ${h.object || '?'})` : h.name).join(', ') : 'nothing';
       L.push(`  pick      ${w.label} (${p.x}, ${p.y}) — ${says}`);
     }
   }

package/dist/3d.cjs

@@ -1,8 +1,9 @@
 'use strict';
 
-var chunk33USHRV5_cjs = require('./chunk-33USHRV5.cjs');
-var chunk5YNME6AH_cjs = require('./chunk-5YNME6AH.cjs');
-var chunkABWRISRK_cjs = require('./chunk-ABWRISRK.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');
 var _3d = require('@pixi/3d');
 var pixi_js = require('pixi.js');
@@ -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 chunk33USHRV5_cjs.Sequence {
+var Scene3DSequence = class extends chunkNXMNBFHM_cjs.Sequence {
   _view = null;
   _ctx = null;
   _objects = {};
@@ -271,6 +272,8 @@ var Scene3DSequence = class extends chunk33USHRV5_cjs.Sequence {
   _borrowed = null;
   /** 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 chunkNXMNBFHM_cjs.SetupValues();
   _pendingRebinds = [];
   _lightMirror = null;
   _fogMirror = null;
@@ -301,14 +304,14 @@ var Scene3DSequence = class extends chunk33USHRV5_cjs.Sequence {
     if (this.duration === void 0) this.duration = this.parent?.duration ?? this.root.duration;
     this._checkKeys();
     this._checkTint();
-    if (typeof spec.update === "function" && chunk33USHRV5_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 = chunk33USHRV5_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 ?? {} };
@@ -324,7 +327,7 @@ var Scene3DSequence = class extends chunk33USHRV5_cjs.Sequence {
     this.intrinsicWidth = width;
     this.intrinsicHeight = height;
     this._key = spec.reuse === false || !spec.name ? null : reuseKeyOf(spec, width, height);
-    const donor = this._key !== null ? this.root.reuse?.claim(this._key) : null;
+    const donor = this._key !== null ? this.root.reuse?.claim(this._key, this) : null;
     if (donor && donor._lendable()) {
       this._borrow(donor, view, renderer ?? null, width, height);
       if (spec.followCamera) this._checkFollowShape(width, height);
@@ -367,6 +370,7 @@ var Scene3DSequence = class extends chunk33USHRV5_cjs.Sequence {
     const objects = { ...d._objects, ...d._objects.view === d._view ? { view } : {} };
     this._objects = objects;
     this._players = d._players;
+    this._setupValues = d._setupValues;
     const ctx = { view, root: view.root, camera: d._view.camera, renderer, width, height, objects };
     const host = this._makeHost(renderer);
     Object.defineProperty(ctx, HOST, { value: host, enumerable: false });
@@ -378,6 +382,7 @@ var Scene3DSequence = class extends chunk33USHRV5_cjs.Sequence {
     const d = this._borrowed, view = this._view, ctx = this._ctx;
     if (!d || !view || !ctx) return;
     const from = d._view;
+    this._setupValues.restore();
     const own = view.camera;
     for (const child of [...from.root.children]) view.root.addChild(child);
     view.camera = ctx.camera;
@@ -415,7 +420,7 @@ var Scene3DSequence = class extends chunk33USHRV5_cjs.Sequence {
   }
   /** Unknown keys (with the likely one), and the keys only a three layer has. */
   _checkKeys() {
-    const valid = [...chunkABWRISRK_cjs.COMMON, ...OWN_KEYS];
+    const valid = [...chunk3FCDRLW3_cjs.COMMON, ...OWN_KEYS];
     for (const key of Object.keys(this.spec)) {
       if (valid.includes(key)) continue;
       if (THREE_ONLY.includes(key)) {
@@ -496,8 +501,8 @@ var Scene3DSequence = class extends chunk33USHRV5_cjs.Sequence {
     const current = view.filters ?? [];
     const others = current.filter((f) => f !== this._look && f !== this._blend);
     const authored = String(this.spec.blendMode ?? "normal");
-    if (others.length === 0 && chunk5YNME6AH_cjs.isAdvancedBlend(authored) && !this._blend) {
-      this._blend = chunk5YNME6AH_cjs.blendFilterFor(authored);
+    if (others.length === 0 && chunkGXGIISFS_cjs.isAdvancedBlend(authored) && !this._blend) {
+      this._blend = chunkGXGIISFS_cjs.blendFilterFor(authored);
       if (this._blend) view.blendMode = "normal";
     }
     const mode = String(view.blendMode ?? "normal");
@@ -782,7 +787,7 @@ var Scene3DSequence = class extends chunk33USHRV5_cjs.Sequence {
       this._warnPath(path, `no property "${prop}"`);
       return null;
     }
-    return { target: obj, prop };
+    return this._borrowed ? this._setupValues.view(obj, prop, () => this._borrowed !== null) : (this._setupValues.note(obj, prop), { target: obj, prop });
   }
   _warnPath(path, why) {
     this._say(`path:${path}`, `keyframe path scene3d.${path}: ${why}; skipped`);
@@ -861,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 chunk33USHRV5_cjs.evaluateExpr(v, scope);
+  return chunkNXMNBFHM_cjs.evaluateExpr(v, scope);
 }
 var label2 = "pixi-effects: loadModel";
 async function loadModel(url, options = {}) {
@@ -947,7 +952,7 @@ function register3D() {
   }
   _3d.Model3D.defaultOptions.autoUpdate = false;
   _3d.AnimationPlayer.defaultOptions.autoUpdate = false;
-  chunk33USHRV5_cjs.registerSequenceType("scene3d", Scene3DSequence);
+  chunkNXMNBFHM_cjs.registerSequenceType("scene3d", Scene3DSequence);
 }
 function scene3d(spec) {
   return spec;