pixi-effects 0.26.3 → 0.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +8 -10
  3. package/ai/CHAT.md +1 -1
  4. package/ai/chat-template.html +4 -6
  5. package/dist/{Base-CpdDs4HT.d.ts → Base-CVezIEdo.d.ts} +2 -4
  6. package/dist/{Base-TbBhHPrG.d.cts → Base-DzC3i919.d.cts} +2 -4
  7. package/dist/Composition-4TYDRRRY.js +7 -0
  8. package/dist/{Composition-3O7L2VL5.js.map → Composition-4TYDRRRY.js.map} +1 -1
  9. package/dist/Composition-QCOWQSDB.cjs +16 -0
  10. package/dist/{Composition-EE3KEE2L.cjs.map → Composition-QCOWQSDB.cjs.map} +1 -1
  11. package/dist/Controller.d.cts +2 -3
  12. package/dist/Controller.d.ts +2 -3
  13. package/dist/{Movie-BkP82KXS.d.ts → Movie-CQ0Nz62a.d.cts} +2 -3
  14. package/dist/{Movie-BWLLWRRe.d.cts → Movie-M9dKm9dI.d.ts} +2 -3
  15. package/dist/Presenter.d.cts +2 -3
  16. package/dist/Presenter.d.ts +2 -3
  17. package/dist/{blendModes-YV43K6E7.cjs → blendModes-HDOP6R7T.cjs} +5 -5
  18. package/dist/{blendModes-YV43K6E7.cjs.map → blendModes-HDOP6R7T.cjs.map} +1 -1
  19. package/dist/{blendModes-G3NOAU3T.js → blendModes-PAVTW3BO.js} +4 -4
  20. package/dist/{blendModes-G3NOAU3T.js.map → blendModes-PAVTW3BO.js.map} +1 -1
  21. package/dist/{chunk-TLYTYBWX.js → chunk-45QKLD6M.js} +9 -11
  22. package/dist/chunk-45QKLD6M.js.map +1 -0
  23. package/dist/{chunk-WMMZDPWK.js → chunk-CKTS6G6I.js} +7 -11
  24. package/dist/chunk-CKTS6G6I.js.map +1 -0
  25. package/dist/{chunk-IIDBEYQH.cjs → chunk-NDR2VQFV.cjs} +91 -95
  26. package/dist/chunk-NDR2VQFV.cjs.map +1 -0
  27. package/dist/{chunk-3DLYAPK7.cjs → chunk-P4GY3Z4G.cjs} +5 -5
  28. package/dist/{chunk-3DLYAPK7.cjs.map → chunk-P4GY3Z4G.cjs.map} +1 -1
  29. package/dist/{chunk-A225HYSY.cjs → chunk-RQMI7EJT.cjs} +968 -256
  30. package/dist/chunk-RQMI7EJT.cjs.map +1 -0
  31. package/dist/{chunk-FXAHNPBP.js → chunk-TGJACVLD.js} +948 -239
  32. package/dist/chunk-TGJACVLD.js.map +1 -0
  33. package/dist/{chunk-AXZUKNXF.js → chunk-TYWFKCPY.js} +4 -4
  34. package/dist/{chunk-AXZUKNXF.js.map → chunk-TYWFKCPY.js.map} +1 -1
  35. package/dist/{chunk-ECA2WNRX.cjs → chunk-ZMAD3KJU.cjs} +9 -11
  36. package/dist/chunk-ZMAD3KJU.cjs.map +1 -0
  37. package/dist/index.cjs +74 -95
  38. package/dist/index.cjs.map +1 -1
  39. package/dist/index.d.cts +16 -14
  40. package/dist/index.d.ts +16 -14
  41. package/dist/index.js +20 -23
  42. package/dist/index.js.map +1 -1
  43. package/dist/loader.css +1 -1
  44. package/dist/three.cjs +6 -6
  45. package/dist/three.d.cts +2 -3
  46. package/dist/three.d.ts +2 -3
  47. package/dist/three.js +2 -2
  48. package/dist/{types-DSGwN5w1.d.cts → types-DUVefWiB.d.cts} +128 -3
  49. package/dist/{types-DSGwN5w1.d.ts → types-DUVefWiB.d.ts} +128 -3
  50. package/docs/api.md +5 -1
  51. package/docs/dsl.md +13 -15
  52. package/llms-full.txt +24 -22
  53. package/llms.txt +1 -1
  54. package/package.json +3 -4
  55. package/skills/pixi-effects/SKILL.md +1 -1
  56. package/skills/pixi-effects/reference/cheatsheet.md +1 -1
  57. package/skills/pixi-effects/reference/pitfalls.md +3 -3
  58. package/skills/pixi-effects/reference/recipes.md +1 -1
  59. package/skills/pixi-effects/template.html +6 -8
  60. package/dist/Composition-3O7L2VL5.js +0 -7
  61. package/dist/Composition-EE3KEE2L.cjs +0 -16
  62. package/dist/chunk-A225HYSY.cjs.map +0 -1
  63. package/dist/chunk-ECA2WNRX.cjs.map +0 -1
  64. package/dist/chunk-FXAHNPBP.js.map +0 -1
  65. package/dist/chunk-IIDBEYQH.cjs.map +0 -1
  66. package/dist/chunk-TLYTYBWX.js.map +0 -1
  67. package/dist/chunk-WMMZDPWK.js.map +0 -1
package/dist/loader.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  * pixi-effects loader: one line of HTML on the page, a few lines of CSS, no JavaScript of your own.
3
3
  *
4
- * <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixi-effects@0.26.3/dist/loader.css">
4
+ * <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixi-effects@0.27.0/dist/loader.css">
5
5
  * <div class="stage" style="position: relative"> <!-- any box the canvas sits in, with position: relative -->
6
6
  * <canvas id="stage" width="1280" height="720"></canvas>
7
7
  * <div class="pe-loader" data-label="LOADING"></div> <!-- or class="pe-loader pe-loader--bar" -->
package/dist/three.cjs CHANGED
@@ -1,12 +1,12 @@
1
1
  'use strict';
2
2
 
3
- var chunkA225HYSY_cjs = require('./chunk-A225HYSY.cjs');
4
- require('./chunk-ECA2WNRX.cjs');
3
+ var chunkRQMI7EJT_cjs = require('./chunk-RQMI7EJT.cjs');
4
+ require('./chunk-ZMAD3KJU.cjs');
5
5
  require('./chunk-TWZNOUM7.cjs');
6
6
  var pixi_js = require('pixi.js');
7
7
  var three$1 = require('three');
8
8
 
9
- var ThreeSequence = class extends chunkA225HYSY_cjs.Sequence {
9
+ var ThreeSequence = class extends chunkRQMI7EJT_cjs.Sequence {
10
10
  _renderer = null;
11
11
  _scene = null;
12
12
  _camera = null;
@@ -25,7 +25,7 @@ var ThreeSequence = class extends chunkA225HYSY_cjs.Sequence {
25
25
  if (this.duration === void 0) {
26
26
  this.duration = this.parent?.duration ?? this.root.duration;
27
27
  }
28
- const scope = chunkA225HYSY_cjs.buildScope(this, this.parent, this.root);
28
+ const scope = chunkRQMI7EJT_cjs.buildScope(this, this.parent, this.root);
29
29
  const width = resolveDim(spec.width, scope) ?? this.parent?.width ?? this.root.width;
30
30
  const height = resolveDim(spec.height, scope) ?? this.parent?.height ?? this.root.height;
31
31
  const resolution = spec.resolution ?? 1;
@@ -145,12 +145,12 @@ var ThreeSequence = class extends chunkA225HYSY_cjs.Sequence {
145
145
  function resolveDim(v, scope) {
146
146
  if (v === void 0) return void 0;
147
147
  if (typeof v === "number") return v;
148
- return chunkA225HYSY_cjs.evaluateExpr(v, scope);
148
+ return chunkRQMI7EJT_cjs.evaluateExpr(v, scope);
149
149
  }
150
150
 
151
151
  // src/three/index.ts
152
152
  function registerThree() {
153
- chunkA225HYSY_cjs.registerSequenceType("three", ThreeSequence);
153
+ chunkRQMI7EJT_cjs.registerSequenceType("three", ThreeSequence);
154
154
  }
155
155
  function three(spec) {
156
156
  return spec;
package/dist/three.d.cts CHANGED
@@ -1,8 +1,7 @@
1
- import { d as SequenceCommon, O as PropValue, S as SequenceSpec } from './types-DSGwN5w1.cjs';
1
+ import { d as SequenceCommon, O as PropValue, S as SequenceSpec } from './types-DUVefWiB.cjs';
2
2
  import { Scene, Camera, WebGLRenderer } from 'three';
3
- import { S as Sequence, P as PathRouters } from './Base-TbBhHPrG.cjs';
3
+ import { S as Sequence, P as PathRouters } from './Base-DzC3i919.cjs';
4
4
  import 'pixi.js';
5
- import 'gsap';
6
5
 
7
6
  /** Handed to setup / update / dispose. One per three sequence. */
8
7
  interface ThreeContext {
package/dist/three.d.ts CHANGED
@@ -1,8 +1,7 @@
1
- import { d as SequenceCommon, O as PropValue, S as SequenceSpec } from './types-DSGwN5w1.js';
1
+ import { d as SequenceCommon, O as PropValue, S as SequenceSpec } from './types-DUVefWiB.js';
2
2
  import { Scene, Camera, WebGLRenderer } from 'three';
3
- import { S as Sequence, P as PathRouters } from './Base-CpdDs4HT.js';
3
+ import { S as Sequence, P as PathRouters } from './Base-CVezIEdo.js';
4
4
  import 'pixi.js';
5
- import 'gsap';
6
5
 
7
6
  /** Handed to setup / update / dispose. One per three sequence. */
8
7
  interface ThreeContext {
package/dist/three.js CHANGED
@@ -1,5 +1,5 @@
1
- import { Sequence, buildScope, evaluateExpr, registerSequenceType } from './chunk-FXAHNPBP.js';
2
- import './chunk-TLYTYBWX.js';
1
+ import { Sequence, buildScope, evaluateExpr, registerSequenceType } from './chunk-TGJACVLD.js';
2
+ import './chunk-45QKLD6M.js';
3
3
  import './chunk-BXOCEZ4U.js';
4
4
  import { Texture, Sprite } from 'pixi.js';
5
5
  import { WebGLRenderer, Scene, PerspectiveCamera } from 'three';
@@ -1,3 +1,128 @@
1
+ type EaseFn = (p: number) => number;
2
+
3
+ /**
4
+ * A timeline that is a pure function of time (spike: see docs/superpowers/specs/2026-10-10-pure-timeline-design.md).
5
+ *
6
+ * For every (target, property) it keeps the segments that write it, ordered by start time. The value at `t`
7
+ * is the value of the last segment that has started, computed from `t` alone; nothing is remembered between
8
+ * two calls except the start values captured when the segment was built. GSAP is the oracle: the rules below
9
+ * were taken from black-box probes of `gsap.timeline` and are checked against it by tests/core/pure/timelineParity.test.ts.
10
+ */
11
+ interface PureVars {
12
+ duration?: number;
13
+ ease?: string | EaseFn;
14
+ repeat?: number;
15
+ yoyo?: boolean;
16
+ repeatDelay?: number;
17
+ onUpdate?: () => void;
18
+ /** The Pixi plugin's shorthands: `scale`, `anchor`, `rotation` (degrees), `tint`, `autoAlpha` ... */
19
+ pixi?: Record<string, unknown>;
20
+ [prop: string]: unknown;
21
+ }
22
+ /** One thing a timeline writes: see `segments()`. */
23
+ interface SegmentInfo {
24
+ target: object;
25
+ /** The property (`'alpha'`, `'scale.x'`, `'fill'`). */
26
+ id: string;
27
+ start: number;
28
+ duration: number;
29
+ repeat: number;
30
+ yoyo: boolean;
31
+ repeatDelay: number;
32
+ kind: 'set' | 'to' | 'from' | 'fromTo';
33
+ }
34
+ /** A marker that only lengthens a timeline (what `gsap.to({}, { duration })` is used for). */
35
+ interface Spacer {
36
+ readonly spacer: true;
37
+ readonly duration: number;
38
+ }
39
+ declare class PureTimeline {
40
+ private readonly defaultEase;
41
+ private readonly channels;
42
+ private readonly channelList;
43
+ private readonly children;
44
+ private spans;
45
+ private now;
46
+ private order;
47
+ private killed;
48
+ private prepared;
49
+ constructor(opts?: {
50
+ paused?: boolean;
51
+ defaults?: {
52
+ ease?: string | EaseFn;
53
+ };
54
+ });
55
+ /** Adds a child timeline (played with its local time) or a spacer that lengthens this one. */
56
+ add(child: PureTimeline | Spacer, at?: number): this;
57
+ set(target: object, vars: PureVars, at?: number): this;
58
+ to(target: object, vars: PureVars, at?: number): this;
59
+ from(target: object, vars: PureVars, at?: number): this;
60
+ fromTo(target: object, fromVars: PureVars, toVars: PureVars, at?: number): this;
61
+ private build;
62
+ private channel;
63
+ /**
64
+ * A property moved by a function of the caller (a colour in OKLab, a gradient): `to` and `from` say how to get the two ends from
65
+ * the value before the segment, `make` the interpolator between them. The value is only written while the segment is the last
66
+ * one that has started, so nothing is read or kept between two frames.
67
+ */
68
+ tweenValue<T>(spec: {
69
+ holder: object;
70
+ id: string;
71
+ get(): T;
72
+ set(v: T): void;
73
+ from?: (prev: T) => T;
74
+ to: (start: T, prev: T, base: T) => T;
75
+ make: (a: T, b: T) => (p: number) => T;
76
+ duration: number;
77
+ ease: string | EaseFn;
78
+ at: number;
79
+ repeat?: number;
80
+ yoyo?: boolean;
81
+ repeatDelay?: number;
82
+ }): this;
83
+ /**
84
+ * A write that is undone when time goes back before it: the property is `value` from `at` on, and what it was before otherwise.
85
+ * `holder` and `id` name the property, so a set and the tweens of the same property are one channel; `write` is the way the caller
86
+ * writes it (it may do more than assign: redraw), and runs again whenever this set is what the property shows.
87
+ */
88
+ setValue<T>(holder: object, id: string, at: number, read: () => T, write: (v: T) => void, value: T): this;
89
+ /** What the timeline will write, for tools and tests: every segment of this timeline and of the ones under it, starts in this timeline's time. */
90
+ segments(offset?: number): SegmentInfo[];
91
+ /** How many timelines are directly under this one. */
92
+ timelines(): number;
93
+ duration(): number;
94
+ time(): number;
95
+ time(value: number): this;
96
+ /** GSAP's name for `time(t)`. */
97
+ seek(t: number): this;
98
+ progress(): number;
99
+ progress(p: number): this;
100
+ kill(): void;
101
+ /**
102
+ * What GSAP ended up with once it had been played to the end and back (what Movie used to do at build), as rules that depend
103
+ * on the segments of a property only:
104
+ * - a `from` / `fromTo` shows its start from the moment it is built, so a `to` that comes first starts at the start of the
105
+ * `from` built last, else at the property's own value;
106
+ * - a `to` (and a `set`) starts where the segment before it ended;
107
+ * - a `from` ends where the segment before it ended, or, with none before, where the property was when it was built;
108
+ * - before the first segment the property shows that segment's start.
109
+ */
110
+ private prepare;
111
+ /** Every channel of this timeline and of its children reads the property it starts from before any of them writes. */
112
+ private prepareDeep;
113
+ /** How many channels write each (target, property) in this timeline and everything under it. */
114
+ private countChannels;
115
+ private isExclusive;
116
+ private markExclusive;
117
+ private evaluate;
118
+ }
119
+
120
+ /**
121
+ * The timeline of the library and the few things around it: a timeline is a pure function of time (a value at a time is computed from the
122
+ * script and the time alone, never from the way the playhead came), see docs/superpowers/specs/2026-10-10-pure-timeline-design.md.
123
+ */
124
+ type Timeline = PureTimeline;
125
+
1
126
  /** What an author writes in `composition.stops`: a time in seconds, or an object. */
2
127
  interface StopSpec {
3
128
  /** Where playback stops, in seconds (negative counts back from the end). */
@@ -146,7 +271,7 @@ interface TransitionCommon {
146
271
  at: number;
147
272
  /** Length of the transition in seconds. Must be > 0. */
148
273
  duration: number;
149
- /** GSAP easing name. Default `'none'` (linear). */
274
+ /** Ease name (`'power2.out'`, `'back.out(1.7)'`, `'spring.bouncy'`, `'cubic-bezier(.4,0,.2,1)'`, `'steps(8)'`). Default `'none'` (linear). */
150
275
  ease?: string;
151
276
  }
152
277
  interface CrossfadeTransition extends TransitionCommon {
@@ -591,7 +716,7 @@ interface ShapeBase extends SequenceCommon {
591
716
  /**
592
717
  * Colour space used to interpolate `fillColor` / `strokeColor` keyframes.
593
718
  *
594
- * - `'rgb'` (default): linear RGB tween via `gsap.utils.interpolate`.
719
+ * - `'rgb'` (default): a straight lerp of the red, green and blue channels.
595
720
  * Fast, but a red → green ramp passes through muddy brown / olive
596
721
  * greys at the midpoint because intermediate sRGB values are
597
722
  * perceptually unbalanced.
@@ -743,4 +868,4 @@ interface AudioDescriptor {
743
868
  sourceMap?: (u: number) => number;
744
869
  }
745
870
 
746
- export { type StopSpec as $, type ArcShapeSpec as A, type BlendModeName as B, type CompositionShape as C, type DipTransition as D, type EllipseShapeSpec as E, type FilterSpec as F, type GradientSpec as G, type PathShapeSpec as H, type ImageSequenceSpec as I, type PolygonShapeSpec as J, type Keyframe as K, type LightSequenceSpec as L, type MusicOptions as M, type NullSequenceSpec as N, type PropValue as O, type Props as P, type SfxKnobs as Q, type RectShapeSpec as R, type SequenceSpec as S, type TextSequenceSpec as T, type SfxOptions as U, type SfxPreset as V, type SfxVoice as W, type ShaderSequenceSpec as X, type ShapeSequenceSpec as Y, type SlideTransition as Z, type Stop as _, type CameraSequenceSpec as a, type TransitionCommon as a0, type VideoSequenceSpec as a1, type WipeTransition as a2, type ZoomTransition as a3, normalizeStops as a4, pictureStops as a5, type AudioDescriptor as a6, type TransitionSpec as b, type CompositionSpec as c, type SequenceCommon as d, type AssetSpec as e, type AudioAssetSpec as f, type AudioMusicSpec as g, type AudioSequenceSpec as h, type AudioSfxSpec as i, type ChromaKeyFilterSpec as j, type CircleShapeSpec as k, type CompositionSequenceSpec as l, type CrossfadeTransition as m, type CustomFilterSpec as n, type DissolveTransition as o, type Expr as p, type IrisTransition as q, type LineShapeSpec as r, type LumaTransition as s, type MaskRefSpec as t, type MatteRefSpec as u, type MusicDrum as v, type MusicDrums as w, type MusicInstrument as x, type MusicLevel as y, type MusicTrack as z };
871
+ export { type StopSpec as $, type ArcShapeSpec as A, type BlendModeName as B, type CompositionShape as C, type DipTransition as D, type EllipseShapeSpec as E, type FilterSpec as F, type GradientSpec as G, type PathShapeSpec as H, type ImageSequenceSpec as I, type PolygonShapeSpec as J, type Keyframe as K, type LightSequenceSpec as L, type MusicOptions as M, type NullSequenceSpec as N, type PropValue as O, type Props as P, type SfxKnobs as Q, type RectShapeSpec as R, type SequenceSpec as S, type TextSequenceSpec as T, type SfxOptions as U, type SfxPreset as V, type SfxVoice as W, type ShaderSequenceSpec as X, type ShapeSequenceSpec as Y, type SlideTransition as Z, type Stop as _, type CameraSequenceSpec as a, type TransitionCommon as a0, type VideoSequenceSpec as a1, type WipeTransition as a2, type ZoomTransition as a3, normalizeStops as a4, pictureStops as a5, type Timeline as a6, type AudioDescriptor as a7, type TransitionSpec as b, type CompositionSpec as c, type SequenceCommon as d, type AssetSpec as e, type AudioAssetSpec as f, type AudioMusicSpec as g, type AudioSequenceSpec as h, type AudioSfxSpec as i, type ChromaKeyFilterSpec as j, type CircleShapeSpec as k, type CompositionSequenceSpec as l, type CrossfadeTransition as m, type CustomFilterSpec as n, type DissolveTransition as o, type Expr as p, type IrisTransition as q, type LineShapeSpec as r, type LumaTransition as s, type MaskRefSpec as t, type MatteRefSpec as u, type MusicDrum as v, type MusicDrums as w, type MusicInstrument as x, type MusicLevel as y, type MusicTrack as z };
@@ -1,3 +1,128 @@
1
+ type EaseFn = (p: number) => number;
2
+
3
+ /**
4
+ * A timeline that is a pure function of time (spike: see docs/superpowers/specs/2026-10-10-pure-timeline-design.md).
5
+ *
6
+ * For every (target, property) it keeps the segments that write it, ordered by start time. The value at `t`
7
+ * is the value of the last segment that has started, computed from `t` alone; nothing is remembered between
8
+ * two calls except the start values captured when the segment was built. GSAP is the oracle: the rules below
9
+ * were taken from black-box probes of `gsap.timeline` and are checked against it by tests/core/pure/timelineParity.test.ts.
10
+ */
11
+ interface PureVars {
12
+ duration?: number;
13
+ ease?: string | EaseFn;
14
+ repeat?: number;
15
+ yoyo?: boolean;
16
+ repeatDelay?: number;
17
+ onUpdate?: () => void;
18
+ /** The Pixi plugin's shorthands: `scale`, `anchor`, `rotation` (degrees), `tint`, `autoAlpha` ... */
19
+ pixi?: Record<string, unknown>;
20
+ [prop: string]: unknown;
21
+ }
22
+ /** One thing a timeline writes: see `segments()`. */
23
+ interface SegmentInfo {
24
+ target: object;
25
+ /** The property (`'alpha'`, `'scale.x'`, `'fill'`). */
26
+ id: string;
27
+ start: number;
28
+ duration: number;
29
+ repeat: number;
30
+ yoyo: boolean;
31
+ repeatDelay: number;
32
+ kind: 'set' | 'to' | 'from' | 'fromTo';
33
+ }
34
+ /** A marker that only lengthens a timeline (what `gsap.to({}, { duration })` is used for). */
35
+ interface Spacer {
36
+ readonly spacer: true;
37
+ readonly duration: number;
38
+ }
39
+ declare class PureTimeline {
40
+ private readonly defaultEase;
41
+ private readonly channels;
42
+ private readonly channelList;
43
+ private readonly children;
44
+ private spans;
45
+ private now;
46
+ private order;
47
+ private killed;
48
+ private prepared;
49
+ constructor(opts?: {
50
+ paused?: boolean;
51
+ defaults?: {
52
+ ease?: string | EaseFn;
53
+ };
54
+ });
55
+ /** Adds a child timeline (played with its local time) or a spacer that lengthens this one. */
56
+ add(child: PureTimeline | Spacer, at?: number): this;
57
+ set(target: object, vars: PureVars, at?: number): this;
58
+ to(target: object, vars: PureVars, at?: number): this;
59
+ from(target: object, vars: PureVars, at?: number): this;
60
+ fromTo(target: object, fromVars: PureVars, toVars: PureVars, at?: number): this;
61
+ private build;
62
+ private channel;
63
+ /**
64
+ * A property moved by a function of the caller (a colour in OKLab, a gradient): `to` and `from` say how to get the two ends from
65
+ * the value before the segment, `make` the interpolator between them. The value is only written while the segment is the last
66
+ * one that has started, so nothing is read or kept between two frames.
67
+ */
68
+ tweenValue<T>(spec: {
69
+ holder: object;
70
+ id: string;
71
+ get(): T;
72
+ set(v: T): void;
73
+ from?: (prev: T) => T;
74
+ to: (start: T, prev: T, base: T) => T;
75
+ make: (a: T, b: T) => (p: number) => T;
76
+ duration: number;
77
+ ease: string | EaseFn;
78
+ at: number;
79
+ repeat?: number;
80
+ yoyo?: boolean;
81
+ repeatDelay?: number;
82
+ }): this;
83
+ /**
84
+ * A write that is undone when time goes back before it: the property is `value` from `at` on, and what it was before otherwise.
85
+ * `holder` and `id` name the property, so a set and the tweens of the same property are one channel; `write` is the way the caller
86
+ * writes it (it may do more than assign: redraw), and runs again whenever this set is what the property shows.
87
+ */
88
+ setValue<T>(holder: object, id: string, at: number, read: () => T, write: (v: T) => void, value: T): this;
89
+ /** What the timeline will write, for tools and tests: every segment of this timeline and of the ones under it, starts in this timeline's time. */
90
+ segments(offset?: number): SegmentInfo[];
91
+ /** How many timelines are directly under this one. */
92
+ timelines(): number;
93
+ duration(): number;
94
+ time(): number;
95
+ time(value: number): this;
96
+ /** GSAP's name for `time(t)`. */
97
+ seek(t: number): this;
98
+ progress(): number;
99
+ progress(p: number): this;
100
+ kill(): void;
101
+ /**
102
+ * What GSAP ended up with once it had been played to the end and back (what Movie used to do at build), as rules that depend
103
+ * on the segments of a property only:
104
+ * - a `from` / `fromTo` shows its start from the moment it is built, so a `to` that comes first starts at the start of the
105
+ * `from` built last, else at the property's own value;
106
+ * - a `to` (and a `set`) starts where the segment before it ended;
107
+ * - a `from` ends where the segment before it ended, or, with none before, where the property was when it was built;
108
+ * - before the first segment the property shows that segment's start.
109
+ */
110
+ private prepare;
111
+ /** Every channel of this timeline and of its children reads the property it starts from before any of them writes. */
112
+ private prepareDeep;
113
+ /** How many channels write each (target, property) in this timeline and everything under it. */
114
+ private countChannels;
115
+ private isExclusive;
116
+ private markExclusive;
117
+ private evaluate;
118
+ }
119
+
120
+ /**
121
+ * The timeline of the library and the few things around it: a timeline is a pure function of time (a value at a time is computed from the
122
+ * script and the time alone, never from the way the playhead came), see docs/superpowers/specs/2026-10-10-pure-timeline-design.md.
123
+ */
124
+ type Timeline = PureTimeline;
125
+
1
126
  /** What an author writes in `composition.stops`: a time in seconds, or an object. */
2
127
  interface StopSpec {
3
128
  /** Where playback stops, in seconds (negative counts back from the end). */
@@ -146,7 +271,7 @@ interface TransitionCommon {
146
271
  at: number;
147
272
  /** Length of the transition in seconds. Must be > 0. */
148
273
  duration: number;
149
- /** GSAP easing name. Default `'none'` (linear). */
274
+ /** Ease name (`'power2.out'`, `'back.out(1.7)'`, `'spring.bouncy'`, `'cubic-bezier(.4,0,.2,1)'`, `'steps(8)'`). Default `'none'` (linear). */
150
275
  ease?: string;
151
276
  }
152
277
  interface CrossfadeTransition extends TransitionCommon {
@@ -591,7 +716,7 @@ interface ShapeBase extends SequenceCommon {
591
716
  /**
592
717
  * Colour space used to interpolate `fillColor` / `strokeColor` keyframes.
593
718
  *
594
- * - `'rgb'` (default): linear RGB tween via `gsap.utils.interpolate`.
719
+ * - `'rgb'` (default): a straight lerp of the red, green and blue channels.
595
720
  * Fast, but a red → green ramp passes through muddy brown / olive
596
721
  * greys at the midpoint because intermediate sRGB values are
597
722
  * perceptually unbalanced.
@@ -743,4 +868,4 @@ interface AudioDescriptor {
743
868
  sourceMap?: (u: number) => number;
744
869
  }
745
870
 
746
- export { type StopSpec as $, type ArcShapeSpec as A, type BlendModeName as B, type CompositionShape as C, type DipTransition as D, type EllipseShapeSpec as E, type FilterSpec as F, type GradientSpec as G, type PathShapeSpec as H, type ImageSequenceSpec as I, type PolygonShapeSpec as J, type Keyframe as K, type LightSequenceSpec as L, type MusicOptions as M, type NullSequenceSpec as N, type PropValue as O, type Props as P, type SfxKnobs as Q, type RectShapeSpec as R, type SequenceSpec as S, type TextSequenceSpec as T, type SfxOptions as U, type SfxPreset as V, type SfxVoice as W, type ShaderSequenceSpec as X, type ShapeSequenceSpec as Y, type SlideTransition as Z, type Stop as _, type CameraSequenceSpec as a, type TransitionCommon as a0, type VideoSequenceSpec as a1, type WipeTransition as a2, type ZoomTransition as a3, normalizeStops as a4, pictureStops as a5, type AudioDescriptor as a6, type TransitionSpec as b, type CompositionSpec as c, type SequenceCommon as d, type AssetSpec as e, type AudioAssetSpec as f, type AudioMusicSpec as g, type AudioSequenceSpec as h, type AudioSfxSpec as i, type ChromaKeyFilterSpec as j, type CircleShapeSpec as k, type CompositionSequenceSpec as l, type CrossfadeTransition as m, type CustomFilterSpec as n, type DissolveTransition as o, type Expr as p, type IrisTransition as q, type LineShapeSpec as r, type LumaTransition as s, type MaskRefSpec as t, type MatteRefSpec as u, type MusicDrum as v, type MusicDrums as w, type MusicInstrument as x, type MusicLevel as y, type MusicTrack as z };
871
+ export { type StopSpec as $, type ArcShapeSpec as A, type BlendModeName as B, type CompositionShape as C, type DipTransition as D, type EllipseShapeSpec as E, type FilterSpec as F, type GradientSpec as G, type PathShapeSpec as H, type ImageSequenceSpec as I, type PolygonShapeSpec as J, type Keyframe as K, type LightSequenceSpec as L, type MusicOptions as M, type NullSequenceSpec as N, type PropValue as O, type Props as P, type SfxKnobs as Q, type RectShapeSpec as R, type SequenceSpec as S, type TextSequenceSpec as T, type SfxOptions as U, type SfxPreset as V, type SfxVoice as W, type ShaderSequenceSpec as X, type ShapeSequenceSpec as Y, type SlideTransition as Z, type Stop as _, type CameraSequenceSpec as a, type TransitionCommon as a0, type VideoSequenceSpec as a1, type WipeTransition as a2, type ZoomTransition as a3, normalizeStops as a4, pictureStops as a5, type Timeline as a6, type AudioDescriptor as a7, type TransitionSpec as b, type CompositionSpec as c, type SequenceCommon as d, type AssetSpec as e, type AudioAssetSpec as f, type AudioMusicSpec as g, type AudioSequenceSpec as h, type AudioSfxSpec as i, type ChromaKeyFilterSpec as j, type CircleShapeSpec as k, type CompositionSequenceSpec as l, type CrossfadeTransition as m, type CustomFilterSpec as n, type DissolveTransition as o, type Expr as p, type IrisTransition as q, type LineShapeSpec as r, type LumaTransition as s, type MaskRefSpec as t, type MatteRefSpec as u, type MusicDrum as v, type MusicDrums as w, type MusicInstrument as x, type MusicLevel as y, type MusicTrack as z };
package/docs/api.md CHANGED
@@ -211,6 +211,10 @@ The whole movie as rows on a time axis, for a person to read at a glance. `timel
211
211
 
212
212
  `movie.timelineSvg()` is the chart alone (one `<svg>`, geometry in `data-*` attributes, each row `<g class="row" data-start>`): `pixi-effects-view` puts a playhead on it and turns a click into a seek.
213
213
 
214
+ ### `ease(name): (p: number) => number`
215
+
216
+ The function behind an ease name (`ease('power2.out')(0.5)`, `ease('spring.bouncy')`, `ease('cubic-bezier(.4, 0, .2, 1)')`), for a preset or a check of your own. A name nobody knows warns once and runs as `power1.out`.
217
+
214
218
  ### `movie.destroy(): Promise<void>`
215
219
 
216
220
  Pauses playback, destroys the underlying PIXI Application, releases audio buffers and AudioContext, and marks the instance unusable.
@@ -254,7 +258,7 @@ The names are the ones an HTML5 `<video>` uses, so a player written for `<video>
254
258
  | `volume` | number | 0..1 getter/setter; immediate. Setter clamps and applies to active audio |
255
259
  | `muted` | boolean | getter/setter; immediate |
256
260
  | `app` | `pixi.js Application \| null` | PIXI Application instance (advanced/escape hatch) |
257
- | `timeline` | GSAP Timeline `\| null` | underlying GSAP timeline (advanced) |
261
+ | `timeline` | `Timeline \| null` | the movie's timeline (advanced): `time(t)`, `duration()`, `segments()` |
258
262
  | `stops` | `Stop[]` | the composition's stops (see Presentations); empty for an ordinary movie |
259
263
  | `stopIndex`, `pageIndex`, `pageCount`, `currentStop` | number, number, number, `Stop \| null` | where the playhead is among the stops and pages (`-1` / `null` before the first stop) |
260
264
 
package/docs/dsl.md CHANGED
@@ -401,7 +401,7 @@ Fill a shape with a gradient instead of `fillColor` (top level or in `initial`).
401
401
 
402
402
  #### `colorSpace`
403
403
 
404
- Per-shape choice of how colour keyframes are interpolated. Default `'rgb'` (linear sRGB lerp via `gsap.utils.interpolate`) is fast but classic — a red → green ramp passes through muddy olive at the midpoint. The two perceptually uniform options keep saturation through the transition:
404
+ Per-shape choice of how colour keyframes are interpolated. Default `'rgb'` (a straight lerp of the red, green and blue channels) is fast but classic — a red → green ramp passes through muddy olive at the midpoint. The two perceptually uniform options keep saturation through the transition:
405
405
 
406
406
  | Value | Behaviour |
407
407
  |-----------|---------------------------------------------------------------------------------------------------|
@@ -924,7 +924,7 @@ Supported formats are whatever PixiJS Assets and the browser's audio/video decod
924
924
  interface Keyframe {
925
925
  at?: number; // start, in seconds from the start of THIS sequence; negative = back from the sequence's end (-0.5 = 0.5 s before it ends)
926
926
  duration?: number | 'auto'; // seconds (default 0 — instantaneous); 'auto' = the time a spring ease takes to settle
927
- ease?: string; // GSAP easing name (default 'none'), or a spring: 'spring(mass, stiffness, damping)', 'spring.gentle|snappy|bouncy|wobbly|slow'
927
+ ease?: string; // Ease name (default 'none'), or a spring: 'spring(mass, stiffness, damping)', 'spring.gentle|snappy|bouncy|wobbly|slow'
928
928
  set?: Props; // jump to these values at `at`
929
929
  to?: Props; // animate from current to these values over `duration`
930
930
  from?: Props; // animate from these values to current
@@ -932,7 +932,7 @@ interface Keyframe {
932
932
  }
933
933
  ```
934
934
 
935
- **Relative values.** A number in `to`, `from` or `set` may be written `'+=36'` or `'-=36'`: it is measured from where the property stands when the keyframe starts (GSAP's own relative values), and the right side is an expression (`'-=GW*0.1'`). `from: { x: '-=36' }` starts 36 px to the left of where the layer is and arrives there (the usual slide-in); `to: { y: '+=40' }` moves 40 px further. Several keyframes one after another stack, whatever order you seek in; with `repeat` the same move plays again from the same start (it does not stack). A relative value in `initial`, a style, or the start side of a `from` + `to` keyframe has nothing to be measured from: it warns and is read as the number.
935
+ **Relative values.** A number in `to`, `from` or `set` may be written `'+=36'` or `'-=36'`: it is measured from where the property stands when the keyframe starts (the way GSAP writes them), and the right side is an expression (`'-=GW*0.1'`). `from: { x: '-=36' }` starts 36 px to the left of where the layer is and arrives there (the usual slide-in); `to: { y: '+=40' }` moves 40 px further. Several keyframes one after another stack, whatever order you seek in; with `repeat` the same move plays again from the same start (it does not stack). A relative value in `initial`, a style, or the start side of a `from` + `to` keyframe has nothing to be measured from: it warns and is read as the number.
936
936
 
937
937
  The four kinds are mutually exclusive per keyframe:
938
938
 
@@ -996,13 +996,13 @@ If `at < 0`, it's interpreted as `duration + at` — measured back from the end
996
996
 
997
997
  ### Easing
998
998
 
999
- `'cubic-bezier(x1, y1, x2, y2)'` is the CSS curve exactly (x1 and x2 between 0 and 1, y1 and y2 may overshoot): `'cubic-bezier(.4, 0, .2, 1)'` is a gentle in-out, `'cubic-bezier(.2, .8, .2, 1)'` is front-loaded, not slow motion (half of the change in the first 13 % of the time, 99 % by 74 %, then a long settle). GSAP's `power2` is a cubic: `power2.in` has done only 12.5 % at half time. A malformed one warns once and runs as `'none'`.
999
+ `'cubic-bezier(x1, y1, x2, y2)'` is the CSS curve exactly (x1 and x2 between 0 and 1, y1 and y2 may overshoot): `'cubic-bezier(.4, 0, .2, 1)'` is a gentle in-out, `'cubic-bezier(.2, .8, .2, 1)'` is front-loaded, not slow motion (half of the change in the first 13 % of the time, 99 % by 74 %, then a long settle). `power2` is a cubic: `power2.in` has done only 12.5 % at half time. A malformed one warns once and runs as `'none'`.
1000
1000
 
1001
- Standard GSAP easing strings: `'none'`, `'linear'`, `'power1.in'` ... `'power4.inOut'`, `'sine.in/out/inOut'`, `'expo.in/out/inOut'`, `'circ.in/out/inOut'`, `'back.in/out/inOut(overshoot)'`, `'elastic.in/out/inOut(amplitude, period)'`, `'bounce.in/out/inOut'`. See [GSAP easing docs](https://gsap.com/docs/v3/Eases/).
1001
+ Ease strings (the names GSAP made familiar): `'none'`, `'linear'`, `'power1.in'` ... `'power4.inOut'`, `'sine.in/out/inOut'`, `'expo.in/out/inOut'`, `'circ.in/out/inOut'`, `'back.in/out/inOut(overshoot)'`, `'elastic.in/out/inOut(amplitude, period)'`, `'bounce.in/out/inOut'`. `'steps(n)'` is n equal steps.
1002
1002
 
1003
1003
  ### PIXI shorthands
1004
1004
 
1005
- These keys are auto-routed through GSAP's PixiPlugin when used in `initial` / `set` / `to` / `from` / `keyframes`:
1005
+ These keys are shorthands the timeline understands when used in `initial` / `set` / `to` / `from` / `keyframes`:
1006
1006
 
1007
1007
  ```
1008
1008
  scale, scaleX, scaleY
@@ -1013,12 +1013,10 @@ position, positionX, positionY
1013
1013
  tilePosition, tilePositionX, tilePositionY
1014
1014
  tileScale, tileScaleX, tileScaleY
1015
1015
  tint, autoAlpha
1016
- colorize, colorizeAmount, colorMatrixFilter
1017
- blur, blurX, blurY, blurPadding
1018
- lineColor, lineAlpha, fillColor, fillAlpha
1016
+ fillColor, fillAlpha (a shape's own colour keys)
1019
1017
  ```
1020
1018
 
1021
- (In addition to plain DisplayObject props like `x`, `y`, `rotation`, `alpha`, `width`, `height`, `visible`.) **Angles are in degrees**: `rotation`, `skew` / `skewX` / `skewY` (PixiPlugin converts them), and `rotationX` / `rotationY` for 3D layers.
1019
+ (In addition to plain DisplayObject props like `x`, `y`, `rotation`, `alpha`, `width`, `height`, `visible`.) `blur`, `colorize` and the other colour-matrix shorthands of GSAP's PixiPlugin are gone: use a named filter and animate `filters.<name>.<prop>` (below). **Angles are in degrees**: `rotation`, `skew` / `skewX` / `skewY`, and `rotationX` / `rotationY` for 3D layers.
1022
1020
 
1023
1021
  ### Filter keyframe paths
1024
1022
 
@@ -1145,7 +1143,7 @@ Common fields (`TransitionCommon`):
1145
1143
  | `to` | string | sibling sequence's `name`. Must be declared **after** `from` in `sequences[]`. |
1146
1144
  | `at` | number | start of the transition, in the **parent composition's** time (like a sequence's `at`, not sequence-local); negative = back from the parent's end. |
1147
1145
  | `duration` | number | seconds, must be > 0. |
1148
- | `ease` | string? | GSAP easing name. Default `'none'` (linear). |
1146
+ | `ease` | string? | Ease name. Default `'none'` (linear). |
1149
1147
 
1150
1148
  Validation runs at composition build time. Errors throw with the offending `transitions[<index>]` quoted in the message: missing names, `to` before `from`, transition window outside either sequence's lifespan, duplicate use of one sequence as `from`, `from === to`, `duration <= 0`.
1151
1149
 
@@ -1412,7 +1410,7 @@ The image is centred on the canvas; `fit` (default `'cover'`) controls how the t
1412
1410
  | `name?` | string | sequence name so transitions can reference it |
1413
1411
  | `at?` | number | start time, parent-relative seconds |
1414
1412
  | `fit?` | `'cover'` \| `'contain'` | how the texture fills the canvas. Default `'cover'`. |
1415
- | `ease?` | string | GSAP easing name. Default `'sine.inOut'`. |
1413
+ | `ease?` | string | Ease name. Default `'sine.inOut'`. |
1416
1414
 
1417
1415
  #### `motion: 'still'`
1418
1416
 
@@ -1548,7 +1546,7 @@ import { cameraPath, wiggle } from 'pixi-effects';
1548
1546
  | `points` | `[[x, y, z], …]`, at least two, the route in order |
1549
1547
  | `duration` | seconds; required |
1550
1548
  | `at` | start, seconds from the start of the camera layer (default 0) |
1551
- | `ease` | GSAP ease for the progress along the route (default `'none'`: constant speed; `'power2.in'` an accelerating rush) |
1549
+ | `ease` | Ease for the progress along the route (default `'none'`: constant speed; `'power2.in'` an accelerating rush) |
1552
1550
  | `look` | `'ahead'` (default: face where it flies) or a fixed `[x, y, z]` |
1553
1551
  | `lookAhead` | with `'ahead'`: how far ahead, as a fraction 0–1 of the route (default 0.08); past the end it continues along the last direction |
1554
1552
  | `smooth` | `true` (default): a smooth curve through the points (Catmull-Rom); `false`: straight lines |
@@ -1574,7 +1572,7 @@ import { followPath } from 'pixi-effects';
1574
1572
  | `d` | the route: SVG path data in canvas coordinates; several sub-paths are walked in order; a closed one comes back to its start |
1575
1573
  | `duration` | seconds; required |
1576
1574
  | `at` | start, seconds from the start of the layer (default 0): give the layer its own `at` so it is not drawn at the origin before the trip |
1577
- | `ease` | GSAP ease for the progress along the path (default `'none'`: constant speed) |
1575
+ | `ease` | Ease for the progress along the path (default `'none'`: constant speed) |
1578
1576
  | `from` / `to` | fractions 0–1 of the path to start and stop at (default 0 → 1; `from: 1, to: 0` goes backwards) |
1579
1577
  | `orient` / `rotate` | `orient: true` also keyframes `rotation` (degrees) to face the way it is going, without ever jumping by a turn; `rotate` adds an offset (`-90` for an image that points up) |
1580
1578
  | `frameRate` | samples per second (default 30) |
@@ -1643,7 +1641,7 @@ const ripple = stagger(18, { each: 0.12, grid: [6, 3], from: 'center', ease: 'si
1643
1641
  | `amount` | seconds from the first to the last, however many there are |
1644
1642
  | `from` | `'start'` (default), `'end'`, `'center'` (outward), `'edges'` (inward), `'random'` (a seeded shuffle of the same delays) or an item index |
1645
1643
  | `grid` | `[columns, rows]`: items fill the grid row by row, and the wave travels by straight-line distance (a ripple) |
1646
- | `ease` | a GSAP ease that reshapes the spread (default `'none'`); the first stays at 0, the last at the full spread |
1644
+ | `ease` | an ease that reshapes the spread (default `'none'`); the first stays at 0, the last at the full spread |
1647
1645
  | `seed` | for `from: 'random'`: another seed, another order |
1648
1646
 
1649
1647
  With a layer array each layer's own `at` is kept and the delay is added to it. Keyframes inside the layers stay as they are (they count from the layer's start).