pixi-effects 0.48.0 → 0.48.2
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 +14 -0
- package/README.md +5 -5
- package/ai/chat-template.html +3 -3
- package/dist/Composition-5FKV2IBP.js +7 -0
- package/dist/{Composition-ZCRJHBB5.js.map → Composition-5FKV2IBP.js.map} +1 -1
- package/dist/Composition-TJ5D7Z63.cjs +16 -0
- package/dist/{Composition-PMWLJQPI.cjs.map → Composition-TJ5D7Z63.cjs.map} +1 -1
- package/dist/{Spans-KTUPDFSR.cjs → Spans-5ENZ3XGS.cjs} +9 -9
- package/dist/{Spans-KTUPDFSR.cjs.map → Spans-5ENZ3XGS.cjs.map} +1 -1
- package/dist/{Spans-FMAVPATS.js → Spans-6A3VLHRH.js} +4 -4
- package/dist/{Spans-FMAVPATS.js.map → Spans-6A3VLHRH.js.map} +1 -1
- package/dist/{chunk-NGK4E536.cjs → chunk-45ALIMAF.cjs} +85 -60
- package/dist/chunk-45ALIMAF.cjs.map +1 -0
- package/dist/{chunk-UI7CEUTP.js → chunk-6D4W2KZQ.js} +3 -3
- package/dist/{chunk-UI7CEUTP.js.map → chunk-6D4W2KZQ.js.map} +1 -1
- package/dist/{chunk-OGLRSR6C.cjs → chunk-CCPJD76D.cjs} +63 -63
- package/dist/{chunk-OGLRSR6C.cjs.map → chunk-CCPJD76D.cjs.map} +1 -1
- package/dist/{chunk-4PYVHLIK.js → chunk-IVKI6CPH.js} +23 -22
- package/dist/chunk-IVKI6CPH.js.map +1 -0
- package/dist/{chunk-GX2WQV4A.js → chunk-RCKLUCB7.js} +45 -20
- package/dist/chunk-RCKLUCB7.js.map +1 -0
- package/dist/{chunk-ECLBZV4N.cjs → chunk-Z3DM4ETD.cjs} +68 -86
- package/dist/chunk-Z3DM4ETD.cjs.map +1 -0
- package/dist/index.cjs +33 -33
- package/dist/index.js +3 -3
- package/dist/loader.css +1 -1
- package/dist/present.cjs +3 -3
- package/dist/present.js +3 -3
- package/dist/three.cjs +5 -5
- package/dist/three.js +1 -1
- package/llms-full.txt +2 -2
- package/package.json +1 -1
- package/skills/pixi-effects/SKILL.md +1 -1
- package/skills/pixi-effects/reference/pitfalls.md +1 -1
- package/skills/pixi-effects/template.html +6 -6
- package/dist/Composition-PMWLJQPI.cjs +0 -16
- package/dist/Composition-ZCRJHBB5.js +0 -7
- package/dist/chunk-4PYVHLIK.js.map +0 -1
- package/dist/chunk-ECLBZV4N.cjs.map +0 -1
- package/dist/chunk-GX2WQV4A.js.map +0 -1
- package/dist/chunk-NGK4E536.cjs.map +0 -1
package/dist/index.cjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
require('./chunk-
|
|
3
|
+
var chunk45ALIMAF_cjs = require('./chunk-45ALIMAF.cjs');
|
|
4
|
+
require('./chunk-CCPJD76D.cjs');
|
|
5
5
|
var chunkVQXZ2NOI_cjs = require('./chunk-VQXZ2NOI.cjs');
|
|
6
|
-
var
|
|
6
|
+
var chunkZ3DM4ETD_cjs = require('./chunk-Z3DM4ETD.cjs');
|
|
7
7
|
var chunkZAHCGFGC_cjs = require('./chunk-ZAHCGFGC.cjs');
|
|
8
8
|
require('./chunk-WYR2AU4W.cjs');
|
|
9
9
|
require('./chunk-NGJXVJB7.cjs');
|
|
@@ -13,99 +13,99 @@ var chunkDOLTCXCL_cjs = require('./chunk-DOLTCXCL.cjs');
|
|
|
13
13
|
|
|
14
14
|
Object.defineProperty(exports, "Movie", {
|
|
15
15
|
enumerable: true,
|
|
16
|
-
get: function () { return
|
|
16
|
+
get: function () { return chunk45ALIMAF_cjs.Movie; }
|
|
17
17
|
});
|
|
18
18
|
Object.defineProperty(exports, "animateText", {
|
|
19
19
|
enumerable: true,
|
|
20
|
-
get: function () { return
|
|
20
|
+
get: function () { return chunk45ALIMAF_cjs.animateText; }
|
|
21
21
|
});
|
|
22
22
|
Object.defineProperty(exports, "audioEnvelope", {
|
|
23
23
|
enumerable: true,
|
|
24
|
-
get: function () { return
|
|
24
|
+
get: function () { return chunk45ALIMAF_cjs.audioEnvelope; }
|
|
25
25
|
});
|
|
26
26
|
Object.defineProperty(exports, "bpmEnvelope", {
|
|
27
27
|
enumerable: true,
|
|
28
|
-
get: function () { return
|
|
28
|
+
get: function () { return chunk45ALIMAF_cjs.bpmEnvelope; }
|
|
29
29
|
});
|
|
30
30
|
Object.defineProperty(exports, "cameraPath", {
|
|
31
31
|
enumerable: true,
|
|
32
|
-
get: function () { return
|
|
32
|
+
get: function () { return chunk45ALIMAF_cjs.cameraPath; }
|
|
33
33
|
});
|
|
34
34
|
Object.defineProperty(exports, "computeEnvelope", {
|
|
35
35
|
enumerable: true,
|
|
36
|
-
get: function () { return
|
|
36
|
+
get: function () { return chunk45ALIMAF_cjs.computeEnvelope; }
|
|
37
37
|
});
|
|
38
38
|
Object.defineProperty(exports, "dismissLoader", {
|
|
39
39
|
enumerable: true,
|
|
40
|
-
get: function () { return
|
|
40
|
+
get: function () { return chunk45ALIMAF_cjs.dismissLoader; }
|
|
41
41
|
});
|
|
42
42
|
Object.defineProperty(exports, "ease", {
|
|
43
43
|
enumerable: true,
|
|
44
|
-
get: function () { return
|
|
44
|
+
get: function () { return chunk45ALIMAF_cjs.parseEase; }
|
|
45
45
|
});
|
|
46
46
|
Object.defineProperty(exports, "failLoader", {
|
|
47
47
|
enumerable: true,
|
|
48
|
-
get: function () { return
|
|
48
|
+
get: function () { return chunk45ALIMAF_cjs.failLoader; }
|
|
49
49
|
});
|
|
50
50
|
Object.defineProperty(exports, "followPath", {
|
|
51
51
|
enumerable: true,
|
|
52
|
-
get: function () { return
|
|
52
|
+
get: function () { return chunk45ALIMAF_cjs.followPath; }
|
|
53
53
|
});
|
|
54
54
|
Object.defineProperty(exports, "kenBurns", {
|
|
55
55
|
enumerable: true,
|
|
56
|
-
get: function () { return
|
|
56
|
+
get: function () { return chunk45ALIMAF_cjs.kenBurns; }
|
|
57
57
|
});
|
|
58
58
|
Object.defineProperty(exports, "measureText", {
|
|
59
59
|
enumerable: true,
|
|
60
|
-
get: function () { return
|
|
60
|
+
get: function () { return chunk45ALIMAF_cjs.measureText; }
|
|
61
61
|
});
|
|
62
62
|
Object.defineProperty(exports, "musicBuffer", {
|
|
63
63
|
enumerable: true,
|
|
64
|
-
get: function () { return
|
|
64
|
+
get: function () { return chunk45ALIMAF_cjs.musicBuffer; }
|
|
65
65
|
});
|
|
66
66
|
Object.defineProperty(exports, "musicEnvelope", {
|
|
67
67
|
enumerable: true,
|
|
68
|
-
get: function () { return
|
|
68
|
+
get: function () { return chunk45ALIMAF_cjs.musicEnvelope; }
|
|
69
69
|
});
|
|
70
70
|
Object.defineProperty(exports, "musicEvents", {
|
|
71
71
|
enumerable: true,
|
|
72
|
-
get: function () { return
|
|
72
|
+
get: function () { return chunk45ALIMAF_cjs.musicEvents; }
|
|
73
73
|
});
|
|
74
74
|
Object.defineProperty(exports, "orbit", {
|
|
75
75
|
enumerable: true,
|
|
76
|
-
get: function () { return
|
|
76
|
+
get: function () { return chunk45ALIMAF_cjs.orbit; }
|
|
77
77
|
});
|
|
78
78
|
Object.defineProperty(exports, "particles", {
|
|
79
79
|
enumerable: true,
|
|
80
|
-
get: function () { return
|
|
80
|
+
get: function () { return chunk45ALIMAF_cjs.particles; }
|
|
81
81
|
});
|
|
82
82
|
Object.defineProperty(exports, "react", {
|
|
83
83
|
enumerable: true,
|
|
84
|
-
get: function () { return
|
|
84
|
+
get: function () { return chunk45ALIMAF_cjs.react; }
|
|
85
85
|
});
|
|
86
86
|
Object.defineProperty(exports, "resolveLoader", {
|
|
87
87
|
enumerable: true,
|
|
88
|
-
get: function () { return
|
|
88
|
+
get: function () { return chunk45ALIMAF_cjs.resolveLoader; }
|
|
89
89
|
});
|
|
90
90
|
Object.defineProperty(exports, "samplePath", {
|
|
91
91
|
enumerable: true,
|
|
92
|
-
get: function () { return
|
|
92
|
+
get: function () { return chunk45ALIMAF_cjs.samplePath; }
|
|
93
93
|
});
|
|
94
94
|
Object.defineProperty(exports, "splitText", {
|
|
95
95
|
enumerable: true,
|
|
96
|
-
get: function () { return
|
|
96
|
+
get: function () { return chunk45ALIMAF_cjs.splitText; }
|
|
97
97
|
});
|
|
98
98
|
Object.defineProperty(exports, "stagger", {
|
|
99
99
|
enumerable: true,
|
|
100
|
-
get: function () { return
|
|
100
|
+
get: function () { return chunk45ALIMAF_cjs.stagger; }
|
|
101
101
|
});
|
|
102
102
|
Object.defineProperty(exports, "wiggle", {
|
|
103
103
|
enumerable: true,
|
|
104
|
-
get: function () { return
|
|
104
|
+
get: function () { return chunk45ALIMAF_cjs.wiggle; }
|
|
105
105
|
});
|
|
106
106
|
Object.defineProperty(exports, "withFade", {
|
|
107
107
|
enumerable: true,
|
|
108
|
-
get: function () { return
|
|
108
|
+
get: function () { return chunk45ALIMAF_cjs.withFade; }
|
|
109
109
|
});
|
|
110
110
|
Object.defineProperty(exports, "useMediabunny", {
|
|
111
111
|
enumerable: true,
|
|
@@ -113,27 +113,27 @@ Object.defineProperty(exports, "useMediabunny", {
|
|
|
113
113
|
});
|
|
114
114
|
Object.defineProperty(exports, "Sequence", {
|
|
115
115
|
enumerable: true,
|
|
116
|
-
get: function () { return
|
|
116
|
+
get: function () { return chunkZ3DM4ETD_cjs.Sequence; }
|
|
117
117
|
});
|
|
118
118
|
Object.defineProperty(exports, "noise", {
|
|
119
119
|
enumerable: true,
|
|
120
|
-
get: function () { return
|
|
120
|
+
get: function () { return chunkZ3DM4ETD_cjs.noise; }
|
|
121
121
|
});
|
|
122
122
|
Object.defineProperty(exports, "noise2", {
|
|
123
123
|
enumerable: true,
|
|
124
|
-
get: function () { return
|
|
124
|
+
get: function () { return chunkZ3DM4ETD_cjs.noise2; }
|
|
125
125
|
});
|
|
126
126
|
Object.defineProperty(exports, "rand", {
|
|
127
127
|
enumerable: true,
|
|
128
|
-
get: function () { return
|
|
128
|
+
get: function () { return chunkZ3DM4ETD_cjs.rand; }
|
|
129
129
|
});
|
|
130
130
|
Object.defineProperty(exports, "random", {
|
|
131
131
|
enumerable: true,
|
|
132
|
-
get: function () { return
|
|
132
|
+
get: function () { return chunkZ3DM4ETD_cjs.random; }
|
|
133
133
|
});
|
|
134
134
|
Object.defineProperty(exports, "registerSequenceType", {
|
|
135
135
|
enumerable: true,
|
|
136
|
-
get: function () { return
|
|
136
|
+
get: function () { return chunkZ3DM4ETD_cjs.registerSequenceType; }
|
|
137
137
|
});
|
|
138
138
|
Object.defineProperty(exports, "inspectSound", {
|
|
139
139
|
enumerable: true,
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
export { Movie, animateText, audioEnvelope, bpmEnvelope, cameraPath, computeEnvelope, dismissLoader, parseEase as ease, failLoader, followPath, kenBurns, measureText, musicBuffer, musicEnvelope, musicEvents, orbit, particles, react, resolveLoader, samplePath, splitText, stagger, wiggle, withFade } from './chunk-
|
|
2
|
-
import './chunk-
|
|
1
|
+
export { Movie, animateText, audioEnvelope, bpmEnvelope, cameraPath, computeEnvelope, dismissLoader, parseEase as ease, failLoader, followPath, kenBurns, measureText, musicBuffer, musicEnvelope, musicEvents, orbit, particles, react, resolveLoader, samplePath, splitText, stagger, wiggle, withFade } from './chunk-RCKLUCB7.js';
|
|
2
|
+
import './chunk-6D4W2KZQ.js';
|
|
3
3
|
export { useMediabunny } from './chunk-K3XOEC3C.js';
|
|
4
|
-
export { Sequence, noise, noise2, rand, random, registerSequenceType } from './chunk-
|
|
4
|
+
export { Sequence, noise, noise2, rand, random, registerSequenceType } from './chunk-IVKI6CPH.js';
|
|
5
5
|
export { inspectSound } from './chunk-G4PXCV2B.js';
|
|
6
6
|
import './chunk-JBDBICS2.js';
|
|
7
7
|
import './chunk-BFRWSV3R.js';
|
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.48.
|
|
4
|
+
* <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixi-effects@0.48.2/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/present.cjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
require('./chunk-
|
|
4
|
-
require('./chunk-
|
|
3
|
+
require('./chunk-45ALIMAF.cjs');
|
|
4
|
+
require('./chunk-CCPJD76D.cjs');
|
|
5
5
|
require('./chunk-VQXZ2NOI.cjs');
|
|
6
|
-
require('./chunk-
|
|
6
|
+
require('./chunk-Z3DM4ETD.cjs');
|
|
7
7
|
require('./chunk-ZAHCGFGC.cjs');
|
|
8
8
|
require('./chunk-WYR2AU4W.cjs');
|
|
9
9
|
require('./chunk-NGJXVJB7.cjs');
|
package/dist/present.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import './chunk-
|
|
2
|
-
import './chunk-
|
|
1
|
+
import './chunk-RCKLUCB7.js';
|
|
2
|
+
import './chunk-6D4W2KZQ.js';
|
|
3
3
|
import './chunk-K3XOEC3C.js';
|
|
4
|
-
import './chunk-
|
|
4
|
+
import './chunk-IVKI6CPH.js';
|
|
5
5
|
import './chunk-G4PXCV2B.js';
|
|
6
6
|
import './chunk-JBDBICS2.js';
|
|
7
7
|
import './chunk-BFRWSV3R.js';
|
package/dist/three.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkZ3DM4ETD_cjs = require('./chunk-Z3DM4ETD.cjs');
|
|
4
4
|
require('./chunk-NGJXVJB7.cjs');
|
|
5
5
|
require('./chunk-DOLTCXCL.cjs');
|
|
6
6
|
var pixi_js = require('pixi.js');
|
|
@@ -170,7 +170,7 @@ function releaseThree(kind) {
|
|
|
170
170
|
|
|
171
171
|
// src/three/ThreeSequence.ts
|
|
172
172
|
var NOT_PURE = /\bMath\s*\.\s*random\s*\(|\bDate\s*\.\s*now\s*\(|\bperformance\s*\.\s*now\s*\(|\bnew\s+Date\s*\(/;
|
|
173
|
-
var ThreeSequence = class extends
|
|
173
|
+
var ThreeSequence = class extends chunkZ3DM4ETD_cjs.Sequence {
|
|
174
174
|
_renderer = null;
|
|
175
175
|
/** The renderer this layer draws with (`'webgl'` or `'webgpu'`), once it is built. */
|
|
176
176
|
renderer = null;
|
|
@@ -231,7 +231,7 @@ var ThreeSequence = class extends chunkECLBZV4N_cjs.Sequence {
|
|
|
231
231
|
if (typeof spec.update === "function" && NOT_PURE.test(spec.update.toString())) {
|
|
232
232
|
console.warn(`pixi-effects: three layer${spec.name ? ` "${spec.name}"` : ""}: update calls Math.random, Date.now, performance.now or new Date, so it is not deterministic: the same frame would draw differently in playback, in a seek and in an export. Derive the value from t`);
|
|
233
233
|
}
|
|
234
|
-
const scope =
|
|
234
|
+
const scope = chunkZ3DM4ETD_cjs.buildScope(this, this.parent, this.root);
|
|
235
235
|
const width = resolveDim(spec.width, scope) ?? this.parent?.width ?? this.root.width;
|
|
236
236
|
const height = resolveDim(spec.height, scope) ?? this.parent?.height ?? this.root.height;
|
|
237
237
|
const resolution = spec.resolution ?? 1;
|
|
@@ -800,7 +800,7 @@ var ThreeSequence = class extends chunkECLBZV4N_cjs.Sequence {
|
|
|
800
800
|
function resolveDim(v, scope) {
|
|
801
801
|
if (v === void 0) return void 0;
|
|
802
802
|
if (typeof v === "number") return v;
|
|
803
|
-
return
|
|
803
|
+
return chunkZ3DM4ETD_cjs.evaluateExpr(v, scope);
|
|
804
804
|
}
|
|
805
805
|
var ids = /* @__PURE__ */ new WeakMap();
|
|
806
806
|
var lastId = 0;
|
|
@@ -1093,7 +1093,7 @@ function registerThree(options = {}) {
|
|
|
1093
1093
|
const kind = options.renderer ?? "webgl";
|
|
1094
1094
|
checkRendererKind(kind, "registerThree's renderer");
|
|
1095
1095
|
setPageRenderer(kind);
|
|
1096
|
-
|
|
1096
|
+
chunkZ3DM4ETD_cjs.registerSequenceType("three", ThreeSequence);
|
|
1097
1097
|
}
|
|
1098
1098
|
function three(spec) {
|
|
1099
1099
|
return spec;
|
package/dist/three.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Sequence, buildScope, evaluateExpr, registerSequenceType } from './chunk-
|
|
1
|
+
import { Sequence, buildScope, evaluateExpr, registerSequenceType } from './chunk-IVKI6CPH.js';
|
|
2
2
|
import './chunk-BFRWSV3R.js';
|
|
3
3
|
import './chunk-WGRWFQOB.js';
|
|
4
4
|
import { Texture, Sprite, TextureSource, RenderTexture, Matrix } from 'pixi.js';
|
package/llms-full.txt
CHANGED
|
@@ -6,7 +6,7 @@ Concatenation of the skill, cheatsheet, pitfalls, recipes and the DSL / API / me
|
|
|
6
6
|
|
|
7
7
|
<!-- ===== skills/pixi-effects/SKILL.md ===== -->
|
|
8
8
|
|
|
9
|
-
> Written for pixi-effects 0.48.
|
|
9
|
+
> Written for pixi-effects 0.48.2. Update this skill with `npx skills update`; the newest docs are at https://yjmtmtk.github.io/pixi-effects/
|
|
10
10
|
|
|
11
11
|
# pixi-effects — write a video as data
|
|
12
12
|
|
|
@@ -367,7 +367,7 @@ A good habit that catches most of these: after `init`, read `window.__logs` (see
|
|
|
367
367
|
## Tooling (agent harness)
|
|
368
368
|
|
|
369
369
|
30. **A scene change must keep the outgoing scene alive until the covering flood / wipe has finished**, and the next scene starts when it is complete; the flood circle must reach the corners (radius ≥ half the diagonal) and use `power2.in`, not `expo.in`. *(docs)*
|
|
370
|
-
30b. **Unknown option names now warn** (`contactSheet({ cols: 2 })` → did you mean `columns`; `init({ fps })` → `frameRate`). Layer names show up in `inspect` paths, so give layers a `name`. `inspect` ignores faint (alpha < 0.3) layers and, while a geometry keyframe (x y z scale rotation …) is running on the layer, its `null` parent or its composition, a text crossing the edge on purpose (a marquee, a zoom-through); a fade, a `set` and an x written only in `initial` are no motion, so a cut-off title is reported once it has settled.
|
|
370
|
+
30b. **Unknown option names now warn** (`contactSheet({ cols: 2 })` → did you mean `columns`; `init({ fps })` → `frameRate`). Layer names show up in `inspect` paths, so give layers a `name`. `inspect` ignores faint (alpha < 0.3) layers and, while a geometry keyframe (x y z scale rotation …) is running on the layer, its `null` parent or its composition, a text crossing the edge on purpose (a marquee, a zoom-through); a fade, a `set` and an x written only in `initial` are no motion, so a cut-off title is reported once it has settled. `movie.destroy()`, a rebuild, playback and seeking print no `[BindGroup] … destroyed while still bound` warning (up to 0.48.0 a `destroy()` right after playing did, on WebGPU). *(docs / fixed)*
|
|
371
371
|
30c. **Look with the built-in tools, not OS screenshots**: `await movie.contactSheet({ count: 6, as: 'dataURL' })` returns one labelled image of the whole animation; `await movie.inspect(frame)` returns every layer's canvas bounds and `issues`. If you do use a browser tool, `screenshot` needs an **absolute path**, macOS `sed -i` needs `''`, and a static server may redirect `/x.html` → `/x` and drop `?query`. Keep the template's `try/catch` around `init` so failures land in `window.__logs`. Check ≥ 5 timestamps including mid-transition. *(fixed: tools built in)*
|
|
372
372
|
31. **Check audio with `movie.inspectAudio()`**: every sound measured on its own (`sound.length`, `peakDb`, `loudestAt`, `brightnessHz`), when it plays, loudness and brightness per 0.1 s window, and `issues` (the mix was limited, a layer is inaudible, an sfx is cut off by the end). Decoding a render by hand is no longer needed: `render()` encodes the same mix, on time in mp4 / mov / webm / mkv. *(fixed)*
|
|
373
373
|
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@ name: pixi-effects
|
|
|
3
3
|
description: Use when asked to make, animate, preview or export a video, motion graphics, an animated title, a lower third, kinetic type, a promo, a slideshow with transitions, an animated chart or data story, a social clip, a 2.5D / depth scene, or music and sound for a video, written as code in JavaScript or HTML. pixi-effects is a JS library where a video is a plain-object composition (text, shape, image, video, audio and file-free sfx / music, camera, light and shader layers with keyframes) that plays in the browser, is checked by a tool the agent can run, and exports MP4 / WebM / MOV with no server. Not for a project that already uses another video tool (Remotion, Motion Canvas, ffmpeg); follow that tool instead.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
> Written for pixi-effects 0.48.
|
|
6
|
+
> Written for pixi-effects 0.48.2. Update this skill with `npx skills update`; the newest docs are at https://yjmtmtk.github.io/pixi-effects/
|
|
7
7
|
|
|
8
8
|
# pixi-effects — write a video as data
|
|
9
9
|
|
|
@@ -49,7 +49,7 @@ A good habit that catches most of these: after `init`, read `window.__logs` (see
|
|
|
49
49
|
## Tooling (agent harness)
|
|
50
50
|
|
|
51
51
|
30. **A scene change must keep the outgoing scene alive until the covering flood / wipe has finished**, and the next scene starts when it is complete; the flood circle must reach the corners (radius ≥ half the diagonal) and use `power2.in`, not `expo.in`. *(docs)*
|
|
52
|
-
30b. **Unknown option names now warn** (`contactSheet({ cols: 2 })` → did you mean `columns`; `init({ fps })` → `frameRate`). Layer names show up in `inspect` paths, so give layers a `name`. `inspect` ignores faint (alpha < 0.3) layers and, while a geometry keyframe (x y z scale rotation …) is running on the layer, its `null` parent or its composition, a text crossing the edge on purpose (a marquee, a zoom-through); a fade, a `set` and an x written only in `initial` are no motion, so a cut-off title is reported once it has settled.
|
|
52
|
+
30b. **Unknown option names now warn** (`contactSheet({ cols: 2 })` → did you mean `columns`; `init({ fps })` → `frameRate`). Layer names show up in `inspect` paths, so give layers a `name`. `inspect` ignores faint (alpha < 0.3) layers and, while a geometry keyframe (x y z scale rotation …) is running on the layer, its `null` parent or its composition, a text crossing the edge on purpose (a marquee, a zoom-through); a fade, a `set` and an x written only in `initial` are no motion, so a cut-off title is reported once it has settled. `movie.destroy()`, a rebuild, playback and seeking print no `[BindGroup] … destroyed while still bound` warning (up to 0.48.0 a `destroy()` right after playing did, on WebGPU). *(docs / fixed)*
|
|
53
53
|
30c. **Look with the built-in tools, not OS screenshots**: `await movie.contactSheet({ count: 6, as: 'dataURL' })` returns one labelled image of the whole animation; `await movie.inspect(frame)` returns every layer's canvas bounds and `issues`. If you do use a browser tool, `screenshot` needs an **absolute path**, macOS `sed -i` needs `''`, and a static server may redirect `/x.html` → `/x` and drop `?query`. Keep the template's `try/catch` around `init` so failures land in `window.__logs`. Check ≥ 5 timestamps including mid-transition. *(fixed: tools built in)*
|
|
54
54
|
31. **Check audio with `movie.inspectAudio()`**: every sound measured on its own (`sound.length`, `peakDb`, `loudestAt`, `brightnessHz`), when it plays, loudness and brightness per 0.1 s window, and `issues` (the mix was limited, a layer is inaudible, an sfx is cut off by the end). Decoding a render by hand is no longer needed: `render()` encodes the same mix, on time in mp4 / mov / webm / mkv. *(fixed)*
|
|
55
55
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
6
|
<title>pixi-effects video</title>
|
|
7
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixi-effects@0.48.
|
|
7
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixi-effects@0.48.2/dist/loader.css" /> <!-- the loader: HTML + CSS only, so it is on screen at once and keeps moving while the page builds the video -->
|
|
8
8
|
<style>
|
|
9
9
|
body { background: #0d1220; margin: 0; padding: 16px; }
|
|
10
10
|
.stage { position: relative; width: min(960px, 100%); } /* the player and the loader both sit inside this box */
|
|
@@ -37,17 +37,17 @@
|
|
|
37
37
|
"imports": {
|
|
38
38
|
"pixi.js": "https://esm.sh/pixi.js@8.22.0?bundle-deps",
|
|
39
39
|
"mediabunny": "https://esm.sh/mediabunny",
|
|
40
|
-
"pixi-effects": "https://cdn.jsdelivr.net/npm/pixi-effects@0.48.
|
|
41
|
-
"pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.48.
|
|
42
|
-
"pixi-effects/present": "https://cdn.jsdelivr.net/npm/pixi-effects@0.48.
|
|
43
|
-
"pixi-effects/three": "https://cdn.jsdelivr.net/npm/pixi-effects@0.48.
|
|
40
|
+
"pixi-effects": "https://cdn.jsdelivr.net/npm/pixi-effects@0.48.2/dist/index.js",
|
|
41
|
+
"pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.48.2/dist/Controller.js",
|
|
42
|
+
"pixi-effects/present": "https://cdn.jsdelivr.net/npm/pixi-effects@0.48.2/dist/present.js",
|
|
43
|
+
"pixi-effects/three": "https://cdn.jsdelivr.net/npm/pixi-effects@0.48.2/dist/three.js",
|
|
44
44
|
"pixi-filters": "https://esm.sh/pixi-filters@6.1.5?external=pixi.js",
|
|
45
45
|
"three": "https://esm.sh/three@0.178.0",
|
|
46
46
|
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.178.0/examples/jsm/"
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
</script>
|
|
50
|
-
<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/pixi-effects@0.48.
|
|
50
|
+
<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/pixi-effects@0.48.2/dist/index.js" /> <!-- after the import map: the library downloads while the page is parsed -->
|
|
51
51
|
|
|
52
52
|
<script type="module">
|
|
53
53
|
import { Movie, kenBurns, withFade } from 'pixi-effects';
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var chunkOGLRSR6C_cjs = require('./chunk-OGLRSR6C.cjs');
|
|
4
|
-
require('./chunk-ECLBZV4N.cjs');
|
|
5
|
-
require('./chunk-WYR2AU4W.cjs');
|
|
6
|
-
require('./chunk-NGJXVJB7.cjs');
|
|
7
|
-
require('./chunk-DOLTCXCL.cjs');
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
Object.defineProperty(exports, "CompositionSequence", {
|
|
12
|
-
enumerable: true,
|
|
13
|
-
get: function () { return chunkOGLRSR6C_cjs.CompositionSequence; }
|
|
14
|
-
});
|
|
15
|
-
//# sourceMappingURL=Composition-PMWLJQPI.cjs.map
|
|
16
|
-
//# sourceMappingURL=Composition-PMWLJQPI.cjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export { CompositionSequence } from './chunk-UI7CEUTP.js';
|
|
2
|
-
import './chunk-4PYVHLIK.js';
|
|
3
|
-
import './chunk-JBDBICS2.js';
|
|
4
|
-
import './chunk-BFRWSV3R.js';
|
|
5
|
-
import './chunk-WGRWFQOB.js';
|
|
6
|
-
//# sourceMappingURL=Composition-ZCRJHBB5.js.map
|
|
7
|
-
//# sourceMappingURL=Composition-ZCRJHBB5.js.map
|