pixi-effects 0.35.0 → 0.36.0

package/dist/index.cjs

@@ -1,125 +1,125 @@
 'use strict';
 
-var chunk7TTCPHAV_cjs = require('./chunk-7TTCPHAV.cjs');
-require('./chunk-5IJENZOG.cjs');
-var chunkLEECUCTG_cjs = require('./chunk-LEECUCTG.cjs');
-require('./chunk-IMQJVRMT.cjs');
-require('./chunk-GL2AQFLQ.cjs');
+var chunkCC7SUR7Q_cjs = require('./chunk-CC7SUR7Q.cjs');
+require('./chunk-Y5UWFH6Y.cjs');
+var chunkKJSEQVBV_cjs = require('./chunk-KJSEQVBV.cjs');
+require('./chunk-NEUPEENI.cjs');
+require('./chunk-42ML5AKN.cjs');
 var chunkTWZNOUM7_cjs = require('./chunk-TWZNOUM7.cjs');
 
 
 
 Object.defineProperty(exports, "Movie", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.Movie; }
+  get: function () { return chunkCC7SUR7Q_cjs.Movie; }
 });
 Object.defineProperty(exports, "animateText", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.animateText; }
+  get: function () { return chunkCC7SUR7Q_cjs.animateText; }
 });
 Object.defineProperty(exports, "audioEnvelope", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.audioEnvelope; }
+  get: function () { return chunkCC7SUR7Q_cjs.audioEnvelope; }
 });
 Object.defineProperty(exports, "bpmEnvelope", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.bpmEnvelope; }
+  get: function () { return chunkCC7SUR7Q_cjs.bpmEnvelope; }
 });
 Object.defineProperty(exports, "cameraPath", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.cameraPath; }
+  get: function () { return chunkCC7SUR7Q_cjs.cameraPath; }
 });
 Object.defineProperty(exports, "computeEnvelope", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.computeEnvelope; }
+  get: function () { return chunkCC7SUR7Q_cjs.computeEnvelope; }
 });
 Object.defineProperty(exports, "dismissLoader", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.dismissLoader; }
+  get: function () { return chunkCC7SUR7Q_cjs.dismissLoader; }
 });
 Object.defineProperty(exports, "ease", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.parseEase; }
+  get: function () { return chunkCC7SUR7Q_cjs.parseEase; }
 });
 Object.defineProperty(exports, "failLoader", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.failLoader; }
+  get: function () { return chunkCC7SUR7Q_cjs.failLoader; }
 });
 Object.defineProperty(exports, "followPath", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.followPath; }
+  get: function () { return chunkCC7SUR7Q_cjs.followPath; }
 });
 Object.defineProperty(exports, "kenBurns", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.kenBurns; }
+  get: function () { return chunkCC7SUR7Q_cjs.kenBurns; }
 });
 Object.defineProperty(exports, "measureText", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.measureText; }
+  get: function () { return chunkCC7SUR7Q_cjs.measureText; }
 });
 Object.defineProperty(exports, "musicBuffer", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.musicBuffer; }
+  get: function () { return chunkCC7SUR7Q_cjs.musicBuffer; }
 });
 Object.defineProperty(exports, "musicEnvelope", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.musicEnvelope; }
+  get: function () { return chunkCC7SUR7Q_cjs.musicEnvelope; }
 });
 Object.defineProperty(exports, "musicEvents", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.musicEvents; }
+  get: function () { return chunkCC7SUR7Q_cjs.musicEvents; }
 });
 Object.defineProperty(exports, "orbit", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.orbit; }
+  get: function () { return chunkCC7SUR7Q_cjs.orbit; }
 });
 Object.defineProperty(exports, "particles", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.particles; }
+  get: function () { return chunkCC7SUR7Q_cjs.particles; }
 });
 Object.defineProperty(exports, "react", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.react; }
+  get: function () { return chunkCC7SUR7Q_cjs.react; }
 });
 Object.defineProperty(exports, "resolveLoader", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.resolveLoader; }
+  get: function () { return chunkCC7SUR7Q_cjs.resolveLoader; }
 });
 Object.defineProperty(exports, "splitText", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.splitText; }
+  get: function () { return chunkCC7SUR7Q_cjs.splitText; }
 });
 Object.defineProperty(exports, "stagger", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.stagger; }
+  get: function () { return chunkCC7SUR7Q_cjs.stagger; }
 });
 Object.defineProperty(exports, "wiggle", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.wiggle; }
+  get: function () { return chunkCC7SUR7Q_cjs.wiggle; }
 });
 Object.defineProperty(exports, "withFade", {
   enumerable: true,
-  get: function () { return chunk7TTCPHAV_cjs.withFade; }
+  get: function () { return chunkCC7SUR7Q_cjs.withFade; }
 });
 Object.defineProperty(exports, "Sequence", {
   enumerable: true,
-  get: function () { return chunkLEECUCTG_cjs.Sequence; }
+  get: function () { return chunkKJSEQVBV_cjs.Sequence; }
 });
 Object.defineProperty(exports, "noise", {
   enumerable: true,
-  get: function () { return chunkLEECUCTG_cjs.noise; }
+  get: function () { return chunkKJSEQVBV_cjs.noise; }
 });
 Object.defineProperty(exports, "rand", {
   enumerable: true,
-  get: function () { return chunkLEECUCTG_cjs.rand; }
+  get: function () { return chunkKJSEQVBV_cjs.rand; }
 });
 Object.defineProperty(exports, "random", {
   enumerable: true,
-  get: function () { return chunkLEECUCTG_cjs.random; }
+  get: function () { return chunkKJSEQVBV_cjs.random; }
 });
 Object.defineProperty(exports, "registerSequenceType", {
   enumerable: true,
-  get: function () { return chunkLEECUCTG_cjs.registerSequenceType; }
+  get: function () { return chunkKJSEQVBV_cjs.registerSequenceType; }
 });
 Object.defineProperty(exports, "warnUnknownOptions", {
   enumerable: true,

package/dist/index.d.cts

@@ -1,8 +1,8 @@
-import { M as MusicEvents } from './Movie-Db4QnMIH.cjs';
-export { A as AudioInspectOptions, a as AudioReport, b as AudioSourceReport, C as ContactSheetOptions, F as FontReport, c as FrameEvent, I as InspectOptions, d as InspectReport, e as IssueGroup, L as LayerInfo, f as LoadProgressState, g as LoadStage, h as LoaderOption, i as LoopEvent, j as MotionBlurOptions, k as MotionBlurSpec, l as Movie, m as MovieErrorEvent, n as MovieOptions, o as MusicDrumEvents, p as MusicDrumHit, q as MusicNote, r as MusicSummary, s as MusicTrackEvents, O as OnionSkinOptions, P as ProgressEvent, R as RebuildOptions, t as RebuildReason, u as RebuildReport, v as RenderOptions, w as ReviewOptions, x as ReviewReport, S as SnapshotOptions, y as SoundMeasure, T as ThumbnailOptions, z as TimelineData, B as TimelineHtmlOptions, D as TimelineRow, E as TimelineSvgOptions, G as TimelineTransition, V as VolumeEvent, H as dismissLoader, J as failLoader, K as resolveLoader } from './Movie-Db4QnMIH.cjs';
-import { S as SequenceSpec, C as CompositionShape, I as ImageSequenceSpec, a as CameraSequenceSpec, K as Keyframe, T as TextSequenceSpec, M as MusicOptions, b as SequenceCommon } from './types-CavnUvd5.cjs';
-export { A as ArcShapeSpec, c as AssetSpec, d as AudioAssetSpec, e as AudioMusicSpec, f as AudioSequenceSpec, g as AudioSfxSpec, B as BlendModeName, h as ChromaKeyFilterSpec, i as CircleShapeSpec, j as CompositionSequenceSpec, k as CompositionSpec, l as CrossfadeTransition, m as CustomFilterSpec, D as DipTransition, n as DissolveTransition, E as EllipseShapeSpec, o as Expr, F as FilterSpec, G as GradientSpec, p as IrisTransition, L as LightSequenceSpec, q as LineShapeSpec, r as LumaTransition, s as MaskRefSpec, t as MatteRefSpec, u as MusicDrum, v as MusicDrums, w as MusicInstrument, x as MusicLevel, y as MusicTrack, N as NullSequenceSpec, P as PathShapeSpec, z as PolygonShapeSpec, H as PropValue, J as Props, R as RectShapeSpec, O as SfxKnobs, Q as SfxOptions, U as SfxPreset, V as SfxVoice, W as ShaderSequenceSpec, X as ShapeSequenceSpec, Y as SlideTransition, Z as Stop, _ as StopSpec, $ as TextSpan, a0 as TransitionCommon, a1 as TransitionSpec, a2 as VideoSequenceSpec, a3 as WipeTransition, a4 as ZoomTransition } from './types-CavnUvd5.cjs';
-import { S as Sequence } from './Base-pNq6sVGl.cjs';
+import { M as MusicEvents } from './Movie-Bh1HPdKw.cjs';
+export { A as AudioInspectOptions, a as AudioReport, b as AudioSourceReport, C as ContactSheetOptions, F as FontReport, c as FrameEvent, I as InspectOptions, d as InspectReport, e as IssueGroup, L as LayerInfo, f as LoadProgressState, g as LoadStage, h as LoaderOption, i as LoopEvent, j as MotionBlurOptions, k as MotionBlurSpec, l as Movie, m as MovieErrorEvent, n as MovieOptions, o as MusicDrumEvents, p as MusicDrumHit, q as MusicNote, r as MusicSummary, s as MusicTrackEvents, O as OnionSkinOptions, P as ProgressEvent, R as RebuildOptions, t as RebuildReason, u as RebuildReport, v as RenderOptions, w as ReviewOptions, x as ReviewReport, S as SnapshotOptions, y as SoundMeasure, T as ThumbnailOptions, z as TimelineData, B as TimelineHtmlOptions, D as TimelineRow, E as TimelineSvgOptions, G as TimelineTransition, V as VolumeEvent, H as dismissLoader, J as failLoader, K as resolveLoader } from './Movie-Bh1HPdKw.cjs';
+import { S as SequenceSpec, C as CompositionShape, I as ImageSequenceSpec, a as CameraSequenceSpec, K as Keyframe, T as TextSequenceSpec, M as MusicOptions, b as SequenceCommon } from './types-B6zDTU2V.cjs';
+export { A as ArcShapeSpec, c as AssetSpec, d as AudioAssetSpec, e as AudioMusicSpec, f as AudioSequenceSpec, g as AudioSfxSpec, B as BlendModeName, h as ChromaKeyFilterSpec, i as CircleShapeSpec, j as CompositionSequenceSpec, k as CompositionSpec, l as CrossfadeTransition, m as CustomFilterSpec, D as DipTransition, n as DissolveTransition, E as EllipseShapeSpec, o as Expr, F as FilterSpec, G as GradientSpec, p as IrisTransition, L as LightSequenceSpec, q as LineShapeSpec, r as LumaTransition, s as MaskRefSpec, t as MatteRefSpec, u as MusicDrum, v as MusicDrums, w as MusicInstrument, x as MusicLevel, y as MusicTrack, N as NullSequenceSpec, P as PathShapeSpec, z as PolygonShapeSpec, H as PropValue, J as Props, R as RectShapeSpec, O as SfxKnobs, Q as SfxOptions, U as SfxPreset, V as SfxVoice, W as ShaderSequenceSpec, X as ShapeSequenceSpec, Y as SlideTransition, Z as Stop, _ as StopSpec, $ as TextSpan, a0 as TransitionCommon, a1 as TransitionSpec, a2 as VideoSequenceSpec, a3 as WipeTransition, a4 as ZoomTransition } from './types-B6zDTU2V.cjs';
+import { S as Sequence } from './Base-CmiFiwQM.cjs';
 import 'pixi.js';
 
 /** A text style as written in a `text` layer's `style` (numbers, not expressions, for the fields that size the text). */
@@ -22,6 +22,13 @@ interface SplitOptions {
     y?: number;
     /** How each line sits on `x`. Default `'left'`. */
     align?: 'left' | 'center' | 'right';
+    /**
+     * Vertical writing (tategaki): characters go down a column, a new line is a new column to the left. `x` is then the RIGHT edge of the first column and `y` the top
+     * of a column (`align`: `'left'` keeps y at the top, `'center'` at the middle, `'right'` at the bottom). Only `by: 'chars'` has a vertical form. Each piece also gets
+     * `cx` / `cy` (the centre of its cell, punctuation already moved to the upper right) and `rotation` (degrees: the long vowel mark, dashes, waves and brackets are turned
+     * a quarter clockwise); place a text layer with `anchorX: 0.5, anchorY: 0.5` at `cx` / `cy` and `rotation: p.rotation`. `animateText(..., { vertical: true })` does all of it.
+     */
+    vertical?: boolean;
 }
 interface TextPiece {
     text: string;
@@ -34,6 +41,11 @@ interface TextPiece {
     index: number;
     /** Which line (0-based) the piece is on. */
     line: number;
+    /** Vertical text only: where the centre of the piece goes (a text layer with `anchorX: 0.5, anchorY: 0.5`). */
+    cx?: number;
+    cy?: number;
+    /** Vertical text only: the turn in degrees the piece needs (0 or 90). */
+    rotation?: number;
 }
 /**
  * How big `text` is drawn with `style`: the same numbers a text layer with that style has, measured with the font the
@@ -403,7 +415,7 @@ type TextPreset = keyof typeof PRESETS;
 interface AnimateTextTween {
     /** Start from this preset and change what you give below. */
     preset?: TextPreset;
-    /** The hidden state: `x` / `y` are offsets from the resting place, everything else (`alpha`, `scale`, `rotation`, …) is absolute. */
+    /** The hidden state: `x` / `y` are offsets from the resting place, everything else (`alpha`, `scale`, …) is absolute; `rotation` too, from the resting rotation (0, except the turned glyphs of vertical text, which rest at 90°). */
     from?: Record<string, number>;
     /** The resting state, for properties that have none of their own (`alpha` 1, `scale` 1, `rotation` 0 and the place are known). */
     to?: Record<string, number>;
@@ -422,6 +434,8 @@ interface AnimateTextOptions {
     /** Top of the first line. */
     y?: number;
     align?: 'left' | 'center' | 'right';
+    /** Vertical writing: characters go down a column, a new line is a new column to the left, and `x` is the RIGHT edge of the first column (see `splitText`). Punctuation and the long vowel mark are placed and turned the way tategaki wants. */
+    vertical?: boolean;
     /** Layers are named `<name>-0`, `<name>-1`, … (default `'text'`). */
     name?: string;
     /** When the first piece starts, in composition seconds. Default 0. */

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-import { M as MusicEvents } from './Movie-VYtUN4TS.js';
-export { A as AudioInspectOptions, a as AudioReport, b as AudioSourceReport, C as ContactSheetOptions, F as FontReport, c as FrameEvent, I as InspectOptions, d as InspectReport, e as IssueGroup, L as LayerInfo, f as LoadProgressState, g as LoadStage, h as LoaderOption, i as LoopEvent, j as MotionBlurOptions, k as MotionBlurSpec, l as Movie, m as MovieErrorEvent, n as MovieOptions, o as MusicDrumEvents, p as MusicDrumHit, q as MusicNote, r as MusicSummary, s as MusicTrackEvents, O as OnionSkinOptions, P as ProgressEvent, R as RebuildOptions, t as RebuildReason, u as RebuildReport, v as RenderOptions, w as ReviewOptions, x as ReviewReport, S as SnapshotOptions, y as SoundMeasure, T as ThumbnailOptions, z as TimelineData, B as TimelineHtmlOptions, D as TimelineRow, E as TimelineSvgOptions, G as TimelineTransition, V as VolumeEvent, H as dismissLoader, J as failLoader, K as resolveLoader } from './Movie-VYtUN4TS.js';
-import { S as SequenceSpec, C as CompositionShape, I as ImageSequenceSpec, a as CameraSequenceSpec, K as Keyframe, T as TextSequenceSpec, M as MusicOptions, b as SequenceCommon } from './types-CavnUvd5.js';
-export { A as ArcShapeSpec, c as AssetSpec, d as AudioAssetSpec, e as AudioMusicSpec, f as AudioSequenceSpec, g as AudioSfxSpec, B as BlendModeName, h as ChromaKeyFilterSpec, i as CircleShapeSpec, j as CompositionSequenceSpec, k as CompositionSpec, l as CrossfadeTransition, m as CustomFilterSpec, D as DipTransition, n as DissolveTransition, E as EllipseShapeSpec, o as Expr, F as FilterSpec, G as GradientSpec, p as IrisTransition, L as LightSequenceSpec, q as LineShapeSpec, r as LumaTransition, s as MaskRefSpec, t as MatteRefSpec, u as MusicDrum, v as MusicDrums, w as MusicInstrument, x as MusicLevel, y as MusicTrack, N as NullSequenceSpec, P as PathShapeSpec, z as PolygonShapeSpec, H as PropValue, J as Props, R as RectShapeSpec, O as SfxKnobs, Q as SfxOptions, U as SfxPreset, V as SfxVoice, W as ShaderSequenceSpec, X as ShapeSequenceSpec, Y as SlideTransition, Z as Stop, _ as StopSpec, $ as TextSpan, a0 as TransitionCommon, a1 as TransitionSpec, a2 as VideoSequenceSpec, a3 as WipeTransition, a4 as ZoomTransition } from './types-CavnUvd5.js';
-import { S as Sequence } from './Base-CXsMdmJB.js';
+import { M as MusicEvents } from './Movie-D5WFfZdZ.js';
+export { A as AudioInspectOptions, a as AudioReport, b as AudioSourceReport, C as ContactSheetOptions, F as FontReport, c as FrameEvent, I as InspectOptions, d as InspectReport, e as IssueGroup, L as LayerInfo, f as LoadProgressState, g as LoadStage, h as LoaderOption, i as LoopEvent, j as MotionBlurOptions, k as MotionBlurSpec, l as Movie, m as MovieErrorEvent, n as MovieOptions, o as MusicDrumEvents, p as MusicDrumHit, q as MusicNote, r as MusicSummary, s as MusicTrackEvents, O as OnionSkinOptions, P as ProgressEvent, R as RebuildOptions, t as RebuildReason, u as RebuildReport, v as RenderOptions, w as ReviewOptions, x as ReviewReport, S as SnapshotOptions, y as SoundMeasure, T as ThumbnailOptions, z as TimelineData, B as TimelineHtmlOptions, D as TimelineRow, E as TimelineSvgOptions, G as TimelineTransition, V as VolumeEvent, H as dismissLoader, J as failLoader, K as resolveLoader } from './Movie-D5WFfZdZ.js';
+import { S as SequenceSpec, C as CompositionShape, I as ImageSequenceSpec, a as CameraSequenceSpec, K as Keyframe, T as TextSequenceSpec, M as MusicOptions, b as SequenceCommon } from './types-B6zDTU2V.js';
+export { A as ArcShapeSpec, c as AssetSpec, d as AudioAssetSpec, e as AudioMusicSpec, f as AudioSequenceSpec, g as AudioSfxSpec, B as BlendModeName, h as ChromaKeyFilterSpec, i as CircleShapeSpec, j as CompositionSequenceSpec, k as CompositionSpec, l as CrossfadeTransition, m as CustomFilterSpec, D as DipTransition, n as DissolveTransition, E as EllipseShapeSpec, o as Expr, F as FilterSpec, G as GradientSpec, p as IrisTransition, L as LightSequenceSpec, q as LineShapeSpec, r as LumaTransition, s as MaskRefSpec, t as MatteRefSpec, u as MusicDrum, v as MusicDrums, w as MusicInstrument, x as MusicLevel, y as MusicTrack, N as NullSequenceSpec, P as PathShapeSpec, z as PolygonShapeSpec, H as PropValue, J as Props, R as RectShapeSpec, O as SfxKnobs, Q as SfxOptions, U as SfxPreset, V as SfxVoice, W as ShaderSequenceSpec, X as ShapeSequenceSpec, Y as SlideTransition, Z as Stop, _ as StopSpec, $ as TextSpan, a0 as TransitionCommon, a1 as TransitionSpec, a2 as VideoSequenceSpec, a3 as WipeTransition, a4 as ZoomTransition } from './types-B6zDTU2V.js';
+import { S as Sequence } from './Base-CdF7AJop.js';
 import 'pixi.js';
 
 /** A text style as written in a `text` layer's `style` (numbers, not expressions, for the fields that size the text). */
@@ -22,6 +22,13 @@ interface SplitOptions {
     y?: number;
     /** How each line sits on `x`. Default `'left'`. */
     align?: 'left' | 'center' | 'right';
+    /**
+     * Vertical writing (tategaki): characters go down a column, a new line is a new column to the left. `x` is then the RIGHT edge of the first column and `y` the top
+     * of a column (`align`: `'left'` keeps y at the top, `'center'` at the middle, `'right'` at the bottom). Only `by: 'chars'` has a vertical form. Each piece also gets
+     * `cx` / `cy` (the centre of its cell, punctuation already moved to the upper right) and `rotation` (degrees: the long vowel mark, dashes, waves and brackets are turned
+     * a quarter clockwise); place a text layer with `anchorX: 0.5, anchorY: 0.5` at `cx` / `cy` and `rotation: p.rotation`. `animateText(..., { vertical: true })` does all of it.
+     */
+    vertical?: boolean;
 }
 interface TextPiece {
     text: string;
@@ -34,6 +41,11 @@ interface TextPiece {
     index: number;
     /** Which line (0-based) the piece is on. */
     line: number;
+    /** Vertical text only: where the centre of the piece goes (a text layer with `anchorX: 0.5, anchorY: 0.5`). */
+    cx?: number;
+    cy?: number;
+    /** Vertical text only: the turn in degrees the piece needs (0 or 90). */
+    rotation?: number;
 }
 /**
  * How big `text` is drawn with `style`: the same numbers a text layer with that style has, measured with the font the
@@ -403,7 +415,7 @@ type TextPreset = keyof typeof PRESETS;
 interface AnimateTextTween {
     /** Start from this preset and change what you give below. */
     preset?: TextPreset;
-    /** The hidden state: `x` / `y` are offsets from the resting place, everything else (`alpha`, `scale`, `rotation`, …) is absolute. */
+    /** The hidden state: `x` / `y` are offsets from the resting place, everything else (`alpha`, `scale`, …) is absolute; `rotation` too, from the resting rotation (0, except the turned glyphs of vertical text, which rest at 90°). */
     from?: Record<string, number>;
     /** The resting state, for properties that have none of their own (`alpha` 1, `scale` 1, `rotation` 0 and the place are known). */
     to?: Record<string, number>;
@@ -422,6 +434,8 @@ interface AnimateTextOptions {
     /** Top of the first line. */
     y?: number;
     align?: 'left' | 'center' | 'right';
+    /** Vertical writing: characters go down a column, a new line is a new column to the left, and `x` is the RIGHT edge of the first column (see `splitText`). Punctuation and the long vowel mark are placed and turned the way tategaki wants. */
+    vertical?: boolean;
     /** Layers are named `<name>-0`, `<name>-1`, … (default `'text'`). */
     name?: string;
     /** When the first piece starts, in composition seconds. Default 0. */

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-2GNK6DPV.js';
-import './chunk-XV4L72FW.js';
-export { Sequence, noise, rand, random, registerSequenceType } from './chunk-Y253JQOH.js';
-import './chunk-RTJD3ZSW.js';
-import './chunk-ITDYFBB6.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-VF56PRAA.js';
+import './chunk-AZ6AINSW.js';
+export { Sequence, noise, rand, random, registerSequenceType } from './chunk-G3DX65HO.js';
+import './chunk-WIIU42FH.js';
+import './chunk-2JFFKHXO.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.35.0/dist/loader.css">
+ *   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixi-effects@0.36.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-7TTCPHAV.cjs');
-require('./chunk-5IJENZOG.cjs');
-require('./chunk-LEECUCTG.cjs');
-require('./chunk-IMQJVRMT.cjs');
-require('./chunk-GL2AQFLQ.cjs');
+require('./chunk-CC7SUR7Q.cjs');
+require('./chunk-Y5UWFH6Y.cjs');
+require('./chunk-KJSEQVBV.cjs');
+require('./chunk-NEUPEENI.cjs');
+require('./chunk-42ML5AKN.cjs');
 var chunkTWZNOUM7_cjs = require('./chunk-TWZNOUM7.cjs');
 
 // src/present/stops.ts

package/dist/present.d.cts

@@ -1,5 +1,5 @@
-import { l as Movie, k as MotionBlurSpec } from './Movie-Db4QnMIH.cjs';
-import { S as SequenceSpec, J as Props, K as Keyframe, a1 as TransitionSpec, k as CompositionSpec, Z as Stop } from './types-CavnUvd5.cjs';
+import { l as Movie, k as MotionBlurSpec } from './Movie-Bh1HPdKw.cjs';
+import { S as SequenceSpec, J as Props, K as Keyframe, a1 as TransitionSpec, k as CompositionSpec, Z as Stop } from './types-B6zDTU2V.cjs';
 import 'pixi.js';
 
 interface PresenterOptions {

package/dist/present.d.ts

@@ -1,5 +1,5 @@
-import { l as Movie, k as MotionBlurSpec } from './Movie-VYtUN4TS.js';
-import { S as SequenceSpec, J as Props, K as Keyframe, a1 as TransitionSpec, k as CompositionSpec, Z as Stop } from './types-CavnUvd5.js';
+import { l as Movie, k as MotionBlurSpec } from './Movie-D5WFfZdZ.js';
+import { S as SequenceSpec, J as Props, K as Keyframe, a1 as TransitionSpec, k as CompositionSpec, Z as Stop } from './types-B6zDTU2V.js';
 import 'pixi.js';
 
 interface PresenterOptions {

package/dist/present.js

@@ -1,8 +1,8 @@
-import './chunk-2GNK6DPV.js';
-import './chunk-XV4L72FW.js';
-import './chunk-Y253JQOH.js';
-import './chunk-RTJD3ZSW.js';
-import './chunk-ITDYFBB6.js';
+import './chunk-VF56PRAA.js';
+import './chunk-AZ6AINSW.js';
+import './chunk-G3DX65HO.js';
+import './chunk-WIIU42FH.js';
+import './chunk-2JFFKHXO.js';
 import { warnUnknownOptions } from './chunk-BXOCEZ4U.js';
 
 // src/present/stops.ts

package/dist/three.cjs

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

package/dist/three.d.cts

@@ -1,6 +1,6 @@
-import { b as SequenceCommon, H as PropValue, S as SequenceSpec } from './types-CavnUvd5.cjs';
+import { b as SequenceCommon, H as PropValue, S as SequenceSpec } from './types-B6zDTU2V.cjs';
 import { Scene, Camera, WebGLRenderer } from 'three';
-import { S as Sequence, P as PathRouters } from './Base-pNq6sVGl.cjs';
+import { S as Sequence, P as PathRouters } from './Base-CmiFiwQM.cjs';
 import 'pixi.js';
 
 /** Handed to setup / update / dispose. One per three sequence. */

package/dist/three.d.ts

@@ -1,6 +1,6 @@
-import { b as SequenceCommon, H as PropValue, S as SequenceSpec } from './types-CavnUvd5.js';
+import { b as SequenceCommon, H as PropValue, S as SequenceSpec } from './types-B6zDTU2V.js';
 import { Scene, Camera, WebGLRenderer } from 'three';
-import { S as Sequence, P as PathRouters } from './Base-CXsMdmJB.js';
+import { S as Sequence, P as PathRouters } from './Base-CdF7AJop.js';
 import 'pixi.js';
 
 /** Handed to setup / update / dispose. One per three sequence. */

package/dist/three.js

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

package/dist/{types-CavnUvd5.d.ts → types-B6zDTU2V.d.cts}

@@ -292,6 +292,11 @@ interface ImageSequenceSpec extends SequenceCommon {
      * as on `shape`.
      */
     colorSpace?: 'rgb' | 'oklab' | 'oklch';
+    /**
+     * How the picture is filtered when it is drawn larger or smaller than it is: `'linear'` (smooth, the default) or `'nearest'` (hard square pixels: pixel art, a sprite
+     * sheet). It belongs to the asset, so every layer that shows the same asset gets it.
+     */
+    scaleMode?: 'nearest' | 'linear';
 }
 /**
  * One piece of a text layer's `spans`: its text and what it changes of the layer's `style`: only what keeps the baseline (colours, weight, slant,
@@ -330,11 +335,17 @@ interface TextSequenceSpec extends SequenceCommon {
      * `style.align` places the lines (default `'center'`, like every text). Measuring needs the fonts loaded (`await document.fonts.load(...)`).
      */
     spans?: Array<string | TextSpan>;
+    /**
+     * Draw the text at this many times the pixels (1 to 8; default: the renderer's own). A text is drawn once at its own size and then stretched by its parents, so text inside a
+     * group that is scaled up (a zoom, a pull-in) is soft: give it `resolution: 3` for a group that grows to 3x. The cost is the memory of a picture that much larger.
+     */
+    resolution?: number;
     /** How `{value}` is printed: `decimals` (default 0) and thousands `grouping` (default false). */
     format?: {
         decimals?: number;
         grouping?: boolean; /** Zero-pad the whole part to this many digits (`pad: 2` → `05`; a clock `18:42:05`). */
-        pad?: number;
+        pad?: number; /** Print `value` (seconds) as a clock: `'hh:mm:ss'`, `'h:mm:ss'`, `'hh:mm'`, `'mm:ss'` or `'m:ss'` (the seconds are cut, not rounded; the hours do not wrap). */
+        time?: 'hh:mm:ss' | 'h:mm:ss' | 'hh:mm' | 'mm:ss' | 'm:ss';
     };
     /** Subset of PIXI v8 TextStyleOptions. String values may be exprs (e.g. fontSize: 'GW * 0.05'). */
     style?: Record<string, PropValue | {
@@ -674,6 +685,8 @@ interface PathShapeSpec extends ShapeBase, Trimmable {
     shape: 'path';
     /** SVG path data (`d` attribute). Goes through PIXI's GraphicsContext.svg(). */
     d: string;
+    /** `'evenodd'`: with several sub-paths in `d` the biggest one is the shape and the others are holes (a donut is two circles). Default `'nonzero'`: each sub-path is filled on its own, no holes. */
+    fillRule?: 'nonzero' | 'evenodd';
     /**
      * A second outline (SVG path data, in the same canvas coordinates as `d`) to morph into. Animate `morph` from 0 (the
      * `d` outline) to 1 (this one); in between the layer is drawn as a polygon of points half way from one to the other.

package/dist/{types-CavnUvd5.d.cts → types-B6zDTU2V.d.ts}

@@ -292,6 +292,11 @@ interface ImageSequenceSpec extends SequenceCommon {
      * as on `shape`.
      */
     colorSpace?: 'rgb' | 'oklab' | 'oklch';
+    /**
+     * How the picture is filtered when it is drawn larger or smaller than it is: `'linear'` (smooth, the default) or `'nearest'` (hard square pixels: pixel art, a sprite
+     * sheet). It belongs to the asset, so every layer that shows the same asset gets it.
+     */
+    scaleMode?: 'nearest' | 'linear';
 }
 /**
  * One piece of a text layer's `spans`: its text and what it changes of the layer's `style`: only what keeps the baseline (colours, weight, slant,
@@ -330,11 +335,17 @@ interface TextSequenceSpec extends SequenceCommon {
      * `style.align` places the lines (default `'center'`, like every text). Measuring needs the fonts loaded (`await document.fonts.load(...)`).
      */
     spans?: Array<string | TextSpan>;
+    /**
+     * Draw the text at this many times the pixels (1 to 8; default: the renderer's own). A text is drawn once at its own size and then stretched by its parents, so text inside a
+     * group that is scaled up (a zoom, a pull-in) is soft: give it `resolution: 3` for a group that grows to 3x. The cost is the memory of a picture that much larger.
+     */
+    resolution?: number;
     /** How `{value}` is printed: `decimals` (default 0) and thousands `grouping` (default false). */
     format?: {
         decimals?: number;
         grouping?: boolean; /** Zero-pad the whole part to this many digits (`pad: 2` → `05`; a clock `18:42:05`). */
-        pad?: number;
+        pad?: number; /** Print `value` (seconds) as a clock: `'hh:mm:ss'`, `'h:mm:ss'`, `'hh:mm'`, `'mm:ss'` or `'m:ss'` (the seconds are cut, not rounded; the hours do not wrap). */
+        time?: 'hh:mm:ss' | 'h:mm:ss' | 'hh:mm' | 'mm:ss' | 'm:ss';
     };
     /** Subset of PIXI v8 TextStyleOptions. String values may be exprs (e.g. fontSize: 'GW * 0.05'). */
     style?: Record<string, PropValue | {
@@ -674,6 +685,8 @@ interface PathShapeSpec extends ShapeBase, Trimmable {
     shape: 'path';
     /** SVG path data (`d` attribute). Goes through PIXI's GraphicsContext.svg(). */
     d: string;
+    /** `'evenodd'`: with several sub-paths in `d` the biggest one is the shape and the others are holes (a donut is two circles). Default `'nonzero'`: each sub-path is filled on its own, no holes. */
+    fillRule?: 'nonzero' | 'evenodd';
     /**
      * A second outline (SVG path data, in the same canvas coordinates as `d`) to morph into. Animate `morph` from 0 (the
      * `d` outline) to 1 (this one); in between the layer is drawn as a polygon of points half way from one to the other.

package/docs/api.md

@@ -137,13 +137,13 @@ Text layout helpers, exported from `pixi-effects`. They measure with the rendere
 ```ts
 measureText('Hello', { fontSize: 72 });                       // { width: 187.4, height: 81.3, lines: 1 }
 
-interface SplitOptions { by?: 'chars' | 'words' | 'lines'; x?: number; y?: number; align?: 'left' | 'center' | 'right' }
-interface TextPiece { text: string; x: number; y: number; width: number; index: number; line: number }
+interface SplitOptions { by?: 'chars' | 'words' | 'lines'; x?: number; y?: number; align?: 'left' | 'center' | 'right'; vertical?: boolean }
+interface TextPiece { text: string; x: number; y: number; width: number; index: number; line: number; cx?: number; cy?: number; rotation?: number }   // cx / cy / rotation: vertical text only
 splitText('Hello world', style, { by: 'words', x: 640, y: 300, align: 'center' });
 // → [{ text: 'Hello', x, y, width, index: 0, line: 0 }, { text: 'world', ... }]
 ```
 
-`x` is the line's left edge, or its centre / right edge with `align` (each line of a `\n` text is aligned on its own width); `y` is the top of the first line, and further lines go down by the line height. Whitespace takes its room but is not returned as a piece. Use one text layer per piece with the same `style` and the default top-left anchor: `{ type: 'text', text: p.text, style, initial: { x: p.x, y: p.y } }`. Kerning is kept (a piece's x is the measured width of everything before it).
+`x` is the line's left edge, or its centre / right edge with `align` (each line of a `\n` text is aligned on its own width); `y` is the top of the first line, and further lines go down by the line height. **Vertical writing (`vertical: true`, tategaki):** characters go down a column and a new line is a new column to the LEFT; `x` is the RIGHT edge of the first column, `y` the top of a column (`align: 'center'` / `'right'` put `y` at its middle / bottom). Each piece also has `cx` / `cy` (the centre of its cell, with 、。 moved to the upper right and small kana a little up and right) and `rotation` (90 for the long vowel mark, dashes, waves, leaders and brackets, which lie turned in vertical text): put a text layer with `anchorX: 0.5, anchorY: 0.5` at `cx` / `cy` with `rotation: p.rotation`, or call `animateText(..., { vertical: true })`, which does it. Latin letters and digits stay upright, one per cell (no tate-chu-yoko), and a line is only cut at `\n` (no kinsoku). Only `by: 'chars'` has a vertical form. Whitespace takes its room but is not returned as a piece. Use one text layer per piece with the same `style` and the default top-left anchor: `{ type: 'text', text: p.text, style, initial: { x: p.x, y: p.y } }`. Kerning is kept (a piece's x is the measured width of everything before it).
 
 ### `movie.inspect(frame?, options?): Promise<InspectReport>`
 
@@ -153,7 +153,7 @@ Where every layer is drawn at `frame`, as JSON — for checking layout without e
 interface InspectReport {
   frame: number; time: number; canvas: { width: number; height: number };
   summary: { layers: number; visible: number };
-  issues: string[];              // text off the canvas / cut by an edge / empty / overlapping other text — read this first
+  issues: string[];              // text off the canvas / cut by an edge / empty / overlapping other text / partly hidden by an opaque shape or image drawn over it / struck through by a thin line drawn over it — read this first
   layers: Array<{
     path: string;                // names (or type#index) from the root, joined by '/'
     name?: string; type: string; threeD: boolean;
@@ -178,6 +178,7 @@ interface AudioReport {
     start: number; end: number;            // movie time
     peakDb: number;                        // the MIX while it plays
     sound: { length: number; peakDb: number; loudestAt: number; brightnessHz: number };   // the sound alone
+    belowMixDb?: number;                   // how far below the loudest sample of the mix (itself included) around its own loudest moment it is; short sfx more than 12 dB under get ONE note, "buried", naming the worst
   }>;
   windows: Array<{ t: number; rmsDb: number; peakDb: number; brightnessHz: number }>;
   issues: string[];                        // limited mix, inaudible layer, sfx cut off by the end, no audio — read first

package/docs/dsl.md

@@ -131,7 +131,7 @@ A text layer has one animatable number, `value`, printed wherever the text conta
 }
 ```
 
-`format`: `decimals` (default 0), thousands `grouping` (default false) and `pad` (zero-pad the whole part to that many digits: `pad: 2` gives `05`, so a clock is `text: '18:42:{value}'` with `format: { pad: 2 }`). Put prefixes and suffixes in the text (`'${value}'`, `'{value}%'`). If `value` is animated but the text has no `{value}`, a warning says so.
+`resolution` (1 to 8, default the renderer's own) draws the text at that many times the pixels: text is drawn once at its own size and then stretched by its parents, so text inside a group scaled up to 3x is soft unless it has `resolution: 3`. `format`: `decimals` (default 0), thousands `grouping` (default false) and `pad` (zero-pad the whole part to that many digits: `pad: 2` gives `05`, so a clock is `text: '18:42:{value}'` with `format: { pad: 2 }`) and `time` (print the value, in SECONDS, as a clock: `'hh:mm:ss'`, `'h:mm:ss'`, `'hh:mm'`, `'mm:ss'` or `'m:ss'`; the seconds are cut, not rounded, and the hours do not wrap, so a day clock keeps the value inside 0–86399 with `mod`: `{ value: 15000 }` with `format: { time: 'hh:mm' }` is `04:10`). Put prefixes and suffixes in the text (`'${value}'`, `'{value}%'`). If `value` is animated but the text has no `{value}`, a warning says so.
 
 **Colour inside one text layer: `spans`.** Instead of `text`, write an array of strings (drawn in the layer's own `style`) and `{ text, fill, … }` objects; they are shown one after the other, and `\n` inside a span starts a new line:
 
@@ -145,7 +145,7 @@ A span may change `fill`, `fontWeight`, `fontStyle`, `fontVariant`, `letterSpaci
 
 ### `image`
 
-Renders a [PIXI.Sprite](https://pixijs.com/8.x/guides/components/scene-objects/sprite/sprite) from a registered asset. Intrinsic `w`/`h` come from the loaded texture.
+Renders a [PIXI.Sprite](https://pixijs.com/8.x/guides/components/scene-objects/sprite/sprite) from a registered asset. Intrinsic `w`/`h` come from the loaded texture. `scaleMode: 'nearest'` draws the pixels as hard squares when the picture is scaled up (pixel art, a sprite drawn small and shown big); the default `'linear'` smooths. It belongs to the asset: every layer that shows it gets it.
 
 ```ts
 {
@@ -268,7 +268,7 @@ A tune with no audio file: notes, chords and drum patterns written as strings, p
 } }
 ```
 
-**Layer.** `at` starts it, `volume` (and volume keyframes) scale it. `duration` defaults to the music's length plus its reverb tail (`tail`, 2.5 s), but never past the end of the composition (the music then ends with the movie, with a short fade). A shorter `duration` cuts it with a fade; a longer one is silent after the music unless **`loop: true`**, which repeats the score until the layer ends (default: the end of the composition). At `volume: 1` the music peaks at −6 dBFS (about −20 dB RMS), a bed that sits under speech and sound effects (an sfx peaks at −12 dBFS). Measured: a 4-bar tune (bell + bass + kick, a pluck and a hat on the repeat) at `volume: 0.8` reads −22 LUFS and −7.7 dBTP (`piano-roll`); web video is usually −14 to −16 LUFS, so 0.8 is not a limit: raise `volume` and watch `inspectAudio().loudness.truePeakDb`. `inspectAudio()` lists a music layer as ONE source (its start); to line a picture up with a note, take its time from [`musicEvents(music)`](api.md#musicevents) (seconds from the start of the music, the tempo map applied: add the layer's `at`), or build the bars and the score from one array so they cannot drift.
+**Layer.** `at` starts it, `volume` (and volume keyframes) scale it. `duration` defaults to the music's length plus its reverb tail (`tail`, 2.5 s), but never past the end of the composition (the music then ends with the movie, with a short fade). A shorter `duration` cuts it with a fade; a longer one is silent after the music unless **`loop: true`**, which repeats the score until the layer ends (default: the end of the composition). At `volume: 1` the music peaks at −6 dBFS (about −20 dB RMS), a bed that sits under speech and sound effects (an sfx peaks at −12 dBFS). Measured: a 4-bar tune (bell + bass + kick, a pluck and a hat on the repeat) at `volume: 0.8` reads −22 LUFS and −7.7 dBTP; web video is usually −14 to −16 LUFS, so 0.8 is not a limit: raise `volume` and watch `inspectAudio().loudness.truePeakDb`. `inspectAudio()` lists a music layer as ONE source (its start); to line a picture up with a note, take its time from [`musicEvents(music)`](api.md#musicevents) (seconds from the start of the music, the tempo map applied: add the layer's `at`), or build the bars and the score from one array so they cannot drift.
 
 **Score** (`music`): `bpm` (a number, or `[beat, bpm]` points for a tempo change: `[[0, 96], [28, 96], [32, 60]]` slows down over beats 28–32, a ritardando), `tracks`, `drums`, `swing` (0–0.4: delays the off-beat eighths and sixteenths; 0.16 is a gentle lo-fi lilt), `reverb` (0–0.6, default 0.22), `humanize` (seconds of seeded timing jitter, default 0.012), `drumVol` (default 0.8), `grid` (drum steps per beat, default 4), `meter` (beats in a bar, default 4: it only names the bars in [`musicEvents()`](api.md#musicevents) and in the `check` read-back, playback does not use it), `transpose` (semitones, all pitched tracks), `tail`, `seed`. Misspelt names warn with "did you mean". The music's length is its longest track (drums repeat up to it), so a track of rests (`'_:16'`) sets a length.
 
@@ -348,7 +348,9 @@ Every primitive draws centred on its local origin (so `anchorX`/`anchorY` and `p
 | `arc`     | `radius`                                 | `innerRadius`, `startAngle` (0), `endAngle` (360) |
 | `line`    | `from: [x,y]`, `to: [x,y]` (canvas coordinates; stroke in `initial`) | `trimStart`, `trimEnd` |
 | `polygon` | `points: [[x,y], …]`                     | `open` (default false), `trimStart`, `trimEnd` |
-| `path`    | `d` (SVG path data)                      | `trimStart`, `trimEnd`, `morphTo`, `morph`, `morphPoints` |
+| `path`    | `d` (SVG path data)                      | `fillRule`, `trimStart`, `trimEnd`, `morphTo`, `morph`, `morphPoints` |
+
+**Holes (`fillRule: 'evenodd'`) on a `path`.** Several sub-paths in one `d` are each filled on their own: a donut written as two circles is a solid disc. With `fillRule: 'evenodd'` the biggest sub-path is the shape and every other one is a hole cut out of it (the stroke goes round the shape and each hole): `{ shape: 'path', fillRule: 'evenodd', d: 'M 0 -100 A 100 100 0 1 1 0 100 A 100 100 0 1 1 0 -100 Z M 0 -50 A 50 50 0 1 0 0 50 A 50 50 0 1 0 0 -50 Z', initial: { x: 640, y: 360, fillColor: '#ffcc00' } }`. Write the sub-paths in absolute coordinates (each starts with `M`); an island inside a hole is not drawn, and a path that morphs (`morphTo`) has no holes.
 
 **`arc`** is an arc around its local origin (the centre). Angles are in **degrees: 0° is 3 o'clock and positive is clockwise**, so a progress ring starts at `startAngle: -90` (12 o'clock) and animates `endAngle` from `-90` to `270`. With a stroke and no fill it is an open arc line (`strokeCap: 'round'` for rounded ends); with a fill it is a sector (a pie slice), and with `innerRadius` a ring segment (a donut slice). A sweep of 360° or more is a full circle; `endAngle < startAngle` sweeps counter-clockwise. `radius`, `innerRadius`, `startAngle` and `endAngle` are all animatable.
 
@@ -366,7 +368,7 @@ Every primitive draws centred on its local origin (so `anchorX`/`anchorY` and `p
   keyframes: [{ at: 0, to: { trimEnd: 1 }, duration: 1, ease: 'power2.inOut' }] }   // a check mark drawing itself
 ```
 
-**Morph (`morphTo` / `morph`).** A `path` can turn into another outline: give `morphTo` (SVG path data in the same canvas coordinates as `d`) and animate `morph` from 0 (the `d` outline) to 1 (the `morphTo` outline). In between it is drawn as a polygon of points half way from one to the other (`morphPoints`: 8–2048, default 128). Closed outlines are lined up (start point and direction) so they do not twist; sub-paths are paired in order, and an extra one grows from (or shrinks into) its own centre. Fill and stroke both follow, and `trimStart` / `trimEnd` walk the morphing outline. Write both outlines as `M … L … C … Z` in absolute coordinates (arcs and holes work too, but keep the same number of sub-paths on both sides).
+**Morph (`morphTo` / `morph`).** (Two outlines with the **same number of corners**, such as two quads, are paired corner to corner, so every in-between picture is a straight-edged quad and no corner is rounded; `morphPoints` only matters when the corner counts differ or the outlines are curves.) A `path` can turn into another outline: give `morphTo` (SVG path data in the same canvas coordinates as `d`) and animate `morph` from 0 (the `d` outline) to 1 (the `morphTo` outline). In between it is drawn as a polygon of points half way from one to the other (`morphPoints`: 8–2048, default 128). Closed outlines are lined up (start point and direction) so they do not twist; sub-paths are paired in order, and an extra one grows from (or shrinks into) its own centre. Fill and stroke both follow, and `trimStart` / `trimEnd` walk the morphing outline. Write both outlines as `M … L … C … Z` in absolute coordinates (arcs and holes work too, but keep the same number of sub-paths on both sides).
 
 ```ts
 { type: 'shape', shape: 'path', d: 'M 640 160 C 780 160 860 260 860 360 C 860 470 770 560 640 560 C 510 560 420 470 420 360 C 420 250 500 160 640 160 Z',