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.
- package/CHANGELOG.md +16 -0
- package/README.md +8 -10
- package/ai/CHAT.md +1 -1
- package/ai/chat-template.html +4 -6
- package/dist/{Base-CpdDs4HT.d.ts → Base-CVezIEdo.d.ts} +2 -4
- package/dist/{Base-TbBhHPrG.d.cts → Base-DzC3i919.d.cts} +2 -4
- package/dist/Composition-4TYDRRRY.js +7 -0
- package/dist/{Composition-3O7L2VL5.js.map → Composition-4TYDRRRY.js.map} +1 -1
- package/dist/Composition-QCOWQSDB.cjs +16 -0
- package/dist/{Composition-EE3KEE2L.cjs.map → Composition-QCOWQSDB.cjs.map} +1 -1
- package/dist/Controller.d.cts +2 -3
- package/dist/Controller.d.ts +2 -3
- package/dist/{Movie-BkP82KXS.d.ts → Movie-CQ0Nz62a.d.cts} +2 -3
- package/dist/{Movie-BWLLWRRe.d.cts → Movie-M9dKm9dI.d.ts} +2 -3
- package/dist/Presenter.d.cts +2 -3
- package/dist/Presenter.d.ts +2 -3
- package/dist/{blendModes-YV43K6E7.cjs → blendModes-HDOP6R7T.cjs} +5 -5
- package/dist/{blendModes-YV43K6E7.cjs.map → blendModes-HDOP6R7T.cjs.map} +1 -1
- package/dist/{blendModes-G3NOAU3T.js → blendModes-PAVTW3BO.js} +4 -4
- package/dist/{blendModes-G3NOAU3T.js.map → blendModes-PAVTW3BO.js.map} +1 -1
- package/dist/{chunk-TLYTYBWX.js → chunk-45QKLD6M.js} +9 -11
- package/dist/chunk-45QKLD6M.js.map +1 -0
- package/dist/{chunk-WMMZDPWK.js → chunk-CKTS6G6I.js} +7 -11
- package/dist/chunk-CKTS6G6I.js.map +1 -0
- package/dist/{chunk-IIDBEYQH.cjs → chunk-NDR2VQFV.cjs} +91 -95
- package/dist/chunk-NDR2VQFV.cjs.map +1 -0
- package/dist/{chunk-3DLYAPK7.cjs → chunk-P4GY3Z4G.cjs} +5 -5
- package/dist/{chunk-3DLYAPK7.cjs.map → chunk-P4GY3Z4G.cjs.map} +1 -1
- package/dist/{chunk-A225HYSY.cjs → chunk-RQMI7EJT.cjs} +968 -256
- package/dist/chunk-RQMI7EJT.cjs.map +1 -0
- package/dist/{chunk-FXAHNPBP.js → chunk-TGJACVLD.js} +948 -239
- package/dist/chunk-TGJACVLD.js.map +1 -0
- package/dist/{chunk-AXZUKNXF.js → chunk-TYWFKCPY.js} +4 -4
- package/dist/{chunk-AXZUKNXF.js.map → chunk-TYWFKCPY.js.map} +1 -1
- package/dist/{chunk-ECA2WNRX.cjs → chunk-ZMAD3KJU.cjs} +9 -11
- package/dist/chunk-ZMAD3KJU.cjs.map +1 -0
- package/dist/index.cjs +74 -95
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +16 -14
- package/dist/index.d.ts +16 -14
- package/dist/index.js +20 -23
- package/dist/index.js.map +1 -1
- package/dist/loader.css +1 -1
- package/dist/three.cjs +6 -6
- package/dist/three.d.cts +2 -3
- package/dist/three.d.ts +2 -3
- package/dist/three.js +2 -2
- package/dist/{types-DSGwN5w1.d.cts → types-DUVefWiB.d.cts} +128 -3
- package/dist/{types-DSGwN5w1.d.ts → types-DUVefWiB.d.ts} +128 -3
- package/docs/api.md +5 -1
- package/docs/dsl.md +13 -15
- package/llms-full.txt +24 -22
- package/llms.txt +1 -1
- package/package.json +3 -4
- package/skills/pixi-effects/SKILL.md +1 -1
- package/skills/pixi-effects/reference/cheatsheet.md +1 -1
- package/skills/pixi-effects/reference/pitfalls.md +3 -3
- package/skills/pixi-effects/reference/recipes.md +1 -1
- package/skills/pixi-effects/template.html +6 -8
- package/dist/Composition-3O7L2VL5.js +0 -7
- package/dist/Composition-EE3KEE2L.cjs +0 -16
- package/dist/chunk-A225HYSY.cjs.map +0 -1
- package/dist/chunk-ECA2WNRX.cjs.map +0 -1
- package/dist/chunk-FXAHNPBP.js.map +0 -1
- package/dist/chunk-IIDBEYQH.cjs.map +0 -1
- package/dist/chunk-TLYTYBWX.js.map +0 -1
- 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.
|
|
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
|
|
4
|
-
require('./chunk-
|
|
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
|
|
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 =
|
|
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
|
|
148
|
+
return chunkRQMI7EJT_cjs.evaluateExpr(v, scope);
|
|
149
149
|
}
|
|
150
150
|
|
|
151
151
|
// src/three/index.ts
|
|
152
152
|
function registerThree() {
|
|
153
|
-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
2
|
-
import './chunk-
|
|
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
|
-
/**
|
|
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):
|
|
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
|
|
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
|
-
/**
|
|
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):
|
|
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
|
|
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` |
|
|
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'` (
|
|
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; //
|
|
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
|
|
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).
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
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? |
|
|
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 |
|
|
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` |
|
|
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` |
|
|
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` |
|
|
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).
|