pixi-effects 0.30.0 → 0.30.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.30.1
+
+**Docs**
+
+- **Found by six fresh agents (three before 0.30.0's docs, three after):** a recipe for **a plain cut with generated images and music written as text** (`slideshow-cuts`; the slideshow recipe had only transitions and a music file); the **bar chart** recipe grows its bars one at a time with `EACH = DUR + 0.3` (the highlight and the callout wait for the last bar: `PEAK_AT`); `AGENTS.md` and the skill now agree that the check writes to `check-out/<name>/` (the example passed `--out check-out`).
+
+**Fixed**
+
+- `pixi-effects recipe` listed only the recipes whose code block had a name, so three (`deck-in-page`, `placeholder-images`, `metallic-three`) were invisible to it; every section is listed now (a section without a name gets one made from its title), and a test requires every section of `recipes.md` to have a name.
+
 ## 0.30.0
 
 **Added**

package/README.md

@@ -1,6 +1,6 @@
 # pixi-effects
 
-> **Status**: experimental — current release `0.30.0`. The API may still change between minor versions; see the [CHANGELOG](./CHANGELOG.md) for what each release changed.
+> **Status**: experimental — current release `0.30.1`. The API may still change between minor versions; see the [CHANGELOG](./CHANGELOG.md) for what each release changed.
 
 **[Guide →](https://yjmtmtk.github.io/pixi-effects/guide/)** · **[Gallery →](https://yjmtmtk.github.io/pixi-effects/examples/gallery/)** · 52 portfolio pieces written as plain data by AI models · **[Examples →](https://yjmtmtk.github.io/pixi-effects/examples/)** · 15 numbered examples, a music lab + an in-browser playground.
 
@@ -49,8 +49,8 @@ Drop the imports into an [importmap](https://developer.mozilla.org/docs/Web/HTML
   "imports": {
     "pixi.js":                 "https://esm.sh/pixi.js@8.22.0?bundle-deps",
     "mediabunny":              "https://esm.sh/mediabunny",
-    "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.30.0/dist/index.js",
-    "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.30.0/dist/Controller.js"
+    "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.30.1/dist/index.js",
+    "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.30.1/dist/Controller.js"
   }
 }
 </script>
@@ -61,7 +61,7 @@ Drop the imports into an [importmap](https://developer.mozilla.org/docs/Web/HTML
 </script>
 ```
 
-Load the `dist/` files **as they are** (jsDelivr's `/npm/…/dist/…`, or unpkg's `https://unpkg.com/pixi-effects@0.30.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.30.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.
 
 > **Using three.js?** Add two more entries (`three` and `pixi-effects/three`) to this importmap — see [Adding three.js](#adding-threejs-optional) below.
 >
@@ -77,7 +77,7 @@ Add two more entries to the importmap above: three.js itself, and the `pixi-effe
   "imports": {
     "...":                     "(everything from the importmap above)",
     "three":                   "https://esm.sh/three@0.178.0",
-    "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.30.0/dist/three.js"
+    "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.30.1/dist/three.js"
   }
 }
 </script>

package/ai/chat-template.html

@@ -59,9 +59,9 @@
     "imports": {
       "pixi.js":                 "https://cdn.jsdelivr.net/npm/pixi.js@8.22.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.30.0/dist/index.js",
-      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.30.0/dist/Controller.js",
-      "pixi-effects/present":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.30.0/dist/present.js"
+      "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.30.1/dist/index.js",
+      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.30.1/dist/Controller.js",
+      "pixi-effects/present":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.30.1/dist/present.js"
     }
   }
   </script>

package/ai/tools/lookup.mjs

@@ -53,15 +53,21 @@ export function parseRecipes(md) {
   });
 }
 
+/** The name `recipe` lists a section by: its first id, or a slug of its title when it has none (so no recipe hides). */
+export function recipeId(section) {
+  return section.ids[0] ?? section.title.toLowerCase().replace(/`/g, '').replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
+}
+
 /** { section, id } for an exact id or a unique part of one (or of a title); { many } when several match; { nearest } (maybe undefined) when none does. */
 export function findRecipe(sections, query) {
   const q = query.trim().toLowerCase();
-  const exact = sections.find(s => s.ids.some(id => id.toLowerCase() === q));
-  if (exact) return { section: exact, id: exact.ids.find(id => id.toLowerCase() === q) };
-  const part = sections.filter(s => s.ids.some(id => id.toLowerCase().includes(q)) || s.title.toLowerCase().includes(q));
+  const names = (s) => [...s.ids, recipeId(s)];
+  const exact = sections.find(s => names(s).some(id => id.toLowerCase() === q));
+  if (exact) return { section: exact, id: names(exact).find(id => id.toLowerCase() === q) };
+  const part = sections.filter(s => names(s).some(id => id.toLowerCase().includes(q)) || s.title.toLowerCase().includes(q));
   if (part.length === 1) return { section: part[0] };
   if (part.length > 1) return { many: part };
-  return { nearest: nearestOf(q, sections.flatMap(s => s.ids)) };
+  return { nearest: nearestOf(q, sections.flatMap(names)) };
 }
 
 const readIf = (file) => { try { return fs.readFileSync(file, 'utf8'); } catch { return null; } };
@@ -164,12 +170,12 @@ export function runLookup(cmd, args, { cwd = process.cwd(), root = PACKAGE_ROOT
     const query = args.join(' ').trim();
     if (!query) {
       const lines = ['recipes (pixi-effects recipe <id> prints one with its code):'];
-      for (const s of sections) for (const id of s.ids) lines.push(`  ${id.padEnd(28)} ${s.title}`);
+      for (const s of sections) (s.ids.length ? s.ids : [recipeId(s)]).forEach((id, k) => lines.push(`  ${id.padEnd(28)} ${k === 0 ? s.title : `(the same section as ${recipeId(s)})`}`));
       return ok(lines.join('\n'));
     }
     const r = findRecipe(sections, query);
     if (r.section) return ok(r.section.text);
-    if (r.many) return fail(`several recipes match "${query}": ${r.many.map(s => s.ids[0] ?? s.title).join(', ')}. Give one id (pixi-effects recipe lists them).`);
+    if (r.many) return fail(`several recipes match "${query}": ${r.many.map(s => recipeId(s)).join(', ')}. Give one id (pixi-effects recipe lists them).`);
     return fail(`no recipe "${query}"${r.nearest ? `; did you mean "${r.nearest}"?` : ''} (pixi-effects recipe lists them)`);
   }
   if (cmd === 'help') {

package/dist/loader.css

@@ -1,7 +1,7 @@
 /*
  * pixi-effects loader: one line of HTML on the page, a few lines of CSS, no JavaScript of your own.
  *
- *   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixi-effects@0.30.0/dist/loader.css">
+ *   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixi-effects@0.30.1/dist/loader.css">
  *   <div class="stage" style="position: relative">                      <!-- any box the canvas sits in, with position: relative -->
  *     <canvas id="stage" width="1280" height="720"></canvas>
  *     <div class="pe-loader" data-label="LOADING"></div>                <!-- or class="pe-loader pe-loader--bar" -->

package/llms-full.txt

@@ -6,7 +6,7 @@ Concatenation of the skill, cheatsheet, pitfalls, recipes and the DSL / API refe
 
 <!-- ===== skills/pixi-effects/SKILL.md ===== -->
 
-> Written for pixi-effects 0.30.0. Update this skill with `npx skills update`; the newest docs are at https://yjmtmtk.github.io/pixi-effects/
+> Written for pixi-effects 0.30.1. Update this skill with `npx skills update`; the newest docs are at https://yjmtmtk.github.io/pixi-effects/
 
 # pixi-effects — write a video as data
 
@@ -622,6 +622,8 @@ const max = Math.max(...data.map(d => d[1]));
 const step = [1, 2, 2.5, 5, 10].map(m => m * 10 ** Math.floor(Math.log10(max / 4))).find(v => max / v <= 5) ?? 10;
 const NICE = Math.ceil(max / step) * step;                    // axis top, so the chart survives changed data
 const BASE = 600, CHART_H = 380, BAR_W = 90, GAP = 40, DUR = 0.9, EASE = 'power3.out';
+const EACH = 0.12;                                            // seconds between bars: 0.12 is a quick wave; EACH = DUR + 0.3 grows them one at a time
+const PEAK_AT = Math.max(4, 0.4 + (data.length - 1) * EACH + DUR + 0.2);   // the highlight and the callout come after the last bar has grown
 const X0 = (1280 - (data.length * BAR_W + (data.length - 1) * GAP)) / 2, X1 = X0 + data.length * BAR_W + (data.length - 1) * GAP;
 const sequences = [];
 for (let v = 0; v <= NICE; v += step) {                       // grid lines + tick labels
@@ -632,14 +634,14 @@ for (let v = 0; v <= NICE; v += step) {                       // grid lines + ti
 const best = data.findIndex(d => d[1] === max);
 data.forEach(([label, value], i) => {
   const x = X0 + i * (BAR_W + GAP) + BAR_W / 2;
-  const at = 0.4 + i * 0.12;
+  const at = 0.4 + i * EACH;
   const h = CHART_H * value / NICE;
   sequences.push({
     type: 'shape', shape: 'rect', width: BAR_W, height: 0, cornerRadius: 8, anchorY: 1, at, colorSpace: 'oklab',
     initial: { x, y: BASE, fillColor: '#4f6df5' },
     keyframes: [
       { at: 0, to: { height: h }, duration: DUR, ease: EASE },
-      ...(i === best ? [{ at: 4 - at, to: { fillColor: '#ffd166' }, duration: 0.5 }] : [{ at: 4 - at, to: { alpha: 0.45 }, duration: 0.5 }]),   // highlight the maximum at t = 4 s
+      ...(i === best ? [{ at: PEAK_AT - at, to: { fillColor: '#ffd166' }, duration: 0.5 }] : [{ at: PEAK_AT - at, to: { alpha: 0.45 }, duration: 0.5 }]),   // highlight the maximum at t = 4 s
     ],
   });
   sequences.push({                                            // value label: counts up while riding the bar's top
@@ -653,11 +655,11 @@ data.forEach(([label, value], i) => {
 // callout: a pill sized from its text (~0.58 x fontSize per glyph + padding), a pointer triangle, clamped inside the plot
 const text = 'Peak: ' + data[best][0] + ' ' + max, FS = 26;
 const PW = text.length * FS * 0.58 + 44, cx = Math.min(Math.max(X0 + best * (BAR_W + GAP) + BAR_W / 2, X0 + PW / 2), X1 - PW / 2), cy = BASE - CHART_H - 70;
-sequences.push({ type: 'shape', shape: 'rect', width: PW, height: 52, cornerRadius: 26, at: 4.2, initial: { x: cx, y: cy, fillColor: '#ffd166', alpha: 0 },
+sequences.push({ type: 'shape', shape: 'rect', width: PW, height: 52, cornerRadius: 26, at: PEAK_AT + 0.2, initial: { x: cx, y: cy, fillColor: '#ffd166', alpha: 0 },
                  keyframes: [{ at: 0, to: { alpha: 1 }, duration: 0.3 }] });
-sequences.push({ type: 'shape', shape: 'polygon', points: [[-10, 0], [10, 0], [0, 12]], at: 4.2, initial: { x: cx, y: cy + 32, fillColor: '#ffd166', alpha: 0 },
+sequences.push({ type: 'shape', shape: 'polygon', points: [[-10, 0], [10, 0], [0, 12]], at: PEAK_AT + 0.2, initial: { x: cx, y: cy + 32, fillColor: '#ffd166', alpha: 0 },
                  keyframes: [{ at: 0, to: { alpha: 1 }, duration: 0.3 }] });
-sequences.push({ type: 'text', text, at: 4.2, style: { fontSize: FS, fontWeight: 'bold', fill: '#1b1b2f' }, initial: { x: cx, y: cy, anchorX: 0.5, anchorY: 0.5, alpha: 0 },
+sequences.push({ type: 'text', text, at: PEAK_AT + 0.2, style: { fontSize: FS, fontWeight: 'bold', fill: '#1b1b2f' }, initial: { x: cx, y: cy, anchorX: 0.5, anchorY: 0.5, alpha: 0 },
                  keyframes: [{ at: 0, to: { alpha: 1 }, duration: 0.3 }] });
 return sequences;
 ```
@@ -788,6 +790,23 @@ return { sequences, transitions, duration: total };
 
 Source images should be at least canvas-sized (`kenBurns` zooms in): draw generated images at 1920×1080 for a 1280×720 movie.
 
+**A plain cut instead of a transition, generated images, music with no file:** scenes are layers one after the other (`at` = `i × L`) with no `transitions`; the images are the assets `p1…p3` (draw them with `placeholderPhoto`, recipe `placeholder-images`). The tune is written as text: at 96 bpm a beat is 0.625 s, so 24 beats are 15 s and every track has to add up to 24 (the check's `music` read-back shows each track's length).
+
+```js
+// @recipe slideshow-cuts
+const N = 3, L = 5, total = N * L;
+const sequences = Array.from({ length: N }, (_, i) =>
+  kenBurns({ asset: 'p' + (i + 1), name: 'scene' + i, at: i * L, duration: L, motion: i % 2 ? 'position' : 'scale' }));
+sequences.push({ type: 'audio', at: 0, volume: 0.7, duration: total, music: {
+  bpm: 96,
+  tracks: [
+    { inst: 'pad',  notes: 'Am:4 F:4 C:4 G:4 Am:4 F:4' },                     // 6 chords x 4 beats = 24 beats = 15 s
+    { inst: 'bass', notes: 'a1:4 f1:4 c2:4 g1:4 a1:4 f1:4' },
+  ],
+} });
+return { sequences, duration: total };
+```
+
 ---
 
 ## Music with no file (`music`)
@@ -1088,7 +1107,7 @@ return { duration: d.duration, sequences: d.composition.sequences, transitions:
 ```
 
 ```js
-// @docs-only
+// @docs-only deck-in-page
 // in the page: the deck is spread into init; the Presenter (or the Controller, which then shows the stops and a Present button) plays it
 import { Movie } from 'pixi-effects';
 import { deck, Presenter } from 'pixi-effects/present';     // (add "pixi-effects/present" to the import map)
@@ -1457,7 +1476,7 @@ return [{ type: 'composition', name: 'film', width: 'GW', height: 'GH', sequence
 Draw on a canvas and register `canvas.toDataURL()` as an asset (`data:` URLs work). Make the image at least canvas-sized (1920×1080 for a 1280×720 movie) so `kenBurns` zooms stay sharp.
 
 ```js
-// @docs-only
+// @docs-only placeholder-images
 function placeholderPhoto(name, hueA, hueB, w = 1920, h = 1080) {
   const c = Object.assign(document.createElement('canvas'), { width: w, height: h });
   const g = c.getContext('2d');
@@ -1476,7 +1495,7 @@ function placeholderPhoto(name, hueA, hueB, w = 1920, h = 1080) {
 `ctx.renderer` is a normal `WebGLRenderer`, so an environment map works; lights alone make `metalness: 1` look black. `three/addons` is not in the importmap: build the environment yourself. Size the layer to the area you want (it clips at its own rectangle) and pull the camera back (`z ≈ 5.4` for a radius-1 torus knot at fov 50).
 
 ```js
-// @docs-only
+// @docs-only metallic-three
 // registerThree();  const THREE = await import('three');
 three({
   type: 'three', width: 'GW * 0.56', height: 'GH * 0.9', initial: { x: 'GW * 0.77', y: 'GH/2', anchorX: 0.5, anchorY: 0.5 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixi-effects",
-  "version": "0.30.0",
+  "version": "0.30.1",
   "description": "Declarative composition and video rendering for the web. Built on PixiJS v8.",
   "type": "module",
   "exports": {

package/skills/pixi-effects/SKILL.md

@@ -3,7 +3,7 @@ name: pixi-effects
 description: Use when asked to make, animate, preview or export a video, motion graphics, an animated title, a lower third, kinetic type, a promo, a slideshow with transitions, an animated chart or data story, a social clip, a 2.5D / depth scene, or music and sound for a video, written as code in JavaScript or HTML. pixi-effects is a JS library where a video is a plain-object composition (text, shape, image, video, audio and file-free sfx / music, camera, light and shader layers with keyframes) that plays in the browser, is checked by a tool the agent can run, and exports MP4 / WebM / MOV with no server. Not for a project that already uses another video tool (Remotion, Motion Canvas, ffmpeg); follow that tool instead.
 ---
 
-> Written for pixi-effects 0.30.0. Update this skill with `npx skills update`; the newest docs are at https://yjmtmtk.github.io/pixi-effects/
+> Written for pixi-effects 0.30.1. Update this skill with `npx skills update`; the newest docs are at https://yjmtmtk.github.io/pixi-effects/
 
 # pixi-effects — write a video as data
 

package/skills/pixi-effects/reference/recipes.md

@@ -190,6 +190,8 @@ const max = Math.max(...data.map(d => d[1]));
 const step = [1, 2, 2.5, 5, 10].map(m => m * 10 ** Math.floor(Math.log10(max / 4))).find(v => max / v <= 5) ?? 10;
 const NICE = Math.ceil(max / step) * step;                    // axis top, so the chart survives changed data
 const BASE = 600, CHART_H = 380, BAR_W = 90, GAP = 40, DUR = 0.9, EASE = 'power3.out';
+const EACH = 0.12;                                            // seconds between bars: 0.12 is a quick wave; EACH = DUR + 0.3 grows them one at a time
+const PEAK_AT = Math.max(4, 0.4 + (data.length - 1) * EACH + DUR + 0.2);   // the highlight and the callout come after the last bar has grown
 const X0 = (1280 - (data.length * BAR_W + (data.length - 1) * GAP)) / 2, X1 = X0 + data.length * BAR_W + (data.length - 1) * GAP;
 const sequences = [];
 for (let v = 0; v <= NICE; v += step) {                       // grid lines + tick labels
@@ -200,14 +202,14 @@ for (let v = 0; v <= NICE; v += step) {                       // grid lines + ti
 const best = data.findIndex(d => d[1] === max);
 data.forEach(([label, value], i) => {
   const x = X0 + i * (BAR_W + GAP) + BAR_W / 2;
-  const at = 0.4 + i * 0.12;
+  const at = 0.4 + i * EACH;
   const h = CHART_H * value / NICE;
   sequences.push({
     type: 'shape', shape: 'rect', width: BAR_W, height: 0, cornerRadius: 8, anchorY: 1, at, colorSpace: 'oklab',
     initial: { x, y: BASE, fillColor: '#4f6df5' },
     keyframes: [
       { at: 0, to: { height: h }, duration: DUR, ease: EASE },
-      ...(i === best ? [{ at: 4 - at, to: { fillColor: '#ffd166' }, duration: 0.5 }] : [{ at: 4 - at, to: { alpha: 0.45 }, duration: 0.5 }]),   // highlight the maximum at t = 4 s
+      ...(i === best ? [{ at: PEAK_AT - at, to: { fillColor: '#ffd166' }, duration: 0.5 }] : [{ at: PEAK_AT - at, to: { alpha: 0.45 }, duration: 0.5 }]),   // highlight the maximum at t = 4 s
     ],
   });
   sequences.push({                                            // value label: counts up while riding the bar's top
@@ -221,11 +223,11 @@ data.forEach(([label, value], i) => {
 // callout: a pill sized from its text (~0.58 x fontSize per glyph + padding), a pointer triangle, clamped inside the plot
 const text = 'Peak: ' + data[best][0] + ' ' + max, FS = 26;
 const PW = text.length * FS * 0.58 + 44, cx = Math.min(Math.max(X0 + best * (BAR_W + GAP) + BAR_W / 2, X0 + PW / 2), X1 - PW / 2), cy = BASE - CHART_H - 70;
-sequences.push({ type: 'shape', shape: 'rect', width: PW, height: 52, cornerRadius: 26, at: 4.2, initial: { x: cx, y: cy, fillColor: '#ffd166', alpha: 0 },
+sequences.push({ type: 'shape', shape: 'rect', width: PW, height: 52, cornerRadius: 26, at: PEAK_AT + 0.2, initial: { x: cx, y: cy, fillColor: '#ffd166', alpha: 0 },
                  keyframes: [{ at: 0, to: { alpha: 1 }, duration: 0.3 }] });
-sequences.push({ type: 'shape', shape: 'polygon', points: [[-10, 0], [10, 0], [0, 12]], at: 4.2, initial: { x: cx, y: cy + 32, fillColor: '#ffd166', alpha: 0 },
+sequences.push({ type: 'shape', shape: 'polygon', points: [[-10, 0], [10, 0], [0, 12]], at: PEAK_AT + 0.2, initial: { x: cx, y: cy + 32, fillColor: '#ffd166', alpha: 0 },
                  keyframes: [{ at: 0, to: { alpha: 1 }, duration: 0.3 }] });
-sequences.push({ type: 'text', text, at: 4.2, style: { fontSize: FS, fontWeight: 'bold', fill: '#1b1b2f' }, initial: { x: cx, y: cy, anchorX: 0.5, anchorY: 0.5, alpha: 0 },
+sequences.push({ type: 'text', text, at: PEAK_AT + 0.2, style: { fontSize: FS, fontWeight: 'bold', fill: '#1b1b2f' }, initial: { x: cx, y: cy, anchorX: 0.5, anchorY: 0.5, alpha: 0 },
                  keyframes: [{ at: 0, to: { alpha: 1 }, duration: 0.3 }] });
 return sequences;
 ```
@@ -356,6 +358,23 @@ return { sequences, transitions, duration: total };
 
 Source images should be at least canvas-sized (`kenBurns` zooms in): draw generated images at 1920×1080 for a 1280×720 movie.
 
+**A plain cut instead of a transition, generated images, music with no file:** scenes are layers one after the other (`at` = `i × L`) with no `transitions`; the images are the assets `p1…p3` (draw them with `placeholderPhoto`, recipe `placeholder-images`). The tune is written as text: at 96 bpm a beat is 0.625 s, so 24 beats are 15 s and every track has to add up to 24 (the check's `music` read-back shows each track's length).
+
+```js
+// @recipe slideshow-cuts
+const N = 3, L = 5, total = N * L;
+const sequences = Array.from({ length: N }, (_, i) =>
+  kenBurns({ asset: 'p' + (i + 1), name: 'scene' + i, at: i * L, duration: L, motion: i % 2 ? 'position' : 'scale' }));
+sequences.push({ type: 'audio', at: 0, volume: 0.7, duration: total, music: {
+  bpm: 96,
+  tracks: [
+    { inst: 'pad',  notes: 'Am:4 F:4 C:4 G:4 Am:4 F:4' },                     // 6 chords x 4 beats = 24 beats = 15 s
+    { inst: 'bass', notes: 'a1:4 f1:4 c2:4 g1:4 a1:4 f1:4' },
+  ],
+} });
+return { sequences, duration: total };
+```
+
 ---
 
 ## Music with no file (`music`)
@@ -656,7 +675,7 @@ return { duration: d.duration, sequences: d.composition.sequences, transitions:
 ```
 
 ```js
-// @docs-only
+// @docs-only deck-in-page
 // in the page: the deck is spread into init; the Presenter (or the Controller, which then shows the stops and a Present button) plays it
 import { Movie } from 'pixi-effects';
 import { deck, Presenter } from 'pixi-effects/present';     // (add "pixi-effects/present" to the import map)
@@ -1025,7 +1044,7 @@ return [{ type: 'composition', name: 'film', width: 'GW', height: 'GH', sequence
 Draw on a canvas and register `canvas.toDataURL()` as an asset (`data:` URLs work). Make the image at least canvas-sized (1920×1080 for a 1280×720 movie) so `kenBurns` zooms stay sharp.
 
 ```js
-// @docs-only
+// @docs-only placeholder-images
 function placeholderPhoto(name, hueA, hueB, w = 1920, h = 1080) {
   const c = Object.assign(document.createElement('canvas'), { width: w, height: h });
   const g = c.getContext('2d');
@@ -1044,7 +1063,7 @@ function placeholderPhoto(name, hueA, hueB, w = 1920, h = 1080) {
 `ctx.renderer` is a normal `WebGLRenderer`, so an environment map works; lights alone make `metalness: 1` look black. `three/addons` is not in the importmap: build the environment yourself. Size the layer to the area you want (it clips at its own rectangle) and pull the camera back (`z ≈ 5.4` for a radius-1 torus knot at fov 50).
 
 ```js
-// @docs-only
+// @docs-only metallic-three
 // registerThree();  const THREE = await import('three');
 three({
   type: 'three', width: 'GW * 0.56', height: 'GH * 0.9', initial: { x: 'GW * 0.77', y: 'GH/2', anchorX: 0.5, anchorY: 0.5 },

package/skills/pixi-effects/template.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>pixi-effects video</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixi-effects@0.30.0/dist/loader.css" />   <!-- the loader: HTML + CSS only, so it is on screen at once and keeps moving while the page builds the video -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixi-effects@0.30.1/dist/loader.css" />   <!-- the loader: HTML + CSS only, so it is on screen at once and keeps moving while the page builds the video -->
   <style>
     body { background: #0d1220; margin: 0; padding: 16px; }
     .stage { position: relative; width: min(960px, 100%); }                 /* the player and the loader both sit inside this box */
@@ -37,16 +37,16 @@
     "imports": {
       "pixi.js":                 "https://esm.sh/pixi.js@8.22.0?bundle-deps",
       "mediabunny":              "https://esm.sh/mediabunny",
-      "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.30.0/dist/index.js",
-      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.30.0/dist/Controller.js",
-      "pixi-effects/present":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.30.0/dist/present.js",
-      "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.30.0/dist/three.js",
+      "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.30.1/dist/index.js",
+      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.30.1/dist/Controller.js",
+      "pixi-effects/present":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.30.1/dist/present.js",
+      "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.30.1/dist/three.js",
       "pixi-filters":            "https://esm.sh/pixi-filters@6.1.5?external=pixi.js",
       "three":                   "https://esm.sh/three@0.178.0"
     }
   }
   </script>
-  <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/pixi-effects@0.30.0/dist/index.js" />   <!-- after the import map: the library downloads while the page is parsed -->
+  <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/pixi-effects@0.30.1/dist/index.js" />   <!-- after the import map: the library downloads while the page is parsed -->
 
   <script type="module">
     import { Movie, kenBurns, withFade } from 'pixi-effects';