pixi-effects 0.32.0 → 0.34.0

package/dist/index.cjs

@@ -1,125 +1,125 @@
 'use strict';
 
-var chunkK3MAEKFM_cjs = require('./chunk-K3MAEKFM.cjs');
-require('./chunk-CRUDOKSD.cjs');
-var chunkQHDN6TF5_cjs = require('./chunk-QHDN6TF5.cjs');
-require('./chunk-Z437UWI4.cjs');
-require('./chunk-FCGYJCVO.cjs');
+var chunkFVZEBYLW_cjs = require('./chunk-FVZEBYLW.cjs');
+require('./chunk-5IJENZOG.cjs');
+var chunkLEECUCTG_cjs = require('./chunk-LEECUCTG.cjs');
+require('./chunk-IMQJVRMT.cjs');
+require('./chunk-GL2AQFLQ.cjs');
 var chunkTWZNOUM7_cjs = require('./chunk-TWZNOUM7.cjs');
 
 
 
 Object.defineProperty(exports, "Movie", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.Movie; }
+  get: function () { return chunkFVZEBYLW_cjs.Movie; }
 });
 Object.defineProperty(exports, "animateText", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.animateText; }
+  get: function () { return chunkFVZEBYLW_cjs.animateText; }
 });
 Object.defineProperty(exports, "audioEnvelope", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.audioEnvelope; }
+  get: function () { return chunkFVZEBYLW_cjs.audioEnvelope; }
 });
 Object.defineProperty(exports, "bpmEnvelope", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.bpmEnvelope; }
+  get: function () { return chunkFVZEBYLW_cjs.bpmEnvelope; }
 });
 Object.defineProperty(exports, "cameraPath", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.cameraPath; }
+  get: function () { return chunkFVZEBYLW_cjs.cameraPath; }
 });
 Object.defineProperty(exports, "computeEnvelope", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.computeEnvelope; }
+  get: function () { return chunkFVZEBYLW_cjs.computeEnvelope; }
 });
 Object.defineProperty(exports, "dismissLoader", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.dismissLoader; }
+  get: function () { return chunkFVZEBYLW_cjs.dismissLoader; }
 });
 Object.defineProperty(exports, "ease", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.parseEase; }
+  get: function () { return chunkFVZEBYLW_cjs.parseEase; }
 });
 Object.defineProperty(exports, "failLoader", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.failLoader; }
+  get: function () { return chunkFVZEBYLW_cjs.failLoader; }
 });
 Object.defineProperty(exports, "followPath", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.followPath; }
+  get: function () { return chunkFVZEBYLW_cjs.followPath; }
 });
 Object.defineProperty(exports, "kenBurns", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.kenBurns; }
+  get: function () { return chunkFVZEBYLW_cjs.kenBurns; }
 });
 Object.defineProperty(exports, "measureText", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.measureText; }
+  get: function () { return chunkFVZEBYLW_cjs.measureText; }
 });
 Object.defineProperty(exports, "musicBuffer", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.musicBuffer; }
+  get: function () { return chunkFVZEBYLW_cjs.musicBuffer; }
 });
 Object.defineProperty(exports, "musicEnvelope", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.musicEnvelope; }
+  get: function () { return chunkFVZEBYLW_cjs.musicEnvelope; }
 });
 Object.defineProperty(exports, "musicEvents", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.musicEvents; }
+  get: function () { return chunkFVZEBYLW_cjs.musicEvents; }
 });
 Object.defineProperty(exports, "orbit", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.orbit; }
+  get: function () { return chunkFVZEBYLW_cjs.orbit; }
 });
 Object.defineProperty(exports, "particles", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.particles; }
+  get: function () { return chunkFVZEBYLW_cjs.particles; }
 });
 Object.defineProperty(exports, "react", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.react; }
+  get: function () { return chunkFVZEBYLW_cjs.react; }
 });
 Object.defineProperty(exports, "resolveLoader", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.resolveLoader; }
+  get: function () { return chunkFVZEBYLW_cjs.resolveLoader; }
 });
 Object.defineProperty(exports, "splitText", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.splitText; }
+  get: function () { return chunkFVZEBYLW_cjs.splitText; }
 });
 Object.defineProperty(exports, "stagger", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.stagger; }
+  get: function () { return chunkFVZEBYLW_cjs.stagger; }
 });
 Object.defineProperty(exports, "wiggle", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.wiggle; }
+  get: function () { return chunkFVZEBYLW_cjs.wiggle; }
 });
 Object.defineProperty(exports, "withFade", {
   enumerable: true,
-  get: function () { return chunkK3MAEKFM_cjs.withFade; }
+  get: function () { return chunkFVZEBYLW_cjs.withFade; }
 });
 Object.defineProperty(exports, "Sequence", {
   enumerable: true,
-  get: function () { return chunkQHDN6TF5_cjs.Sequence; }
+  get: function () { return chunkLEECUCTG_cjs.Sequence; }
 });
 Object.defineProperty(exports, "noise", {
   enumerable: true,
-  get: function () { return chunkQHDN6TF5_cjs.noise; }
+  get: function () { return chunkLEECUCTG_cjs.noise; }
 });
 Object.defineProperty(exports, "rand", {
   enumerable: true,
-  get: function () { return chunkQHDN6TF5_cjs.rand; }
+  get: function () { return chunkLEECUCTG_cjs.rand; }
 });
 Object.defineProperty(exports, "random", {
   enumerable: true,
-  get: function () { return chunkQHDN6TF5_cjs.random; }
+  get: function () { return chunkLEECUCTG_cjs.random; }
 });
 Object.defineProperty(exports, "registerSequenceType", {
   enumerable: true,
-  get: function () { return chunkQHDN6TF5_cjs.registerSequenceType; }
+  get: function () { return chunkLEECUCTG_cjs.registerSequenceType; }
 });
 Object.defineProperty(exports, "warnUnknownOptions", {
   enumerable: true,

package/dist/index.js

@@ -1,8 +1,8 @@
-export { Movie, animateText, audioEnvelope, bpmEnvelope, cameraPath, computeEnvelope, dismissLoader, parseEase as ease, failLoader, followPath, kenBurns, measureText, musicBuffer, musicEnvelope, musicEvents, orbit, particles, react, resolveLoader, splitText, stagger, wiggle, withFade } from './chunk-FCMOREIS.js';
-import './chunk-D5BFQVKL.js';
-export { Sequence, noise, rand, random, registerSequenceType } from './chunk-AW5NPDE4.js';
-import './chunk-QFNS6BFL.js';
-import './chunk-C5BNHVKK.js';
+export { Movie, animateText, audioEnvelope, bpmEnvelope, cameraPath, computeEnvelope, dismissLoader, parseEase as ease, failLoader, followPath, kenBurns, measureText, musicBuffer, musicEnvelope, musicEvents, orbit, particles, react, resolveLoader, splitText, stagger, wiggle, withFade } from './chunk-67LG7MN5.js';
+import './chunk-XV4L72FW.js';
+export { Sequence, noise, rand, random, registerSequenceType } from './chunk-Y253JQOH.js';
+import './chunk-RTJD3ZSW.js';
+import './chunk-ITDYFBB6.js';
 export { warnUnknownOptions } from './chunk-BXOCEZ4U.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

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.32.0/dist/loader.css">
+ *   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixi-effects@0.34.0/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/dist/present.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-require('./chunk-K3MAEKFM.cjs');
-require('./chunk-CRUDOKSD.cjs');
-require('./chunk-QHDN6TF5.cjs');
-require('./chunk-Z437UWI4.cjs');
-require('./chunk-FCGYJCVO.cjs');
+require('./chunk-FVZEBYLW.cjs');
+require('./chunk-5IJENZOG.cjs');
+require('./chunk-LEECUCTG.cjs');
+require('./chunk-IMQJVRMT.cjs');
+require('./chunk-GL2AQFLQ.cjs');
 var chunkTWZNOUM7_cjs = require('./chunk-TWZNOUM7.cjs');
 
 // src/present/stops.ts

package/dist/present.js

@@ -1,8 +1,8 @@
-import './chunk-FCMOREIS.js';
-import './chunk-D5BFQVKL.js';
-import './chunk-AW5NPDE4.js';
-import './chunk-QFNS6BFL.js';
-import './chunk-C5BNHVKK.js';
+import './chunk-67LG7MN5.js';
+import './chunk-XV4L72FW.js';
+import './chunk-Y253JQOH.js';
+import './chunk-RTJD3ZSW.js';
+import './chunk-ITDYFBB6.js';
 import { warnUnknownOptions } from './chunk-BXOCEZ4U.js';
 
 // src/present/stops.ts

package/dist/three.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
-var chunkQHDN6TF5_cjs = require('./chunk-QHDN6TF5.cjs');
-require('./chunk-FCGYJCVO.cjs');
+var chunkLEECUCTG_cjs = require('./chunk-LEECUCTG.cjs');
+require('./chunk-GL2AQFLQ.cjs');
 require('./chunk-TWZNOUM7.cjs');
 var pixi_js = require('pixi.js');
 var three$1 = require('three');
 
-var ThreeSequence = class extends chunkQHDN6TF5_cjs.Sequence {
+var ThreeSequence = class extends chunkLEECUCTG_cjs.Sequence {
   _renderer = null;
   _scene = null;
   _camera = null;
@@ -25,7 +25,7 @@ var ThreeSequence = class extends chunkQHDN6TF5_cjs.Sequence {
     if (this.duration === void 0) {
       this.duration = this.parent?.duration ?? this.root.duration;
     }
-    const scope = chunkQHDN6TF5_cjs.buildScope(this, this.parent, this.root);
+    const scope = chunkLEECUCTG_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 resolution = spec.resolution ?? 1;
@@ -145,12 +145,12 @@ var ThreeSequence = class extends chunkQHDN6TF5_cjs.Sequence {
 function resolveDim(v, scope) {
   if (v === void 0) return void 0;
   if (typeof v === "number") return v;
-  return chunkQHDN6TF5_cjs.evaluateExpr(v, scope);
+  return chunkLEECUCTG_cjs.evaluateExpr(v, scope);
 }
 
 // src/three/index.ts
 function registerThree() {
-  chunkQHDN6TF5_cjs.registerSequenceType("three", ThreeSequence);
+  chunkLEECUCTG_cjs.registerSequenceType("three", ThreeSequence);
 }
 function three(spec) {
   return spec;

package/dist/three.js

@@ -1,5 +1,5 @@
-import { Sequence, buildScope, evaluateExpr, registerSequenceType } from './chunk-AW5NPDE4.js';
-import './chunk-C5BNHVKK.js';
+import { Sequence, buildScope, evaluateExpr, registerSequenceType } from './chunk-Y253JQOH.js';
+import './chunk-ITDYFBB6.js';
 import './chunk-BXOCEZ4U.js';
 import { Texture, Sprite } from 'pixi.js';
 import { WebGLRenderer, Scene, PerspectiveCamera } from 'three';

package/docs/dsl.md

@@ -90,6 +90,10 @@ Renders a [PIXI.Text](https://pixijs.com/8.x/guides/components/scene-objects/tex
 }
 ```
 
+**Wrapping and fonts for Japanese, Chinese and Korean.** `wordWrap: true` breaks a line at spaces. Japanese and Chinese have none: with `wordWrap` alone a long line does not wrap and runs off the canvas, and `breakWords: true` makes it break between any two characters, so a line can end with one to three characters alone (an orphan) and split a word or phrase in the middle. For a clean break write the line break yourself (`'あの日言えなかった言葉が、\n風に溶けていく'`, after a comma or a particle) and size the font so each line fits; `check` lists a line that is cut by the canvas edge, but it does not judge an ugly break, so look at the sheet. (Korean writes spaces between words, so `wordWrap` breaks there; a very long word still needs `breakWords`.) No font is bundled: the machine's own fonts are used, and a font that lacks the script's characters is replaced for those characters by whatever the machine has, so the look differs from machine to machine. For a result that looks the same everywhere, load a web font that covers the script (for example Noto Sans JP, Noto Sans KR for Hangul, Noto Sans SC) and `await document.fonts.load('40px "Noto Sans KR"')` before `movie.init` (see pitfall 103); give the family in `style.fontFamily`.
+
+**Right-to-left and complex scripts (measured in trials).** With a font that covers the script the text is shaped correctly: Arabic letters connect and read right to left, Hebrew reads right to left, Thai and Devanagari marks stack. The direction follows the first strong letter of the line; place it with `anchorX: 1` and `style.align: 'right'`. Three traps: (1) marks that hang below the font's box can be cut off (the dots of an Arabic ي turn "في" into "فى"): give the layer `style.padding` (30 at a size of 120), and `check` cannot see it, so look at the picture; (2) `splitText` and `animateText` place words and letters from left to right, so an Arabic line comes out in reverse order, and `by: 'chars'` breaks the connected forms: split the line by words yourself and place each word at the right edge minus `measureText` of the logical text up to that word; (3) `visibleChars` shapes each prefix alone, so the last letter can show in its isolated form until the next one arrives: uncovering the whole line with a mask whose width grows keeps the connected forms.
+
 The text's `fill` is also animatable via keyframes (under the `to`/`from`/`set` keys, not under `style`). Set `colorSpace` for perceptual interpolation:
 
 ```ts
@@ -1329,6 +1333,8 @@ Animatable: `threshold`, `smoothing`, `spill`. `keyColor` is set at build time.
 
 ### Named filters (`{ type: 'glow', … }`)
 
+**Which ones to use.** A filter works on a layer's own pixels (a glow around the letters, an outline, a shadow), which a `shader` layer cannot do (it draws new content). The 38 named filters that come from `pixi-filters` are not equally trustworthy: `tests/tools/filterSweep.test.ts` draws these on WebGPU (the default backend) and on WebGL and requires that each one shows and looks the same: **`glow`, `outline`, `dropShadow`, `bevel`, `bloom`, `pixelate`, `crt`, `rgbSplit`, `dot`, `radialBlur`, `glitch`** (`grain`, `warp` and `blur` are this library's or PixiJS's own). Reach for these first. The others are not tested on both backends; measured differences: `multiColorReplace` draws the whole picture black on WebGPU (use `colorReplace`), `kawaseBlur` blurs far less on WebGPU (use `blur`), `advancedBloom` is sharper on WebGPU (use `bloom`), `ascii` shows stripes on WebGPU. A filter only shows along the edges of a layer's own picture: on a full-bleed opaque layer `glow` and `outline` have nothing to follow, so put them on the shapes and text. `radialBlur` did nothing on WebGPU before 0.34 (an upstream i32 / f32 mismatch, worked around).
+
 A filter by name, as plain data. `type` is the filter's class name without `Filter`, in camelCase (case does not matter), and every other key is that filter's own option. No import, and the layer stays JSON:
 
 ```ts
@@ -1358,7 +1364,7 @@ Name a filter (`name: 'halo'`) to animate it with `'filters.halo.<option>'`. `bl
 | `oldFilm` | `sepia noise scratch scratchDensity vignetting seed` | Aged film |
 | `glitch` | `slices offset direction seed average` | Digital glitch |
 | `warp` | `kind: 'wave' \| 'haze'`, `strength` (max shift, px, 6), `scale` (wavelength or cell size, px, 80), `speed` (0.5), `angle` (degrees: the way a wave travels, 0), `seed` (`haze`) | Bends the picture: a travelling wave (flags, water) or drifting noise (heat haze). This library's own, time-driven |
-| `bulgePinch` | `center radius strength` | Bulge (+) / pinch (−) |
+| `bulgePinch` | `center radius strength` (`center`: 0–1 of the layer) | Bulge (+) / pinch (−) |
 | `twist` | `radius angle offset: { x, y }` | Swirl |
 | `zoomBlur` | `strength center innerRadius radius` | Radial zoom streaks |
 | `kawaseBlur` | `strength quality` | Cheap, wide blur |
@@ -1383,7 +1389,8 @@ Name a filter (`name: 'halo'`) to animate it with `'filters.halo.<option>'`. `bl
 Gotchas, all measured:
 
 - **Distortion:** `warp` (`wave`: a flag or the surface of water, `haze`: heat shimmer; moves with the frame's time, no keyframes needed, and pads the layer by `strength` so a shifted edge is not cut), `twist` (a swirl), `bulgePinch` (a lens), `shockwave` (a ring that spreads), `rgbSplit` (colour fringes), `glitch` (slices). `warp`'s time is the time of the frame (inside a time-remapped composition, that composition's clock), `speed: 0` stands still, `strength` is in px and is capped at 200. It bends the layer's picture; to draw something that does not exist yet, use a `shader` layer.
-- **Centres and offsets are in canvas pixels, not the layer's:** `twist.offset`, `bulgePinch.center`, `zoomBlur.center`, `radialBlur.center`, `shockwave.center` default to the canvas's top-left corner, so a layer in the middle looks unaffected. Put the centre on the layer: `{ type: 'twist', offset: { x: 640, y: 360 } }` for a layer centred on a 1280×720 canvas.
+- **`bulgePinch.center` is a fraction of the filtered layer, not pixels** (measured): `{ x: 0.5, y: 0.5 }` is the layer's middle and `{ x: 0.7, y: 0.7 }` is a bit down and to the right of it, and it can be animated (`filters.bp.center.x`, 0 to 1). A pixel value such as `{ x: 900, y: 500 }` puts the bulge far outside the layer and nothing shows (it warns).
+- **The other centres and offsets are in canvas pixels, not the layer's:** `twist.offset`, `zoomBlur.center`, `radialBlur.center`, `shockwave.center` default to the canvas's top-left corner, so a layer in the middle looks unaffected. Put the centre on the layer: `{ type: 'twist', offset: { x: 640, y: 360 } }` for a layer centred on a 1280×720 canvas.
 - **A filter works inside the layer's bounds.** Glow, dropShadow, outline and blur draw outside it and are clipped unless you widen the area (`filterArea: { x: -24, y: -24, width: w + 48, height: h + 48 }`, in the layer's own coordinates). Do not widen it for `grayscale`, `oldFilm` or other filters that paint the whole area: they fill the extra margin with black.
 - **Animate scalars by name** (`'filters.halo.outerStrength'`). Options that are points (`rgbSplit.red`, `dropShadow.offset`) are animated one leaf at a time: `'filters.<name>.red.x'` / `'filters.<name>.red.y'` tween like any number (the whole point `red: { x, y }` as a keyframe value switches at its keyframe and does not tween; a path that leads nowhere is warned about once and ignored). `pixelate` animates through `sizeX` / `sizeY`, not `size`.
 - `shockwave` and `godray` are driven by `time` (a still frame at `time: 0` looks like nothing): animate it. `radialBlur`, `shockwave` and `tiltShift` positions are canvas pixels too.

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.32.0. Update this skill with `npx skills update`; the newest docs are at https://yjmtmtk.github.io/pixi-effects/
+> Written for pixi-effects 0.34.0. 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
 
@@ -76,7 +76,7 @@ Centred text must be positioned by `anchorX/anchorY: 0.5`; estimate text width a
 
 # pixi-effects quick start
 
-    npx pixi-effects new my-video          # a page to edit
+    npx pixi-effects new my-video          # a page to edit (--size 1080x1920 --duration 20)
     npx pixi-effects view my-video.html    # look at it while you edit
     npx pixi-effects check my-video.html   # warnings, layout, sound, a contact sheet: LOOK at the PNG
     npx pixi-effects help <word>           # the docs about a word: mask, threeD, keyframes, music
@@ -101,7 +101,8 @@ What goes wrong most:
 - Anchors: rect and circle are centred on x,y; text and image are top-left (use `anchorX: 0.5`).
 - A warning is an instruction: `window.__logs` must be `[]`. Fix what it names.
 - Sound needs no files: `{ type: 'audio', sfx: 'swoosh', at: 2 }`, or `music: { bpm, tracks }`.
-- Never say done before you have looked at the check's PNG.
+- Never say done before you have looked at the check's PNG: it cannot judge a line break, a font, or how a fade ends.
+- Exist already (`help <word>`): `spans` (colour part of a text line), `vars` + `--var name=value` / `--size 1080x1920` (one page, many versions).
 - Anything else: `help <word>` first; the cheatsheet is for grep, not for reading.
 
 
@@ -347,7 +348,7 @@ A good habit that catches most of these: after `init`, read `window.__logs` (see
 ## Tooling (agent harness)
 
 30. **A scene change must keep the outgoing scene alive until the covering flood / wipe has finished**, and the next scene starts when it is complete; the flood circle must reach the corners (radius ≥ half the diagonal) and use `power2.in`, not `expo.in`. *(docs)*
-30b. **Unknown option names now warn** (`contactSheet({ cols: 2 })` → did you mean `columns`; `init({ fps })` → `frameRate`). Layer names show up in `inspect` paths, so give layers a `name`. `inspect` ignores faint (alpha < 0.3) layers and text whose x / y is animated (tickers), so a scrolling marquee is not reported as cut off. Pixi may print `[BindGroup] … destroyed while still bound` warnings at `movie.destroy()`: harmless (playback and seeking never warn). *(docs)*
+30b. **Unknown option names now warn** (`contactSheet({ cols: 2 })` → did you mean `columns`; `init({ fps })` → `frameRate`). Layer names show up in `inspect` paths, so give layers a `name`. `inspect` ignores faint (alpha < 0.3) layers and, while a geometry keyframe (x y z scale rotation …) is running on the layer, its `null` parent or its composition, a text crossing the edge on purpose (a marquee, a zoom-through); a fade, a `set` and an x written only in `initial` are no motion, so a cut-off title is reported once it has settled. Pixi may print `[BindGroup] … destroyed while still bound` warnings at `movie.destroy()`: harmless (playback and seeking never warn). *(docs)*
 30c. **Look with the built-in tools, not OS screenshots**: `await movie.contactSheet({ count: 6, as: 'dataURL' })` returns one labelled image of the whole animation; `await movie.inspect(frame)` returns every layer's canvas bounds and `issues`. If you do use a browser tool, `screenshot` needs an **absolute path**, macOS `sed -i` needs `''`, and a static server may redirect `/x.html` → `/x` and drop `?query`. Keep the template's `try/catch` around `init` so failures land in `window.__logs`. Check ≥ 5 timestamps including mid-transition. *(fixed: tools built in)*
 31. **Check audio with `movie.inspectAudio()`**: every sound measured on its own (`sound.length`, `peakDb`, `loudestAt`, `brightnessHz`), when it plays, loudness and brightness per 0.1 s window, and `issues` (the mix was limited, a layer is inaudible, an sfx is cut off by the end). Decoding a render by hand is no longer needed: `render()` encodes the same mix, on time in mp4 / mov / webm / mkv. *(fixed)*
 
@@ -433,6 +434,10 @@ A good habit that catches most of these: after `init`, read `window.__logs` (see
 105. **Layout that follows the screen is written in `W` / `H` / `GW` / `GH`, never in pixels.** After `movie.resize(w, h)` an expression sees the new size; a literal `x: 960` stays at 960. A string variable cannot be read in an expression (`x: 'title'` is a number context): use `{title}` in a string, or declare the number. A name that is declared but never read, and a `{name}` that was not declared, are both said at `init` (usually a typo). Load a web font BEFORE the first `setVars` that changes a text (see 103): the text is measured again each rebuild.
 106. **A text outline used to spike; it is round-joined now.** `style: { stroke: { color: '#000', width: 12 } }` was drawn with PixiJS's default `miter` join, so the sharp corners of W, V, A, k and 4 grew spikes ("the outline sticks out"). The library now adds `join: 'round'` to an outline that names no join; say `join: 'miter'` or `'bevel'` if you want one. The stroke is centred on the glyph edge, so half of it eats into the letter: keep `width` to about a tenth of `fontSize`, or for a thick outline put a second copy of the text with the stroke UNDER the plain one.
 107. **`spans` places pieces by measuring, so the font must be loaded first, and a span cannot change size.** A web font that is not loaded yet is measured as the fallback font and the pieces drift apart: `await document.fonts.load('30px "Name"')` before `movie.init`. `fontSize` / `fontFamily` / `lineHeight` / `align` on a span are ignored (warned): they belong to the layer's `style`. `fill`, `text` and `value` keyframes do not reach a spans layer (it is a group of text layers).
+108. **Japanese and Chinese do not wrap at spaces** (Korean has spaces, so `wordWrap` breaks there). `wordWrap: true` alone does nothing for a long line (it runs off the canvas); `breakWords: true` breaks between any two characters and can leave one to three characters alone on the last line. Break the line yourself with `\n` after a comma or a particle and size the font to fit; `check` reports a line cut by the canvas edge but does not judge an ugly break, so look at the contact sheet. Raising `fontSize` can turn a clean line into an orphan: look again after any size change.
+109. **No font is bundled, and each script needs a font that has its characters.** The machine's own fonts are used; characters a font lacks are drawn with whatever the machine falls back to, so the same page can look different on another machine. Load a web font that covers the script (Noto Sans JP, Noto Sans KR for Hangul, Noto Sans SC) with `await document.fonts.load('40px "Noto Sans KR"')` before `movie.init`, and say it in `style.fontFamily` (pitfall 103). `check` lists a layer none of whose fonts is available, but a family that nothing installs or loads is silently replaced by the next one in the list (or the generic name) without a word: the first name in `fontFamily` is not proof it was used.
+110. **Right-to-left text: three traps.** `splitText` / `animateText` order words left to right, so Arabic or Hebrew comes out reversed (split by words yourself, from the right edge, with `measureText` of the logical prefix); a mark below the font box can be clipped (the dots of an Arabic ي) unless the layer has `style.padding`; `check` sees neither. `bulgePinch.center` is 0–1 of the layer, not pixels (pitfalls elsewhere say canvas pixels for the other centres: `twist`, `zoomBlur`, `shockwave`). `npx pixi-effects help arabic` and `help bulgePinch` print the sections.
+111. **Only some named filters are tested on both backends.** `glow`, `outline`, `dropShadow`, `bevel`, `bloom`, `pixelate`, `crt`, `rgbSplit`, `dot`, `radialBlur` and `glitch` look the same on WebGPU (the default) and WebGL; `multiColorReplace` draws everything black on WebGPU, `kawaseBlur` is far weaker and `advancedBloom` sharper there: use `colorReplace`, `blur`, `bloom`. A filter follows the edges of the layer's own picture: `glow` on a full-screen opaque layer shows nothing (put it on the shapes and the text).
 
 
 <!-- ===== skills/pixi-effects/reference/recipes.md ===== -->
@@ -1618,7 +1623,7 @@ done < table.csv
 
 ## One film, several languages and colours (variables)
 
-Declare what changes as `vars` and write `{name}` in the strings and the names as identifiers in the expressions. One page then makes every variant: `pixi-effects render film.html --var lang=ja --var accent=#3949ab -o film-ja.mp4`, and a page can switch live with `movie.setVars(...)`. Load the fonts of every language before the first build (pitfall 103); `check` says a variable nothing reads, and a `{name}` nobody declared.
+Declare what changes as `vars` and write `{name}` in the strings and the names as identifiers in the expressions. One page then makes every variant: a declared variable is set from the command line (`pixi-effects render film.html --var accent=#3949ab -o film-blue.mp4`; a name the page did not declare stops the run), the language below is picked by the page from the query (`--query lang=ja`, on `check` as well as `render`), and a page can switch live with `movie.setVars(...)`. Load the fonts of every language before the first build (pitfall 103); `check` says a variable nothing reads, and a `{name}` nobody declared.
 
 ```js
 // @docs-only variants
@@ -1902,6 +1907,10 @@ Renders a [PIXI.Text](https://pixijs.com/8.x/guides/components/scene-objects/tex
 }
 ```
 
+**Wrapping and fonts for Japanese, Chinese and Korean.** `wordWrap: true` breaks a line at spaces. Japanese and Chinese have none: with `wordWrap` alone a long line does not wrap and runs off the canvas, and `breakWords: true` makes it break between any two characters, so a line can end with one to three characters alone (an orphan) and split a word or phrase in the middle. For a clean break write the line break yourself (`'あの日言えなかった言葉が、\n風に溶けていく'`, after a comma or a particle) and size the font so each line fits; `check` lists a line that is cut by the canvas edge, but it does not judge an ugly break, so look at the sheet. (Korean writes spaces between words, so `wordWrap` breaks there; a very long word still needs `breakWords`.) No font is bundled: the machine's own fonts are used, and a font that lacks the script's characters is replaced for those characters by whatever the machine has, so the look differs from machine to machine. For a result that looks the same everywhere, load a web font that covers the script (for example Noto Sans JP, Noto Sans KR for Hangul, Noto Sans SC) and `await document.fonts.load('40px "Noto Sans KR"')` before `movie.init` (see pitfall 103); give the family in `style.fontFamily`.
+
+**Right-to-left and complex scripts (measured in trials).** With a font that covers the script the text is shaped correctly: Arabic letters connect and read right to left, Hebrew reads right to left, Thai and Devanagari marks stack. The direction follows the first strong letter of the line; place it with `anchorX: 1` and `style.align: 'right'`. Three traps: (1) marks that hang below the font's box can be cut off (the dots of an Arabic ي turn "في" into "فى"): give the layer `style.padding` (30 at a size of 120), and `check` cannot see it, so look at the picture; (2) `splitText` and `animateText` place words and letters from left to right, so an Arabic line comes out in reverse order, and `by: 'chars'` breaks the connected forms: split the line by words yourself and place each word at the right edge minus `measureText` of the logical text up to that word; (3) `visibleChars` shapes each prefix alone, so the last letter can show in its isolated form until the next one arrives: uncovering the whole line with a mask whose width grows keeps the connected forms.
+
 The text's `fill` is also animatable via keyframes (under the `to`/`from`/`set` keys, not under `style`). Set `colorSpace` for perceptual interpolation:
 
 ```ts
@@ -3141,6 +3150,8 @@ Animatable: `threshold`, `smoothing`, `spill`. `keyColor` is set at build time.
 
 ### Named filters (`{ type: 'glow', … }`)
 
+**Which ones to use.** A filter works on a layer's own pixels (a glow around the letters, an outline, a shadow), which a `shader` layer cannot do (it draws new content). The 38 named filters that come from `pixi-filters` are not equally trustworthy: `tests/tools/filterSweep.test.ts` draws these on WebGPU (the default backend) and on WebGL and requires that each one shows and looks the same: **`glow`, `outline`, `dropShadow`, `bevel`, `bloom`, `pixelate`, `crt`, `rgbSplit`, `dot`, `radialBlur`, `glitch`** (`grain`, `warp` and `blur` are this library's or PixiJS's own). Reach for these first. The others are not tested on both backends; measured differences: `multiColorReplace` draws the whole picture black on WebGPU (use `colorReplace`), `kawaseBlur` blurs far less on WebGPU (use `blur`), `advancedBloom` is sharper on WebGPU (use `bloom`), `ascii` shows stripes on WebGPU. A filter only shows along the edges of a layer's own picture: on a full-bleed opaque layer `glow` and `outline` have nothing to follow, so put them on the shapes and text. `radialBlur` did nothing on WebGPU before 0.34 (an upstream i32 / f32 mismatch, worked around).
+
 A filter by name, as plain data. `type` is the filter's class name without `Filter`, in camelCase (case does not matter), and every other key is that filter's own option. No import, and the layer stays JSON:
 
 ```ts
@@ -3170,7 +3181,7 @@ Name a filter (`name: 'halo'`) to animate it with `'filters.halo.<option>'`. `bl
 | `oldFilm` | `sepia noise scratch scratchDensity vignetting seed` | Aged film |
 | `glitch` | `slices offset direction seed average` | Digital glitch |
 | `warp` | `kind: 'wave' \| 'haze'`, `strength` (max shift, px, 6), `scale` (wavelength or cell size, px, 80), `speed` (0.5), `angle` (degrees: the way a wave travels, 0), `seed` (`haze`) | Bends the picture: a travelling wave (flags, water) or drifting noise (heat haze). This library's own, time-driven |
-| `bulgePinch` | `center radius strength` | Bulge (+) / pinch (−) |
+| `bulgePinch` | `center radius strength` (`center`: 0–1 of the layer) | Bulge (+) / pinch (−) |
 | `twist` | `radius angle offset: { x, y }` | Swirl |
 | `zoomBlur` | `strength center innerRadius radius` | Radial zoom streaks |
 | `kawaseBlur` | `strength quality` | Cheap, wide blur |
@@ -3195,7 +3206,8 @@ Name a filter (`name: 'halo'`) to animate it with `'filters.halo.<option>'`. `bl
 Gotchas, all measured:
 
 - **Distortion:** `warp` (`wave`: a flag or the surface of water, `haze`: heat shimmer; moves with the frame's time, no keyframes needed, and pads the layer by `strength` so a shifted edge is not cut), `twist` (a swirl), `bulgePinch` (a lens), `shockwave` (a ring that spreads), `rgbSplit` (colour fringes), `glitch` (slices). `warp`'s time is the time of the frame (inside a time-remapped composition, that composition's clock), `speed: 0` stands still, `strength` is in px and is capped at 200. It bends the layer's picture; to draw something that does not exist yet, use a `shader` layer.
-- **Centres and offsets are in canvas pixels, not the layer's:** `twist.offset`, `bulgePinch.center`, `zoomBlur.center`, `radialBlur.center`, `shockwave.center` default to the canvas's top-left corner, so a layer in the middle looks unaffected. Put the centre on the layer: `{ type: 'twist', offset: { x: 640, y: 360 } }` for a layer centred on a 1280×720 canvas.
+- **`bulgePinch.center` is a fraction of the filtered layer, not pixels** (measured): `{ x: 0.5, y: 0.5 }` is the layer's middle and `{ x: 0.7, y: 0.7 }` is a bit down and to the right of it, and it can be animated (`filters.bp.center.x`, 0 to 1). A pixel value such as `{ x: 900, y: 500 }` puts the bulge far outside the layer and nothing shows (it warns).
+- **The other centres and offsets are in canvas pixels, not the layer's:** `twist.offset`, `zoomBlur.center`, `radialBlur.center`, `shockwave.center` default to the canvas's top-left corner, so a layer in the middle looks unaffected. Put the centre on the layer: `{ type: 'twist', offset: { x: 640, y: 360 } }` for a layer centred on a 1280×720 canvas.
 - **A filter works inside the layer's bounds.** Glow, dropShadow, outline and blur draw outside it and are clipped unless you widen the area (`filterArea: { x: -24, y: -24, width: w + 48, height: h + 48 }`, in the layer's own coordinates). Do not widen it for `grayscale`, `oldFilm` or other filters that paint the whole area: they fill the extra margin with black.
 - **Animate scalars by name** (`'filters.halo.outerStrength'`). Options that are points (`rgbSplit.red`, `dropShadow.offset`) are animated one leaf at a time: `'filters.<name>.red.x'` / `'filters.<name>.red.y'` tween like any number (the whole point `red: { x, y }` as a keyframe value switches at its keyframe and does not tween; a path that leads nowhere is warned about once and ignored). `pixelate` animates through `sizeX` / `sizeY`, not `size`.
 - `shockwave` and `godray` are driven by `time` (a still frame at `time: 0` looks like nothing): animate it. `radialBlur`, `shockwave` and `tiltShift` positions are canvas pixels too.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixi-effects",
-  "version": "0.32.0",
+  "version": "0.34.0",
   "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.32.0. Update this skill with `npx skills update`; the newest docs are at https://yjmtmtk.github.io/pixi-effects/
+> Written for pixi-effects 0.34.0. 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/pitfalls.md

@@ -49,7 +49,7 @@ A good habit that catches most of these: after `init`, read `window.__logs` (see
 ## Tooling (agent harness)
 
 30. **A scene change must keep the outgoing scene alive until the covering flood / wipe has finished**, and the next scene starts when it is complete; the flood circle must reach the corners (radius ≥ half the diagonal) and use `power2.in`, not `expo.in`. *(docs)*
-30b. **Unknown option names now warn** (`contactSheet({ cols: 2 })` → did you mean `columns`; `init({ fps })` → `frameRate`). Layer names show up in `inspect` paths, so give layers a `name`. `inspect` ignores faint (alpha < 0.3) layers and text whose x / y is animated (tickers), so a scrolling marquee is not reported as cut off. Pixi may print `[BindGroup] … destroyed while still bound` warnings at `movie.destroy()`: harmless (playback and seeking never warn). *(docs)*
+30b. **Unknown option names now warn** (`contactSheet({ cols: 2 })` → did you mean `columns`; `init({ fps })` → `frameRate`). Layer names show up in `inspect` paths, so give layers a `name`. `inspect` ignores faint (alpha < 0.3) layers and, while a geometry keyframe (x y z scale rotation …) is running on the layer, its `null` parent or its composition, a text crossing the edge on purpose (a marquee, a zoom-through); a fade, a `set` and an x written only in `initial` are no motion, so a cut-off title is reported once it has settled. Pixi may print `[BindGroup] … destroyed while still bound` warnings at `movie.destroy()`: harmless (playback and seeking never warn). *(docs)*
 30c. **Look with the built-in tools, not OS screenshots**: `await movie.contactSheet({ count: 6, as: 'dataURL' })` returns one labelled image of the whole animation; `await movie.inspect(frame)` returns every layer's canvas bounds and `issues`. If you do use a browser tool, `screenshot` needs an **absolute path**, macOS `sed -i` needs `''`, and a static server may redirect `/x.html` → `/x` and drop `?query`. Keep the template's `try/catch` around `init` so failures land in `window.__logs`. Check ≥ 5 timestamps including mid-transition. *(fixed: tools built in)*
 31. **Check audio with `movie.inspectAudio()`**: every sound measured on its own (`sound.length`, `peakDb`, `loudestAt`, `brightnessHz`), when it plays, loudness and brightness per 0.1 s window, and `issues` (the mix was limited, a layer is inaudible, an sfx is cut off by the end). Decoding a render by hand is no longer needed: `render()` encodes the same mix, on time in mp4 / mov / webm / mkv. *(fixed)*
 
@@ -135,3 +135,7 @@ A good habit that catches most of these: after `init`, read `window.__logs` (see
 105. **Layout that follows the screen is written in `W` / `H` / `GW` / `GH`, never in pixels.** After `movie.resize(w, h)` an expression sees the new size; a literal `x: 960` stays at 960. A string variable cannot be read in an expression (`x: 'title'` is a number context): use `{title}` in a string, or declare the number. A name that is declared but never read, and a `{name}` that was not declared, are both said at `init` (usually a typo). Load a web font BEFORE the first `setVars` that changes a text (see 103): the text is measured again each rebuild.
 106. **A text outline used to spike; it is round-joined now.** `style: { stroke: { color: '#000', width: 12 } }` was drawn with PixiJS's default `miter` join, so the sharp corners of W, V, A, k and 4 grew spikes ("the outline sticks out"). The library now adds `join: 'round'` to an outline that names no join; say `join: 'miter'` or `'bevel'` if you want one. The stroke is centred on the glyph edge, so half of it eats into the letter: keep `width` to about a tenth of `fontSize`, or for a thick outline put a second copy of the text with the stroke UNDER the plain one.
 107. **`spans` places pieces by measuring, so the font must be loaded first, and a span cannot change size.** A web font that is not loaded yet is measured as the fallback font and the pieces drift apart: `await document.fonts.load('30px "Name"')` before `movie.init`. `fontSize` / `fontFamily` / `lineHeight` / `align` on a span are ignored (warned): they belong to the layer's `style`. `fill`, `text` and `value` keyframes do not reach a spans layer (it is a group of text layers).
+108. **Japanese and Chinese do not wrap at spaces** (Korean has spaces, so `wordWrap` breaks there). `wordWrap: true` alone does nothing for a long line (it runs off the canvas); `breakWords: true` breaks between any two characters and can leave one to three characters alone on the last line. Break the line yourself with `\n` after a comma or a particle and size the font to fit; `check` reports a line cut by the canvas edge but does not judge an ugly break, so look at the contact sheet. Raising `fontSize` can turn a clean line into an orphan: look again after any size change.
+109. **No font is bundled, and each script needs a font that has its characters.** The machine's own fonts are used; characters a font lacks are drawn with whatever the machine falls back to, so the same page can look different on another machine. Load a web font that covers the script (Noto Sans JP, Noto Sans KR for Hangul, Noto Sans SC) with `await document.fonts.load('40px "Noto Sans KR"')` before `movie.init`, and say it in `style.fontFamily` (pitfall 103). `check` lists a layer none of whose fonts is available, but a family that nothing installs or loads is silently replaced by the next one in the list (or the generic name) without a word: the first name in `fontFamily` is not proof it was used.
+110. **Right-to-left text: three traps.** `splitText` / `animateText` order words left to right, so Arabic or Hebrew comes out reversed (split by words yourself, from the right edge, with `measureText` of the logical prefix); a mark below the font box can be clipped (the dots of an Arabic ي) unless the layer has `style.padding`; `check` sees neither. `bulgePinch.center` is 0–1 of the layer, not pixels (pitfalls elsewhere say canvas pixels for the other centres: `twist`, `zoomBlur`, `shockwave`). `npx pixi-effects help arabic` and `help bulgePinch` print the sections.
+111. **Only some named filters are tested on both backends.** `glow`, `outline`, `dropShadow`, `bevel`, `bloom`, `pixelate`, `crt`, `rgbSplit`, `dot`, `radialBlur` and `glitch` look the same on WebGPU (the default) and WebGL; `multiColorReplace` draws everything black on WebGPU, `kawaseBlur` is far weaker and `advancedBloom` sharper there: use `colorReplace`, `blur`, `bloom`. A filter follows the edges of the layer's own picture: `glow` on a full-screen opaque layer shows nothing (put it on the shapes and the text).

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

@@ -1,6 +1,6 @@
 # pixi-effects quick start
 
-    npx pixi-effects new my-video          # a page to edit
+    npx pixi-effects new my-video          # a page to edit (--size 1080x1920 --duration 20)
     npx pixi-effects view my-video.html    # look at it while you edit
     npx pixi-effects check my-video.html   # warnings, layout, sound, a contact sheet: LOOK at the PNG
     npx pixi-effects help <word>           # the docs about a word: mask, threeD, keyframes, music
@@ -25,5 +25,6 @@ What goes wrong most:
 - Anchors: rect and circle are centred on x,y; text and image are top-left (use `anchorX: 0.5`).
 - A warning is an instruction: `window.__logs` must be `[]`. Fix what it names.
 - Sound needs no files: `{ type: 'audio', sfx: 'swoosh', at: 2 }`, or `music: { bpm, tracks }`.
-- Never say done before you have looked at the check's PNG.
+- Never say done before you have looked at the check's PNG: it cannot judge a line break, a font, or how a fade ends.
+- Exist already (`help <word>`): `spans` (colour part of a text line), `vars` + `--var name=value` / `--size 1080x1920` (one page, many versions).
 - Anything else: `help <word>` first; the cheatsheet is for grep, not for reading.

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

@@ -1179,7 +1179,7 @@ done < table.csv
 
 ## One film, several languages and colours (variables)
 
-Declare what changes as `vars` and write `{name}` in the strings and the names as identifiers in the expressions. One page then makes every variant: `pixi-effects render film.html --var lang=ja --var accent=#3949ab -o film-ja.mp4`, and a page can switch live with `movie.setVars(...)`. Load the fonts of every language before the first build (pitfall 103); `check` says a variable nothing reads, and a `{name}` nobody declared.
+Declare what changes as `vars` and write `{name}` in the strings and the names as identifiers in the expressions. One page then makes every variant: a declared variable is set from the command line (`pixi-effects render film.html --var accent=#3949ab -o film-blue.mp4`; a name the page did not declare stops the run), the language below is picked by the page from the query (`--query lang=ja`, on `check` as well as `render`), and a page can switch live with `movie.setVars(...)`. Load the fonts of every language before the first build (pitfall 103); `check` says a variable nothing reads, and a `{name}` nobody declared.
 
 ```js
 // @docs-only variants

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.32.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.34.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 -->
   <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.32.0/dist/index.js",
-      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.32.0/dist/Controller.js",
-      "pixi-effects/present":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.32.0/dist/present.js",
-      "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.32.0/dist/three.js",
+      "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.34.0/dist/index.js",
+      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.34.0/dist/Controller.js",
+      "pixi-effects/present":  "https://cdn.jsdelivr.net/npm/pixi-effects@0.34.0/dist/present.js",
+      "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.34.0/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.32.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.34.0/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';

package/dist/Composition-LNMKWXSL.cjs

@@ -1,16 +0,0 @@
-'use strict';
-
-var chunkCRUDOKSD_cjs = require('./chunk-CRUDOKSD.cjs');
-require('./chunk-QHDN6TF5.cjs');
-require('./chunk-Z437UWI4.cjs');
-require('./chunk-FCGYJCVO.cjs');
-require('./chunk-TWZNOUM7.cjs');
-
-
-
-Object.defineProperty(exports, "CompositionSequence", {
-  enumerable: true,
-  get: function () { return chunkCRUDOKSD_cjs.CompositionSequence; }
-});
-//# sourceMappingURL=Composition-LNMKWXSL.cjs.map
-//# sourceMappingURL=Composition-LNMKWXSL.cjs.map

package/dist/Composition-RF7QOEXT.js

@@ -1,7 +0,0 @@
-export { CompositionSequence } from './chunk-D5BFQVKL.js';
-import './chunk-AW5NPDE4.js';
-import './chunk-QFNS6BFL.js';
-import './chunk-C5BNHVKK.js';
-import './chunk-BXOCEZ4U.js';
-//# sourceMappingURL=Composition-RF7QOEXT.js.map
-//# sourceMappingURL=Composition-RF7QOEXT.js.map