use-scroll-animate 9.2.0 → 9.4.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 +24 -0
- package/dist/components/fx-genart.cjs +137 -0
- package/dist/components/fx-genart.cjs.map +1 -0
- package/dist/components/fx-genart.d.cts +69 -0
- package/dist/components/fx-genart.d.ts +69 -0
- package/dist/components/fx-genart.js +131 -0
- package/dist/components/fx-genart.js.map +1 -0
- package/dist/components/fx-video.cjs +111 -0
- package/dist/components/fx-video.cjs.map +1 -0
- package/dist/components/fx-video.d.cts +80 -0
- package/dist/components/fx-video.d.ts +80 -0
- package/dist/components/fx-video.js +105 -0
- package/dist/components/fx-video.js.map +1 -0
- package/dist/components/fx2.cjs +16 -0
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +61 -1
- package/dist/components/fx2.d.ts +61 -1
- package/dist/components/fx2.js +9 -1
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/marketplace.cjs +2 -0
- package/dist/components/marketplace.cjs.map +1 -1
- package/dist/components/marketplace.js +2 -0
- package/dist/components/marketplace.js.map +1 -1
- package/dist/components/widgets.cjs +619 -177
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +69 -2
- package/dist/components/widgets.d.ts +69 -2
- package/dist/components/widgets.js +615 -178
- package/dist/components/widgets.js.map +1 -1
- package/dist/widgets.umd.js +1 -1
- package/dist/widgets.umd.js.map +1 -1
- package/docs/ROADMAP.md +2 -2
- package/docs/components.md +34 -0
- package/package.json +41 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fx-video.cjs","sources":["../../src/components/fx2/video.ts"],"sourcesContent":["/**\n * 9.4 — Video motion (`motionary/fx/video`, also `motionary/components/fx-video`):\n *\n * - `scrubVideo(video, trigger?)` — scroll-driven video: `currentTime`\n * follows the scroll progress of `trigger` (default the video) through the\n * viewport, eased. Returns a stop function.\n * - `frameSequence(canvas, { count, src | draw }, trigger?)` — an Apple-style\n * image sequence scrubbed by scroll: frame `i` is the image `src(i)`\n * (preloaded) or whatever `draw(ctx, i, w, h)` paints. Returns a stop.\n * - `scrollProgress(el)` — 0 when `el` enters at the bottom, 1 when it leaves\n * at the top.\n *\n * Effects: `film-burn` (enter) — a warm light leak burns across as the\n * element appears; `jump-cut` (attention) — two hard cuts (zoom / reframe)\n * and back, like an edit. Reduced motion: scrubbing shows the first frame,\n * film-burn fades, jump-cut does nothing.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\nimport { onFrame, prefersReducedMotion } from '../base';\n\n/** Scroll progress of `el` through the viewport: 0 entering at the bottom → 1 leaving at the top (9.4). */\nexport function scrollProgress(el: Element): number {\n const r = el.getBoundingClientRect();\n const vh = (typeof innerHeight === 'number' && innerHeight) || 1;\n return Math.min(1, Math.max(0, (vh - r.top) / (vh + r.height || 1)));\n}\n\n/** Scroll-driven video: `video.currentTime` follows the scroll progress of `trigger` (9.4). */\nexport function scrubVideo(video: HTMLVideoElement, trigger: Element = video, opts: { ease?: number } = {}): () => void {\n video.pause();\n if (prefersReducedMotion()) return () => undefined;\n const k = Math.min(1, Math.max(0.02, opts.ease ?? 0.15));\n let cur = 0;\n return onFrame(() => {\n const d = video.duration;\n if (!d || !Number.isFinite(d)) return;\n const target = scrollProgress(trigger) * d;\n cur += (target - cur) * k;\n if (Math.abs(video.currentTime - cur) > 1 / 60) video.currentTime = cur;\n });\n}\n\nexport interface FrameSequenceSource {\n count: number;\n src?: (i: number) => string;\n draw?: (ctx: CanvasRenderingContext2D, i: number, w: number, h: number) => void;\n}\n/** Image-sequence scrubbing on a canvas (preloads `src(i)`, or paints with `draw`) (9.4). */\nexport function frameSequence(canvas: HTMLCanvasElement, seq: FrameSequenceSource, trigger: Element = canvas): () => void {\n const ctx = canvas.getContext?.('2d');\n const n = Math.max(1, Math.floor(seq.count));\n const imgs: HTMLImageElement[] = [];\n if (seq.src && typeof Image !== 'undefined')\n for (let i = 0; i < n; i++) {\n const im = new Image();\n im.decoding = 'async';\n im.src = seq.src(i);\n imgs.push(im);\n }\n let last = -1;\n const paint = (i: number) => {\n if (!ctx || i === last) return;\n const w = canvas.width;\n const h = canvas.height;\n if (seq.draw) {\n ctx.clearRect(0, 0, w, h);\n seq.draw(ctx, i, w, h);\n last = i;\n } else if (imgs[i]?.complete && imgs[i].naturalWidth) {\n const im = imgs[i];\n const s = Math.max(w / im.naturalWidth, h / im.naturalHeight);\n ctx.drawImage(im, (w - im.naturalWidth * s) / 2, (h - im.naturalHeight * s) / 2, im.naturalWidth * s, im.naturalHeight * s);\n last = i;\n }\n };\n paint(0);\n if (prefersReducedMotion()) return () => undefined;\n return onFrame(() => paint(Math.min(n - 1, Math.floor(scrollProgress(trigger) * n))));\n}\n\nexport const VIDEO_FX: EffectDefinition[] = [\n {\n name: 'film-burn',\n kind: 'enter',\n description: 'A warm light leak burns across as the element appears (`color`).',\n defaults: { color: 'rgba(255,140,40,.85)', duration: 1300 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 })?.finished.catch(() => undefined);\n if (getComputedStyle(el).position === 'static') {\n const prev = el.style.position;\n el.style.position = 'relative';\n ctx.onCleanup(() => (el.style.position = prev));\n }\n const leak = document.createElement('span');\n leak.setAttribute('aria-hidden', 'true');\n Object.assign(leak.style, { position: 'absolute', inset: '0', pointerEvents: 'none', borderRadius: 'inherit', background: `radial-gradient(ellipse at 20% 50%, ${o.color}, transparent 60%)`, mixBlendMode: 'screen', backgroundSize: '200% 100%' });\n el.appendChild(leak);\n ctx.onCleanup(() => leak.remove());\n const a = ctx.animate(el, [{ opacity: 0, filter: 'brightness(2.2) sepia(.5)' }, { opacity: 1, filter: 'brightness(1.4) sepia(.2)', offset: 0.4 }, { opacity: 1, filter: 'none' }], { duration: o.duration, delay: o.delay, easing: 'ease-out', fill: 'backwards' });\n const b = ctx.animate(leak, [{ backgroundPosition: '100% 0', opacity: 1 }, { backgroundPosition: '-60% 0', opacity: 0 }], { duration: o.duration, delay: o.delay, easing: 'ease-in-out', fill: 'backwards' });\n const end = () => leak.remove();\n return Promise.all([a?.finished.catch(() => undefined), b?.finished.catch(() => undefined)]).then(end, end);\n },\n },\n {\n name: 'jump-cut',\n kind: 'attention',\n description: 'Two hard cuts (zoom, reframe) and back, like an edit.',\n defaults: { duration: 700 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return;\n return ctx.animate(el, [{ transform: 'none' }, { transform: 'scale(1.18) translate(3%, -2%)', offset: 0.3 }, { transform: 'scale(1.06) translate(-4%, 2%)', offset: 0.6 }, { transform: 'none', offset: 0.9 }, { transform: 'none' }], { duration: o.duration, easing: 'steps(1, end)' })?.finished.catch(() => undefined);\n },\n },\n];\n\n/** Register film-burn and jump-cut (9.4). */\nexport function registerVideoPack(): void {\n registerEffects(VIDEO_FX);\n}\n"],"names":["prefersReducedMotion","onFrame","registerEffects"],"mappings":"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"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
2
|
+
type Cleanup = () => void;
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* 5.0 — unified plugin-style effect registration. Every effect (built-in or
|
|
6
|
+
* yours) is a plain object registered once and played the same way:
|
|
7
|
+
* `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
|
|
8
|
+
* `<usa-fx effect="name" trigger="click">`. Effects get a context that
|
|
9
|
+
* already applies reduced motion, motion sensitivity, intensity and the
|
|
10
|
+
* animation budget.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
declare const EFFECT_KINDS: readonly ["enter", "exit", "attention", "click", "hover", "card", "loop", "page", "background", "text", "cursor", "scroll"];
|
|
14
|
+
type EffectKind = (typeof EFFECT_KINDS)[number];
|
|
15
|
+
interface EffectContext {
|
|
16
|
+
/** Reduced motion applies (OS setting, `minimal` / `static` sensitivity). */
|
|
17
|
+
readonly reduced: boolean;
|
|
18
|
+
readonly sensitivity: MotionSensitivity;
|
|
19
|
+
/** The triggering event (pointer position for click effects), if any. */
|
|
20
|
+
readonly event?: Event;
|
|
21
|
+
/** `el.animate()` with the library's motion rules (may return `null`). */
|
|
22
|
+
animate(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
|
|
23
|
+
/** Register teardown for long-running effects (loops, listeners). */
|
|
24
|
+
onCleanup(fn: Cleanup): void;
|
|
25
|
+
}
|
|
26
|
+
interface EffectDefinition<O extends Record<string, unknown> = Record<string, any>> {
|
|
27
|
+
/** Unique, kebab-case. */
|
|
28
|
+
name: string;
|
|
29
|
+
kind: EffectKind;
|
|
30
|
+
/** One line for docs and the gallery. */
|
|
31
|
+
description?: string;
|
|
32
|
+
/** Option defaults (merged under the caller's options). */
|
|
33
|
+
defaults?: Partial<O>;
|
|
34
|
+
/**
|
|
35
|
+
* Under reduced motion: `'skip'` (do nothing — default for loop, background
|
|
36
|
+
* and cursor effects) or `'run'` (run with `ctx.reduced === true`, the
|
|
37
|
+
* effect degrades itself — default for everything else).
|
|
38
|
+
*/
|
|
39
|
+
reduced?: 'skip' | 'run';
|
|
40
|
+
/** Play the effect. Return an Animation / Promise to be awaited, or a cleanup. */
|
|
41
|
+
run(el: HTMLElement, options: O, ctx: EffectContext): void | Cleanup | Animation | null | Promise<unknown>;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* 9.4 — Video motion (`motionary/fx/video`, also `motionary/components/fx-video`):
|
|
46
|
+
*
|
|
47
|
+
* - `scrubVideo(video, trigger?)` — scroll-driven video: `currentTime`
|
|
48
|
+
* follows the scroll progress of `trigger` (default the video) through the
|
|
49
|
+
* viewport, eased. Returns a stop function.
|
|
50
|
+
* - `frameSequence(canvas, { count, src | draw }, trigger?)` — an Apple-style
|
|
51
|
+
* image sequence scrubbed by scroll: frame `i` is the image `src(i)`
|
|
52
|
+
* (preloaded) or whatever `draw(ctx, i, w, h)` paints. Returns a stop.
|
|
53
|
+
* - `scrollProgress(el)` — 0 when `el` enters at the bottom, 1 when it leaves
|
|
54
|
+
* at the top.
|
|
55
|
+
*
|
|
56
|
+
* Effects: `film-burn` (enter) — a warm light leak burns across as the
|
|
57
|
+
* element appears; `jump-cut` (attention) — two hard cuts (zoom / reframe)
|
|
58
|
+
* and back, like an edit. Reduced motion: scrubbing shows the first frame,
|
|
59
|
+
* film-burn fades, jump-cut does nothing.
|
|
60
|
+
*/
|
|
61
|
+
|
|
62
|
+
/** Scroll progress of `el` through the viewport: 0 entering at the bottom → 1 leaving at the top (9.4). */
|
|
63
|
+
declare function scrollProgress(el: Element): number;
|
|
64
|
+
/** Scroll-driven video: `video.currentTime` follows the scroll progress of `trigger` (9.4). */
|
|
65
|
+
declare function scrubVideo(video: HTMLVideoElement, trigger?: Element, opts?: {
|
|
66
|
+
ease?: number;
|
|
67
|
+
}): () => void;
|
|
68
|
+
interface FrameSequenceSource {
|
|
69
|
+
count: number;
|
|
70
|
+
src?: (i: number) => string;
|
|
71
|
+
draw?: (ctx: CanvasRenderingContext2D, i: number, w: number, h: number) => void;
|
|
72
|
+
}
|
|
73
|
+
/** Image-sequence scrubbing on a canvas (preloads `src(i)`, or paints with `draw`) (9.4). */
|
|
74
|
+
declare function frameSequence(canvas: HTMLCanvasElement, seq: FrameSequenceSource, trigger?: Element): () => void;
|
|
75
|
+
declare const VIDEO_FX: EffectDefinition[];
|
|
76
|
+
/** Register film-burn and jump-cut (9.4). */
|
|
77
|
+
declare function registerVideoPack(): void;
|
|
78
|
+
|
|
79
|
+
export { VIDEO_FX, frameSequence, registerVideoPack, scrollProgress, scrubVideo };
|
|
80
|
+
export type { FrameSequenceSource };
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
2
|
+
type Cleanup = () => void;
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* 5.0 — unified plugin-style effect registration. Every effect (built-in or
|
|
6
|
+
* yours) is a plain object registered once and played the same way:
|
|
7
|
+
* `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
|
|
8
|
+
* `<usa-fx effect="name" trigger="click">`. Effects get a context that
|
|
9
|
+
* already applies reduced motion, motion sensitivity, intensity and the
|
|
10
|
+
* animation budget.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
declare const EFFECT_KINDS: readonly ["enter", "exit", "attention", "click", "hover", "card", "loop", "page", "background", "text", "cursor", "scroll"];
|
|
14
|
+
type EffectKind = (typeof EFFECT_KINDS)[number];
|
|
15
|
+
interface EffectContext {
|
|
16
|
+
/** Reduced motion applies (OS setting, `minimal` / `static` sensitivity). */
|
|
17
|
+
readonly reduced: boolean;
|
|
18
|
+
readonly sensitivity: MotionSensitivity;
|
|
19
|
+
/** The triggering event (pointer position for click effects), if any. */
|
|
20
|
+
readonly event?: Event;
|
|
21
|
+
/** `el.animate()` with the library's motion rules (may return `null`). */
|
|
22
|
+
animate(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
|
|
23
|
+
/** Register teardown for long-running effects (loops, listeners). */
|
|
24
|
+
onCleanup(fn: Cleanup): void;
|
|
25
|
+
}
|
|
26
|
+
interface EffectDefinition<O extends Record<string, unknown> = Record<string, any>> {
|
|
27
|
+
/** Unique, kebab-case. */
|
|
28
|
+
name: string;
|
|
29
|
+
kind: EffectKind;
|
|
30
|
+
/** One line for docs and the gallery. */
|
|
31
|
+
description?: string;
|
|
32
|
+
/** Option defaults (merged under the caller's options). */
|
|
33
|
+
defaults?: Partial<O>;
|
|
34
|
+
/**
|
|
35
|
+
* Under reduced motion: `'skip'` (do nothing — default for loop, background
|
|
36
|
+
* and cursor effects) or `'run'` (run with `ctx.reduced === true`, the
|
|
37
|
+
* effect degrades itself — default for everything else).
|
|
38
|
+
*/
|
|
39
|
+
reduced?: 'skip' | 'run';
|
|
40
|
+
/** Play the effect. Return an Animation / Promise to be awaited, or a cleanup. */
|
|
41
|
+
run(el: HTMLElement, options: O, ctx: EffectContext): void | Cleanup | Animation | null | Promise<unknown>;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* 9.4 — Video motion (`motionary/fx/video`, also `motionary/components/fx-video`):
|
|
46
|
+
*
|
|
47
|
+
* - `scrubVideo(video, trigger?)` — scroll-driven video: `currentTime`
|
|
48
|
+
* follows the scroll progress of `trigger` (default the video) through the
|
|
49
|
+
* viewport, eased. Returns a stop function.
|
|
50
|
+
* - `frameSequence(canvas, { count, src | draw }, trigger?)` — an Apple-style
|
|
51
|
+
* image sequence scrubbed by scroll: frame `i` is the image `src(i)`
|
|
52
|
+
* (preloaded) or whatever `draw(ctx, i, w, h)` paints. Returns a stop.
|
|
53
|
+
* - `scrollProgress(el)` — 0 when `el` enters at the bottom, 1 when it leaves
|
|
54
|
+
* at the top.
|
|
55
|
+
*
|
|
56
|
+
* Effects: `film-burn` (enter) — a warm light leak burns across as the
|
|
57
|
+
* element appears; `jump-cut` (attention) — two hard cuts (zoom / reframe)
|
|
58
|
+
* and back, like an edit. Reduced motion: scrubbing shows the first frame,
|
|
59
|
+
* film-burn fades, jump-cut does nothing.
|
|
60
|
+
*/
|
|
61
|
+
|
|
62
|
+
/** Scroll progress of `el` through the viewport: 0 entering at the bottom → 1 leaving at the top (9.4). */
|
|
63
|
+
declare function scrollProgress(el: Element): number;
|
|
64
|
+
/** Scroll-driven video: `video.currentTime` follows the scroll progress of `trigger` (9.4). */
|
|
65
|
+
declare function scrubVideo(video: HTMLVideoElement, trigger?: Element, opts?: {
|
|
66
|
+
ease?: number;
|
|
67
|
+
}): () => void;
|
|
68
|
+
interface FrameSequenceSource {
|
|
69
|
+
count: number;
|
|
70
|
+
src?: (i: number) => string;
|
|
71
|
+
draw?: (ctx: CanvasRenderingContext2D, i: number, w: number, h: number) => void;
|
|
72
|
+
}
|
|
73
|
+
/** Image-sequence scrubbing on a canvas (preloads `src(i)`, or paints with `draw`) (9.4). */
|
|
74
|
+
declare function frameSequence(canvas: HTMLCanvasElement, seq: FrameSequenceSource, trigger?: Element): () => void;
|
|
75
|
+
declare const VIDEO_FX: EffectDefinition[];
|
|
76
|
+
/** Register film-burn and jump-cut (9.4). */
|
|
77
|
+
declare function registerVideoPack(): void;
|
|
78
|
+
|
|
79
|
+
export { VIDEO_FX, frameSequence, registerVideoPack, scrollProgress, scrubVideo };
|
|
80
|
+
export type { FrameSequenceSource };
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import { registerEffects } from '../chunks/registry-CnO7ZVPK.js';
|
|
2
|
+
import { p as prefersReducedMotion, o as onFrame } from '../chunks/base-CLuqlLfG.js';
|
|
3
|
+
|
|
4
|
+
/** Scroll progress of `el` through the viewport: 0 entering at the bottom → 1 leaving at the top (9.4). */
|
|
5
|
+
function scrollProgress(el) {
|
|
6
|
+
const r = el.getBoundingClientRect();
|
|
7
|
+
const vh = (typeof innerHeight === 'number' && innerHeight) || 1;
|
|
8
|
+
return Math.min(1, Math.max(0, (vh - r.top) / (vh + r.height || 1)));
|
|
9
|
+
}
|
|
10
|
+
/** Scroll-driven video: `video.currentTime` follows the scroll progress of `trigger` (9.4). */
|
|
11
|
+
function scrubVideo(video, trigger = video, opts = {}) {
|
|
12
|
+
video.pause();
|
|
13
|
+
if (prefersReducedMotion())
|
|
14
|
+
return () => undefined;
|
|
15
|
+
const k = Math.min(1, Math.max(0.02, opts.ease ?? 0.15));
|
|
16
|
+
let cur = 0;
|
|
17
|
+
return onFrame(() => {
|
|
18
|
+
const d = video.duration;
|
|
19
|
+
if (!d || !Number.isFinite(d))
|
|
20
|
+
return;
|
|
21
|
+
const target = scrollProgress(trigger) * d;
|
|
22
|
+
cur += (target - cur) * k;
|
|
23
|
+
if (Math.abs(video.currentTime - cur) > 1 / 60)
|
|
24
|
+
video.currentTime = cur;
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
/** Image-sequence scrubbing on a canvas (preloads `src(i)`, or paints with `draw`) (9.4). */
|
|
28
|
+
function frameSequence(canvas, seq, trigger = canvas) {
|
|
29
|
+
const ctx = canvas.getContext?.('2d');
|
|
30
|
+
const n = Math.max(1, Math.floor(seq.count));
|
|
31
|
+
const imgs = [];
|
|
32
|
+
if (seq.src && typeof Image !== 'undefined')
|
|
33
|
+
for (let i = 0; i < n; i++) {
|
|
34
|
+
const im = new Image();
|
|
35
|
+
im.decoding = 'async';
|
|
36
|
+
im.src = seq.src(i);
|
|
37
|
+
imgs.push(im);
|
|
38
|
+
}
|
|
39
|
+
let last = -1;
|
|
40
|
+
const paint = (i) => {
|
|
41
|
+
if (!ctx || i === last)
|
|
42
|
+
return;
|
|
43
|
+
const w = canvas.width;
|
|
44
|
+
const h = canvas.height;
|
|
45
|
+
if (seq.draw) {
|
|
46
|
+
ctx.clearRect(0, 0, w, h);
|
|
47
|
+
seq.draw(ctx, i, w, h);
|
|
48
|
+
last = i;
|
|
49
|
+
}
|
|
50
|
+
else if (imgs[i]?.complete && imgs[i].naturalWidth) {
|
|
51
|
+
const im = imgs[i];
|
|
52
|
+
const s = Math.max(w / im.naturalWidth, h / im.naturalHeight);
|
|
53
|
+
ctx.drawImage(im, (w - im.naturalWidth * s) / 2, (h - im.naturalHeight * s) / 2, im.naturalWidth * s, im.naturalHeight * s);
|
|
54
|
+
last = i;
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
paint(0);
|
|
58
|
+
if (prefersReducedMotion())
|
|
59
|
+
return () => undefined;
|
|
60
|
+
return onFrame(() => paint(Math.min(n - 1, Math.floor(scrollProgress(trigger) * n))));
|
|
61
|
+
}
|
|
62
|
+
const VIDEO_FX = [
|
|
63
|
+
{
|
|
64
|
+
name: 'film-burn',
|
|
65
|
+
kind: 'enter',
|
|
66
|
+
description: 'A warm light leak burns across as the element appears (`color`).',
|
|
67
|
+
defaults: { color: 'rgba(255,140,40,.85)', duration: 1300 },
|
|
68
|
+
run: (el, o, ctx) => {
|
|
69
|
+
if (ctx.reduced)
|
|
70
|
+
return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 })?.finished.catch(() => undefined);
|
|
71
|
+
if (getComputedStyle(el).position === 'static') {
|
|
72
|
+
const prev = el.style.position;
|
|
73
|
+
el.style.position = 'relative';
|
|
74
|
+
ctx.onCleanup(() => (el.style.position = prev));
|
|
75
|
+
}
|
|
76
|
+
const leak = document.createElement('span');
|
|
77
|
+
leak.setAttribute('aria-hidden', 'true');
|
|
78
|
+
Object.assign(leak.style, { position: 'absolute', inset: '0', pointerEvents: 'none', borderRadius: 'inherit', background: `radial-gradient(ellipse at 20% 50%, ${o.color}, transparent 60%)`, mixBlendMode: 'screen', backgroundSize: '200% 100%' });
|
|
79
|
+
el.appendChild(leak);
|
|
80
|
+
ctx.onCleanup(() => leak.remove());
|
|
81
|
+
const a = ctx.animate(el, [{ opacity: 0, filter: 'brightness(2.2) sepia(.5)' }, { opacity: 1, filter: 'brightness(1.4) sepia(.2)', offset: 0.4 }, { opacity: 1, filter: 'none' }], { duration: o.duration, delay: o.delay, easing: 'ease-out', fill: 'backwards' });
|
|
82
|
+
const b = ctx.animate(leak, [{ backgroundPosition: '100% 0', opacity: 1 }, { backgroundPosition: '-60% 0', opacity: 0 }], { duration: o.duration, delay: o.delay, easing: 'ease-in-out', fill: 'backwards' });
|
|
83
|
+
const end = () => leak.remove();
|
|
84
|
+
return Promise.all([a?.finished.catch(() => undefined), b?.finished.catch(() => undefined)]).then(end, end);
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
name: 'jump-cut',
|
|
89
|
+
kind: 'attention',
|
|
90
|
+
description: 'Two hard cuts (zoom, reframe) and back, like an edit.',
|
|
91
|
+
defaults: { duration: 700 },
|
|
92
|
+
run: (el, o, ctx) => {
|
|
93
|
+
if (ctx.reduced)
|
|
94
|
+
return;
|
|
95
|
+
return ctx.animate(el, [{ transform: 'none' }, { transform: 'scale(1.18) translate(3%, -2%)', offset: 0.3 }, { transform: 'scale(1.06) translate(-4%, 2%)', offset: 0.6 }, { transform: 'none', offset: 0.9 }, { transform: 'none' }], { duration: o.duration, easing: 'steps(1, end)' })?.finished.catch(() => undefined);
|
|
96
|
+
},
|
|
97
|
+
},
|
|
98
|
+
];
|
|
99
|
+
/** Register film-burn and jump-cut (9.4). */
|
|
100
|
+
function registerVideoPack() {
|
|
101
|
+
registerEffects(VIDEO_FX);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
export { VIDEO_FX, frameSequence, registerVideoPack, scrollProgress, scrubVideo };
|
|
105
|
+
//# sourceMappingURL=fx-video.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fx-video.js","sources":["../../src/components/fx2/video.ts"],"sourcesContent":["/**\n * 9.4 — Video motion (`motionary/fx/video`, also `motionary/components/fx-video`):\n *\n * - `scrubVideo(video, trigger?)` — scroll-driven video: `currentTime`\n * follows the scroll progress of `trigger` (default the video) through the\n * viewport, eased. Returns a stop function.\n * - `frameSequence(canvas, { count, src | draw }, trigger?)` — an Apple-style\n * image sequence scrubbed by scroll: frame `i` is the image `src(i)`\n * (preloaded) or whatever `draw(ctx, i, w, h)` paints. Returns a stop.\n * - `scrollProgress(el)` — 0 when `el` enters at the bottom, 1 when it leaves\n * at the top.\n *\n * Effects: `film-burn` (enter) — a warm light leak burns across as the\n * element appears; `jump-cut` (attention) — two hard cuts (zoom / reframe)\n * and back, like an edit. Reduced motion: scrubbing shows the first frame,\n * film-burn fades, jump-cut does nothing.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\nimport { onFrame, prefersReducedMotion } from '../base';\n\n/** Scroll progress of `el` through the viewport: 0 entering at the bottom → 1 leaving at the top (9.4). */\nexport function scrollProgress(el: Element): number {\n const r = el.getBoundingClientRect();\n const vh = (typeof innerHeight === 'number' && innerHeight) || 1;\n return Math.min(1, Math.max(0, (vh - r.top) / (vh + r.height || 1)));\n}\n\n/** Scroll-driven video: `video.currentTime` follows the scroll progress of `trigger` (9.4). */\nexport function scrubVideo(video: HTMLVideoElement, trigger: Element = video, opts: { ease?: number } = {}): () => void {\n video.pause();\n if (prefersReducedMotion()) return () => undefined;\n const k = Math.min(1, Math.max(0.02, opts.ease ?? 0.15));\n let cur = 0;\n return onFrame(() => {\n const d = video.duration;\n if (!d || !Number.isFinite(d)) return;\n const target = scrollProgress(trigger) * d;\n cur += (target - cur) * k;\n if (Math.abs(video.currentTime - cur) > 1 / 60) video.currentTime = cur;\n });\n}\n\nexport interface FrameSequenceSource {\n count: number;\n src?: (i: number) => string;\n draw?: (ctx: CanvasRenderingContext2D, i: number, w: number, h: number) => void;\n}\n/** Image-sequence scrubbing on a canvas (preloads `src(i)`, or paints with `draw`) (9.4). */\nexport function frameSequence(canvas: HTMLCanvasElement, seq: FrameSequenceSource, trigger: Element = canvas): () => void {\n const ctx = canvas.getContext?.('2d');\n const n = Math.max(1, Math.floor(seq.count));\n const imgs: HTMLImageElement[] = [];\n if (seq.src && typeof Image !== 'undefined')\n for (let i = 0; i < n; i++) {\n const im = new Image();\n im.decoding = 'async';\n im.src = seq.src(i);\n imgs.push(im);\n }\n let last = -1;\n const paint = (i: number) => {\n if (!ctx || i === last) return;\n const w = canvas.width;\n const h = canvas.height;\n if (seq.draw) {\n ctx.clearRect(0, 0, w, h);\n seq.draw(ctx, i, w, h);\n last = i;\n } else if (imgs[i]?.complete && imgs[i].naturalWidth) {\n const im = imgs[i];\n const s = Math.max(w / im.naturalWidth, h / im.naturalHeight);\n ctx.drawImage(im, (w - im.naturalWidth * s) / 2, (h - im.naturalHeight * s) / 2, im.naturalWidth * s, im.naturalHeight * s);\n last = i;\n }\n };\n paint(0);\n if (prefersReducedMotion()) return () => undefined;\n return onFrame(() => paint(Math.min(n - 1, Math.floor(scrollProgress(trigger) * n))));\n}\n\nexport const VIDEO_FX: EffectDefinition[] = [\n {\n name: 'film-burn',\n kind: 'enter',\n description: 'A warm light leak burns across as the element appears (`color`).',\n defaults: { color: 'rgba(255,140,40,.85)', duration: 1300 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 })?.finished.catch(() => undefined);\n if (getComputedStyle(el).position === 'static') {\n const prev = el.style.position;\n el.style.position = 'relative';\n ctx.onCleanup(() => (el.style.position = prev));\n }\n const leak = document.createElement('span');\n leak.setAttribute('aria-hidden', 'true');\n Object.assign(leak.style, { position: 'absolute', inset: '0', pointerEvents: 'none', borderRadius: 'inherit', background: `radial-gradient(ellipse at 20% 50%, ${o.color}, transparent 60%)`, mixBlendMode: 'screen', backgroundSize: '200% 100%' });\n el.appendChild(leak);\n ctx.onCleanup(() => leak.remove());\n const a = ctx.animate(el, [{ opacity: 0, filter: 'brightness(2.2) sepia(.5)' }, { opacity: 1, filter: 'brightness(1.4) sepia(.2)', offset: 0.4 }, { opacity: 1, filter: 'none' }], { duration: o.duration, delay: o.delay, easing: 'ease-out', fill: 'backwards' });\n const b = ctx.animate(leak, [{ backgroundPosition: '100% 0', opacity: 1 }, { backgroundPosition: '-60% 0', opacity: 0 }], { duration: o.duration, delay: o.delay, easing: 'ease-in-out', fill: 'backwards' });\n const end = () => leak.remove();\n return Promise.all([a?.finished.catch(() => undefined), b?.finished.catch(() => undefined)]).then(end, end);\n },\n },\n {\n name: 'jump-cut',\n kind: 'attention',\n description: 'Two hard cuts (zoom, reframe) and back, like an edit.',\n defaults: { duration: 700 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return;\n return ctx.animate(el, [{ transform: 'none' }, { transform: 'scale(1.18) translate(3%, -2%)', offset: 0.3 }, { transform: 'scale(1.06) translate(-4%, 2%)', offset: 0.6 }, { transform: 'none', offset: 0.9 }, { transform: 'none' }], { duration: o.duration, easing: 'steps(1, end)' })?.finished.catch(() => undefined);\n },\n },\n];\n\n/** Register film-burn and jump-cut (9.4). */\nexport function registerVideoPack(): void {\n registerEffects(VIDEO_FX);\n}\n"],"names":[],"mappings":"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"}
|
package/dist/components/fx2.cjs
CHANGED
|
@@ -28,6 +28,8 @@ var components_fxGesture = require('./fx-gesture.cjs');
|
|
|
28
28
|
var components_fxSpatial = require('./fx-spatial.cjs');
|
|
29
29
|
var components_fxCinema = require('./fx-cinema.cjs');
|
|
30
30
|
var components_fxLottie = require('./fx-lottie.cjs');
|
|
31
|
+
var components_fxGenart = require('./fx-genart.cjs');
|
|
32
|
+
var components_fxVideo = require('./fx-video.cjs');
|
|
31
33
|
require('../chunks/registry-BVklOepd.cjs');
|
|
32
34
|
require('../chunks/base-DoRUZBy-.cjs');
|
|
33
35
|
require('../chunks/generative-BHIj-NU0.cjs');
|
|
@@ -63,6 +65,8 @@ const EFFECT_PACKS = {
|
|
|
63
65
|
spatial: components_fxSpatial.SPATIAL_FX,
|
|
64
66
|
cinema: components_fxCinema.CINEMA_FX,
|
|
65
67
|
lottie: components_fxLottie.LOTTIE_FX,
|
|
68
|
+
genart: components_fxGenart.GENART_FX,
|
|
69
|
+
video: components_fxVideo.VIDEO_FX,
|
|
66
70
|
};
|
|
67
71
|
/** Register every 6.x effect pack (idempotent). */
|
|
68
72
|
function registerEffectPacks() {
|
|
@@ -93,6 +97,8 @@ function registerEffectPacks() {
|
|
|
93
97
|
components_fxSpatial.registerSpatialPack();
|
|
94
98
|
components_fxCinema.registerCinemaPack();
|
|
95
99
|
components_fxLottie.registerLottiePack();
|
|
100
|
+
components_fxGenart.registerGenArtPack();
|
|
101
|
+
components_fxVideo.registerVideoPack();
|
|
96
102
|
}
|
|
97
103
|
|
|
98
104
|
exports.EFFECT_PACK_FORMAT = manifest.EFFECT_PACK_FORMAT;
|
|
@@ -197,6 +203,16 @@ exports.lottieToKeyframes = components_fxLottie.lottieToKeyframes;
|
|
|
197
203
|
exports.lottieToSvg = components_fxLottie.lottieToSvg;
|
|
198
204
|
exports.registerLottiePack = components_fxLottie.registerLottiePack;
|
|
199
205
|
exports.riveInputs = components_fxLottie.riveInputs;
|
|
206
|
+
exports.GENART_FX = components_fxGenart.GENART_FX;
|
|
207
|
+
exports.PALETTES = components_fxGenart.PALETTES;
|
|
208
|
+
exports.meshGradient = components_fxGenart.meshGradient;
|
|
209
|
+
exports.registerGenArtPack = components_fxGenart.registerGenArtPack;
|
|
210
|
+
exports.seededRandom = components_fxGenart.seededRandom;
|
|
211
|
+
exports.VIDEO_FX = components_fxVideo.VIDEO_FX;
|
|
212
|
+
exports.frameSequence = components_fxVideo.frameSequence;
|
|
213
|
+
exports.registerVideoPack = components_fxVideo.registerVideoPack;
|
|
214
|
+
exports.scrollProgress = components_fxVideo.scrollProgress;
|
|
215
|
+
exports.scrubVideo = components_fxVideo.scrubVideo;
|
|
200
216
|
exports.EFFECT_PACKS = EFFECT_PACKS;
|
|
201
217
|
exports.registerEffectPacks = registerEffectPacks;
|
|
202
218
|
//# sourceMappingURL=fx2.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fx2.cjs","sources":["../../src/components/fx2/index.ts"],"sourcesContent":["/**\n * The 6.x effect packs, one entry each (`motionary/components/fx-gpu`, …) so\n * their size budgets stay separate. This module (`registerFx2()`) registers\n * them all — used by dist/widgets.umd.js and the showcase.\n */\nimport type { EffectDefinition } from '../fx/registry';\nexport { EFFECT_PACK_FORMAT, packManifest, validateManifest, loadEffectPack } from './manifest';\nexport type { EffectPackManifest } from './manifest';\nimport { GPU_FX, registerGpuPack } from './gpu';\nimport { TEXT3_FX, registerTextPack, splitChars } from './text3';\nimport { LIGHT_FX, registerLightPack, trackPointer } from './light';\nimport { DEPTH3_FX, register3dPack } from './depth3';\nimport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath } from './morph2';\nimport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions } from './transitions2';\nimport { WEATHER_FX, registerWeatherPack, skyAt } from './weather';\nimport { PHYSICS2_FX, registerPhysicsPack, VerletWorld } from './physics2';\nimport { FOCUS_FX, registerFocusPack } from './focus';\nimport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample } from './music';\nimport { CHART_FX, registerChartPack, parseFigure } from './chart';\nimport { SHOP_FX, registerShopPack, arcPath } from './shop';\nimport { SOCIAL_FX, registerSocialPack, fanAngles } from './social';\nimport { GAME_FX, registerGamePack, throwPath } from './game';\nimport { GEO_FX, registerGeoPack, routeLength } from './geo';\nimport { FORM_FX, registerFormPack, shakeFrames } from './form';\nimport { AI_FX, registerAiPack, splitWords } from './ai';\nimport { FESTIVAL_FX, registerFestivalPack, sparkVectors } from './festival';\nimport { RETRO_FX, registerRetroPack, pixelSteps } from './retro2';\nimport { ORGANIC_FX, registerOrganicPack, blobRadius } from './organic';\nimport { CYBER_FX, registerCyberPack, decodeFrame } from './cyber';\nimport { PAPER_FX, registerPaperPack, roughLine, paperRandom } from './paper';\nimport { SURFACE_FX, registerSurfacePack, SURFACE_THEMES, applySurfaceTheme } from './themefx';\nimport { GESTURE3_FX, registerGesture3Pack, pinchScale, pinchAngle, orientationToTilt } from './gesture3';\nimport { SPATIAL_FX, registerSpatialPack, yawToOffset, xrSupport } from './spatial';\nimport { CINEMA_FX, registerCinemaPack, cameraFrame, CAMERA_MOVES } from './cinema';\nimport { LOTTIE_FX, registerLottiePack, lottieToKeyframes, lottieToSvg, riveInputs } from './lottie';\n\nexport { GPU_FX, registerGpuPack, TEXT3_FX, registerTextPack, splitChars };\nexport { shaderBackground, supportsWebGL2, fieldFallback, GLSL_HEAD } from './gl';\nexport { supportsWebGPU, glslToWgsl, wgslModule, webgpuBackground, WGSL_HEAD } from './webgpu';\nexport type { ShaderSpec } from './gl';\n\nexport { LIGHT_FX, registerLightPack, trackPointer };\n\nexport { DEPTH3_FX, register3dPack };\n\nexport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath };\n\nexport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions };\n\nexport { WEATHER_FX, registerWeatherPack, skyAt };\n\nexport { PHYSICS2_FX, registerPhysicsPack, VerletWorld };\n\nexport { FOCUS_FX, registerFocusPack };\n\nexport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample };\n\nexport { CHART_FX, registerChartPack, parseFigure };\n\nexport { SHOP_FX, registerShopPack, arcPath };\n\nexport { SOCIAL_FX, registerSocialPack, fanAngles };\n\nexport { GAME_FX, registerGamePack, throwPath };\n\nexport { GEO_FX, registerGeoPack, routeLength };\n\nexport { FORM_FX, registerFormPack, shakeFrames };\n\nexport { AI_FX, registerAiPack, splitWords };\n\nexport { FESTIVAL_FX, registerFestivalPack, sparkVectors };\n\nexport { RETRO_FX, registerRetroPack, pixelSteps };\n\nexport { ORGANIC_FX, registerOrganicPack, blobRadius };\n\nexport { CYBER_FX, registerCyberPack, decodeFrame };\n\nexport { PAPER_FX, registerPaperPack, roughLine, paperRandom };\n\nexport { SURFACE_FX, registerSurfacePack, SURFACE_THEMES, applySurfaceTheme };\n\nexport { GESTURE3_FX, registerGesture3Pack, pinchScale, pinchAngle, orientationToTilt };\n\nexport { SPATIAL_FX, registerSpatialPack, yawToOffset, xrSupport };\n\nexport { CINEMA_FX, registerCinemaPack, cameraFrame, CAMERA_MOVES };\n\nexport { LOTTIE_FX, registerLottiePack, lottieToKeyframes, lottieToSvg, riveInputs };\n\n/** The 6.x effect packs by name. */\nexport const EFFECT_PACKS: Record<string, EffectDefinition[]> = {\n gpu: GPU_FX,\n text: TEXT3_FX,\n light: LIGHT_FX,\n depth: DEPTH3_FX,\n morph: MORPH2_FX,\n transitions: TRANSITIONS2_FX,\n weather: WEATHER_FX,\n physics: PHYSICS2_FX,\n focus: FOCUS_FX,\n music: MUSIC_FX,\n chart: CHART_FX,\n shop: SHOP_FX,\n social: SOCIAL_FX,\n game: GAME_FX,\n geo: GEO_FX,\n form: FORM_FX,\n ai: AI_FX,\n festival: FESTIVAL_FX,\n retro: RETRO_FX,\n organic: ORGANIC_FX,\n cyber: CYBER_FX,\n paper: PAPER_FX,\n surface: SURFACE_FX,\n gesture3: GESTURE3_FX,\n spatial: SPATIAL_FX,\n cinema: CINEMA_FX,\n lottie: LOTTIE_FX,\n};\n\n/** Register every 6.x effect pack (idempotent). */\nexport function registerEffectPacks(): void {\n registerGpuPack();\n registerTextPack();\n registerLightPack();\n register3dPack();\n registerMorphPack();\n registerTransitionsPack();\n registerWeatherPack();\n registerPhysicsPack();\n registerFocusPack();\n registerMusicPack();\n registerChartPack();\n registerShopPack();\n registerSocialPack();\n registerGamePack();\n registerGeoPack();\n registerFormPack();\n registerAiPack();\n registerFestivalPack();\n registerRetroPack();\n registerOrganicPack();\n registerCyberPack();\n registerPaperPack();\n registerSurfacePack();\n registerGesture3Pack();\n registerSpatialPack();\n registerCinemaPack();\n registerLottiePack();\n}\n\n\n"],"names":["GPU_FX","TEXT3_FX","LIGHT_FX","DEPTH3_FX","MORPH2_FX","TRANSITIONS2_FX","WEATHER_FX","PHYSICS2_FX","FOCUS_FX","MUSIC_FX","CHART_FX","SHOP_FX","SOCIAL_FX","GAME_FX","GEO_FX","FORM_FX","AI_FX","FESTIVAL_FX","RETRO_FX","ORGANIC_FX","CYBER_FX","PAPER_FX","SURFACE_FX","GESTURE3_FX","SPATIAL_FX","CINEMA_FX","LOTTIE_FX","registerGpuPack","registerTextPack","registerLightPack","register3dPack","registerMorphPack","registerTransitionsPack","registerWeatherPack","registerPhysicsPack","registerFocusPack","registerMusicPack","registerChartPack","registerShopPack","registerSocialPack","registerGamePack","registerGeoPack","registerFormPack","registerAiPack","registerFestivalPack","registerRetroPack","registerOrganicPack","registerCyberPack","registerPaperPack","registerSurfacePack","registerGesture3Pack","registerSpatialPack","registerCinemaPack","registerLottiePack"],"mappings":"
|
|
1
|
+
{"version":3,"file":"fx2.cjs","sources":["../../src/components/fx2/index.ts"],"sourcesContent":["/**\n * The 6.x effect packs, one entry each (`motionary/components/fx-gpu`, …) so\n * their size budgets stay separate. This module (`registerFx2()`) registers\n * them all — used by dist/widgets.umd.js and the showcase.\n */\nimport type { EffectDefinition } from '../fx/registry';\nexport { EFFECT_PACK_FORMAT, packManifest, validateManifest, loadEffectPack } from './manifest';\nexport type { EffectPackManifest } from './manifest';\nimport { GPU_FX, registerGpuPack } from './gpu';\nimport { TEXT3_FX, registerTextPack, splitChars } from './text3';\nimport { LIGHT_FX, registerLightPack, trackPointer } from './light';\nimport { DEPTH3_FX, register3dPack } from './depth3';\nimport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath } from './morph2';\nimport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions } from './transitions2';\nimport { WEATHER_FX, registerWeatherPack, skyAt } from './weather';\nimport { PHYSICS2_FX, registerPhysicsPack, VerletWorld } from './physics2';\nimport { FOCUS_FX, registerFocusPack } from './focus';\nimport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample } from './music';\nimport { CHART_FX, registerChartPack, parseFigure } from './chart';\nimport { SHOP_FX, registerShopPack, arcPath } from './shop';\nimport { SOCIAL_FX, registerSocialPack, fanAngles } from './social';\nimport { GAME_FX, registerGamePack, throwPath } from './game';\nimport { GEO_FX, registerGeoPack, routeLength } from './geo';\nimport { FORM_FX, registerFormPack, shakeFrames } from './form';\nimport { AI_FX, registerAiPack, splitWords } from './ai';\nimport { FESTIVAL_FX, registerFestivalPack, sparkVectors } from './festival';\nimport { RETRO_FX, registerRetroPack, pixelSteps } from './retro2';\nimport { ORGANIC_FX, registerOrganicPack, blobRadius } from './organic';\nimport { CYBER_FX, registerCyberPack, decodeFrame } from './cyber';\nimport { PAPER_FX, registerPaperPack, roughLine, paperRandom } from './paper';\nimport { SURFACE_FX, registerSurfacePack, SURFACE_THEMES, applySurfaceTheme } from './themefx';\nimport { GESTURE3_FX, registerGesture3Pack, pinchScale, pinchAngle, orientationToTilt } from './gesture3';\nimport { SPATIAL_FX, registerSpatialPack, yawToOffset, xrSupport } from './spatial';\nimport { CINEMA_FX, registerCinemaPack, cameraFrame, CAMERA_MOVES } from './cinema';\nimport { LOTTIE_FX, registerLottiePack, lottieToKeyframes, lottieToSvg, riveInputs } from './lottie';\nimport { GENART_FX, registerGenArtPack, PALETTES, seededRandom, meshGradient } from './genart';\nimport { VIDEO_FX, registerVideoPack, scrollProgress, scrubVideo, frameSequence } from './video';\n\nexport { GPU_FX, registerGpuPack, TEXT3_FX, registerTextPack, splitChars };\nexport { shaderBackground, supportsWebGL2, fieldFallback, GLSL_HEAD } from './gl';\nexport { supportsWebGPU, glslToWgsl, wgslModule, webgpuBackground, WGSL_HEAD } from './webgpu';\nexport type { ShaderSpec } from './gl';\n\nexport { LIGHT_FX, registerLightPack, trackPointer };\n\nexport { DEPTH3_FX, register3dPack };\n\nexport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath };\n\nexport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions };\n\nexport { WEATHER_FX, registerWeatherPack, skyAt };\n\nexport { PHYSICS2_FX, registerPhysicsPack, VerletWorld };\n\nexport { FOCUS_FX, registerFocusPack };\n\nexport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample };\n\nexport { CHART_FX, registerChartPack, parseFigure };\n\nexport { SHOP_FX, registerShopPack, arcPath };\n\nexport { SOCIAL_FX, registerSocialPack, fanAngles };\n\nexport { GAME_FX, registerGamePack, throwPath };\n\nexport { GEO_FX, registerGeoPack, routeLength };\n\nexport { FORM_FX, registerFormPack, shakeFrames };\n\nexport { AI_FX, registerAiPack, splitWords };\n\nexport { FESTIVAL_FX, registerFestivalPack, sparkVectors };\n\nexport { RETRO_FX, registerRetroPack, pixelSteps };\n\nexport { ORGANIC_FX, registerOrganicPack, blobRadius };\n\nexport { CYBER_FX, registerCyberPack, decodeFrame };\n\nexport { PAPER_FX, registerPaperPack, roughLine, paperRandom };\n\nexport { SURFACE_FX, registerSurfacePack, SURFACE_THEMES, applySurfaceTheme };\n\nexport { GESTURE3_FX, registerGesture3Pack, pinchScale, pinchAngle, orientationToTilt };\n\nexport { SPATIAL_FX, registerSpatialPack, yawToOffset, xrSupport };\n\nexport { CINEMA_FX, registerCinemaPack, cameraFrame, CAMERA_MOVES };\n\nexport { LOTTIE_FX, registerLottiePack, lottieToKeyframes, lottieToSvg, riveInputs };\n\nexport { GENART_FX, registerGenArtPack, PALETTES, seededRandom, meshGradient };\n\nexport { VIDEO_FX, registerVideoPack, scrollProgress, scrubVideo, frameSequence };\n\n/** The 6.x effect packs by name. */\nexport const EFFECT_PACKS: Record<string, EffectDefinition[]> = {\n gpu: GPU_FX,\n text: TEXT3_FX,\n light: LIGHT_FX,\n depth: DEPTH3_FX,\n morph: MORPH2_FX,\n transitions: TRANSITIONS2_FX,\n weather: WEATHER_FX,\n physics: PHYSICS2_FX,\n focus: FOCUS_FX,\n music: MUSIC_FX,\n chart: CHART_FX,\n shop: SHOP_FX,\n social: SOCIAL_FX,\n game: GAME_FX,\n geo: GEO_FX,\n form: FORM_FX,\n ai: AI_FX,\n festival: FESTIVAL_FX,\n retro: RETRO_FX,\n organic: ORGANIC_FX,\n cyber: CYBER_FX,\n paper: PAPER_FX,\n surface: SURFACE_FX,\n gesture3: GESTURE3_FX,\n spatial: SPATIAL_FX,\n cinema: CINEMA_FX,\n lottie: LOTTIE_FX,\n genart: GENART_FX,\n video: VIDEO_FX,\n};\n\n/** Register every 6.x effect pack (idempotent). */\nexport function registerEffectPacks(): void {\n registerGpuPack();\n registerTextPack();\n registerLightPack();\n register3dPack();\n registerMorphPack();\n registerTransitionsPack();\n registerWeatherPack();\n registerPhysicsPack();\n registerFocusPack();\n registerMusicPack();\n registerChartPack();\n registerShopPack();\n registerSocialPack();\n registerGamePack();\n registerGeoPack();\n registerFormPack();\n registerAiPack();\n registerFestivalPack();\n registerRetroPack();\n registerOrganicPack();\n registerCyberPack();\n registerPaperPack();\n registerSurfacePack();\n registerGesture3Pack();\n registerSpatialPack();\n registerCinemaPack();\n registerLottiePack();\n registerGenArtPack();\n registerVideoPack();\n}\n\n\n"],"names":["GPU_FX","TEXT3_FX","LIGHT_FX","DEPTH3_FX","MORPH2_FX","TRANSITIONS2_FX","WEATHER_FX","PHYSICS2_FX","FOCUS_FX","MUSIC_FX","CHART_FX","SHOP_FX","SOCIAL_FX","GAME_FX","GEO_FX","FORM_FX","AI_FX","FESTIVAL_FX","RETRO_FX","ORGANIC_FX","CYBER_FX","PAPER_FX","SURFACE_FX","GESTURE3_FX","SPATIAL_FX","CINEMA_FX","LOTTIE_FX","GENART_FX","VIDEO_FX","registerGpuPack","registerTextPack","registerLightPack","register3dPack","registerMorphPack","registerTransitionsPack","registerWeatherPack","registerPhysicsPack","registerFocusPack","registerMusicPack","registerChartPack","registerShopPack","registerSocialPack","registerGamePack","registerGeoPack","registerFormPack","registerAiPack","registerFestivalPack","registerRetroPack","registerOrganicPack","registerCyberPack","registerPaperPack","registerSurfacePack","registerGesture3Pack","registerSpatialPack","registerCinemaPack","registerLottiePack","registerGenArtPack","registerVideoPack"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGA;AACO,MAAM,YAAY,GAAuC;AAC9D,IAAA,GAAG,EAAEA,uBAAM;AACX,IAAA,IAAI,EAAEC,0BAAQ;AACd,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,yBAAS;AAChB,IAAA,KAAK,EAAEC,4BAAS;AAChB,IAAA,WAAW,EAAEC,wCAAe;AAC5B,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,OAAO,EAAEC,gCAAW;AACpB,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,IAAI,EAAEC,yBAAO;AACb,IAAA,MAAM,EAAEC,6BAAS;AACjB,IAAA,IAAI,EAAEC,yBAAO;AACb,IAAA,GAAG,EAAEC,uBAAM;AACX,IAAA,IAAI,EAAEC,yBAAO;AACb,IAAA,EAAE,EAAEC,qBAAK;AACT,IAAA,QAAQ,EAAEC,iCAAW;AACrB,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,QAAQ,EAAEC,gCAAW;AACrB,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,MAAM,EAAEC,6BAAS;AACjB,IAAA,MAAM,EAAEC,6BAAS;AACjB,IAAA,MAAM,EAAEC,6BAAS;AACjB,IAAA,KAAK,EAAEC,2BAAQ;;AAGjB;SACgB,mBAAmB,GAAA;AACjC,IAAAC,gCAAe,EAAE;AACjB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,8BAAc,EAAE;AAChB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,gDAAuB,EAAE;AACzB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,sCAAkB,EAAE;AACpB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,gCAAe,EAAE;AACjB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,8BAAc,EAAE;AAChB,IAAAC,0CAAoB,EAAE;AACtB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,yCAAoB,EAAE;AACtB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,sCAAkB,EAAE;AACpB,IAAAC,sCAAkB,EAAE;AACpB,IAAAC,sCAAkB,EAAE;AACpB,IAAAC,oCAAiB,EAAE;AACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -847,6 +847,66 @@ declare const LOTTIE_FX: EffectDefinition[];
|
|
|
847
847
|
/** Register lottie-play and icon-pop (9.2). */
|
|
848
848
|
declare function registerLottiePack(): void;
|
|
849
849
|
|
|
850
|
+
/**
|
|
851
|
+
* 9.3 — Generative art 2.0 pack (`motionary/fx/genart`, also `motionary/components/fx-genart`):
|
|
852
|
+
*
|
|
853
|
+
* - `halftone-in` (enter) — the element prints in through a growing
|
|
854
|
+
* halftone dot screen, like a comic-book plate (`dot`).
|
|
855
|
+
* - `mesh-drift` (loop) — a seeded mesh-gradient background that slowly
|
|
856
|
+
* drifts (`seed`, `palette`).
|
|
857
|
+
* - `kaleido` (loop) — a kaleidoscopic conic overlay that turns slowly
|
|
858
|
+
* (`color`, `segments`).
|
|
859
|
+
* - `grain-flicker` (loop) — animated film grain over the element.
|
|
860
|
+
*
|
|
861
|
+
* `PALETTES`, `seededRandom(seed)`, `meshGradient(seed, palette)` (a CSS
|
|
862
|
+
* background string) are shared with `<usa-bg-generator>` and
|
|
863
|
+
* `<usa-gen-art>`. Reduced motion: halftone-in fades, loops are skipped.
|
|
864
|
+
*/
|
|
865
|
+
|
|
866
|
+
declare const PALETTES: Record<string, string[]>;
|
|
867
|
+
/** Deterministic PRNG in [0, 1) (mulberry32) (9.3). */
|
|
868
|
+
declare function seededRandom(seed: number): () => number;
|
|
869
|
+
/** A seeded mesh-gradient CSS background (4 radial blobs over a base colour) (9.3). */
|
|
870
|
+
declare function meshGradient(seed?: number, palette?: string | string[]): string;
|
|
871
|
+
declare const GENART_FX: EffectDefinition[];
|
|
872
|
+
/** Register halftone-in, mesh-drift, kaleido and grain-flicker (9.3). */
|
|
873
|
+
declare function registerGenArtPack(): void;
|
|
874
|
+
|
|
875
|
+
/**
|
|
876
|
+
* 9.4 — Video motion (`motionary/fx/video`, also `motionary/components/fx-video`):
|
|
877
|
+
*
|
|
878
|
+
* - `scrubVideo(video, trigger?)` — scroll-driven video: `currentTime`
|
|
879
|
+
* follows the scroll progress of `trigger` (default the video) through the
|
|
880
|
+
* viewport, eased. Returns a stop function.
|
|
881
|
+
* - `frameSequence(canvas, { count, src | draw }, trigger?)` — an Apple-style
|
|
882
|
+
* image sequence scrubbed by scroll: frame `i` is the image `src(i)`
|
|
883
|
+
* (preloaded) or whatever `draw(ctx, i, w, h)` paints. Returns a stop.
|
|
884
|
+
* - `scrollProgress(el)` — 0 when `el` enters at the bottom, 1 when it leaves
|
|
885
|
+
* at the top.
|
|
886
|
+
*
|
|
887
|
+
* Effects: `film-burn` (enter) — a warm light leak burns across as the
|
|
888
|
+
* element appears; `jump-cut` (attention) — two hard cuts (zoom / reframe)
|
|
889
|
+
* and back, like an edit. Reduced motion: scrubbing shows the first frame,
|
|
890
|
+
* film-burn fades, jump-cut does nothing.
|
|
891
|
+
*/
|
|
892
|
+
|
|
893
|
+
/** Scroll progress of `el` through the viewport: 0 entering at the bottom → 1 leaving at the top (9.4). */
|
|
894
|
+
declare function scrollProgress(el: Element): number;
|
|
895
|
+
/** Scroll-driven video: `video.currentTime` follows the scroll progress of `trigger` (9.4). */
|
|
896
|
+
declare function scrubVideo(video: HTMLVideoElement, trigger?: Element, opts?: {
|
|
897
|
+
ease?: number;
|
|
898
|
+
}): () => void;
|
|
899
|
+
interface FrameSequenceSource {
|
|
900
|
+
count: number;
|
|
901
|
+
src?: (i: number) => string;
|
|
902
|
+
draw?: (ctx: CanvasRenderingContext2D, i: number, w: number, h: number) => void;
|
|
903
|
+
}
|
|
904
|
+
/** Image-sequence scrubbing on a canvas (preloads `src(i)`, or paints with `draw`) (9.4). */
|
|
905
|
+
declare function frameSequence(canvas: HTMLCanvasElement, seq: FrameSequenceSource, trigger?: Element): () => void;
|
|
906
|
+
declare const VIDEO_FX: EffectDefinition[];
|
|
907
|
+
/** Register film-burn and jump-cut (9.4). */
|
|
908
|
+
declare function registerVideoPack(): void;
|
|
909
|
+
|
|
850
910
|
/**
|
|
851
911
|
* 5.5 — generative backgrounds on Canvas 2D, registered through
|
|
852
912
|
* `registerEffect()` (kind `background`): `flow-field`, `voronoi`,
|
|
@@ -956,5 +1016,5 @@ declare const EFFECT_PACKS: Record<string, EffectDefinition[]>;
|
|
|
956
1016
|
/** Register every 6.x effect pack (idempotent). */
|
|
957
1017
|
declare function registerEffectPacks(): void;
|
|
958
1018
|
|
|
959
|
-
export { AI_FX, CAMERA_MOVES, CHART_FX, CINEMA_FX, CYBER_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FESTIVAL_FX, FOCUS_FX, FORM_FX, GAME_FX, GEO_FX, GESTURE3_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, LOTTIE_FX, MORPH2_FX, MUSIC_FX, ORGANIC_FX, PAPER_FX, PHYSICS2_FX, RETRO_FX, SHOP_FX, SOCIAL_FX, SPATIAL_FX, SURFACE_FX, SURFACE_THEMES, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, applySurfaceTheme, arcPath, blobRadius, cameraFrame, crossDocumentTransitions, decodeFrame, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, lottieToKeyframes, lottieToSvg, musicSample, orientationToTilt, packManifest, pageTransition, paperRandom, parseFigure, pinchAngle, pinchScale, pixelSteps, pointsToPath, register3dPack, registerAiPack, registerChartPack, registerCinemaPack, registerCyberPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGesture3Pack, registerGpuPack, registerLightPack, registerLottiePack, registerMorphPack, registerMusicPack, registerOrganicPack, registerPaperPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerSpatialPack, registerSurfacePack, registerTextPack, registerTransitionsPack, registerWeatherPack, riveInputs, roughLine, routeLength, samplePath, shaderBackground, shakeFrames, skyAt, sparkVectors, splitChars, splitWords, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule, xrSupport, yawToOffset };
|
|
1019
|
+
export { AI_FX, CAMERA_MOVES, CHART_FX, CINEMA_FX, CYBER_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FESTIVAL_FX, FOCUS_FX, FORM_FX, GAME_FX, GENART_FX, GEO_FX, GESTURE3_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, LOTTIE_FX, MORPH2_FX, MUSIC_FX, ORGANIC_FX, PALETTES, PAPER_FX, PHYSICS2_FX, RETRO_FX, SHOP_FX, SOCIAL_FX, SPATIAL_FX, SURFACE_FX, SURFACE_THEMES, TEXT3_FX, TRANSITIONS2_FX, VIDEO_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, applySurfaceTheme, arcPath, blobRadius, cameraFrame, crossDocumentTransitions, decodeFrame, fanAngles, fieldFallback, frameSequence, glslToWgsl, loadEffectPack, lottieToKeyframes, lottieToSvg, meshGradient, musicSample, orientationToTilt, packManifest, pageTransition, paperRandom, parseFigure, pinchAngle, pinchScale, pixelSteps, pointsToPath, register3dPack, registerAiPack, registerChartPack, registerCinemaPack, registerCyberPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGenArtPack, registerGeoPack, registerGesture3Pack, registerGpuPack, registerLightPack, registerLottiePack, registerMorphPack, registerMusicPack, registerOrganicPack, registerPaperPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerSpatialPack, registerSurfacePack, registerTextPack, registerTransitionsPack, registerVideoPack, registerWeatherPack, riveInputs, roughLine, routeLength, samplePath, scrollProgress, scrubVideo, seededRandom, shaderBackground, shakeFrames, skyAt, sparkVectors, splitChars, splitWords, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule, xrSupport, yawToOffset };
|
|
960
1020
|
export type { EffectPackManifest, ShaderSpec };
|
package/dist/components/fx2.d.ts
CHANGED
|
@@ -847,6 +847,66 @@ declare const LOTTIE_FX: EffectDefinition[];
|
|
|
847
847
|
/** Register lottie-play and icon-pop (9.2). */
|
|
848
848
|
declare function registerLottiePack(): void;
|
|
849
849
|
|
|
850
|
+
/**
|
|
851
|
+
* 9.3 — Generative art 2.0 pack (`motionary/fx/genart`, also `motionary/components/fx-genart`):
|
|
852
|
+
*
|
|
853
|
+
* - `halftone-in` (enter) — the element prints in through a growing
|
|
854
|
+
* halftone dot screen, like a comic-book plate (`dot`).
|
|
855
|
+
* - `mesh-drift` (loop) — a seeded mesh-gradient background that slowly
|
|
856
|
+
* drifts (`seed`, `palette`).
|
|
857
|
+
* - `kaleido` (loop) — a kaleidoscopic conic overlay that turns slowly
|
|
858
|
+
* (`color`, `segments`).
|
|
859
|
+
* - `grain-flicker` (loop) — animated film grain over the element.
|
|
860
|
+
*
|
|
861
|
+
* `PALETTES`, `seededRandom(seed)`, `meshGradient(seed, palette)` (a CSS
|
|
862
|
+
* background string) are shared with `<usa-bg-generator>` and
|
|
863
|
+
* `<usa-gen-art>`. Reduced motion: halftone-in fades, loops are skipped.
|
|
864
|
+
*/
|
|
865
|
+
|
|
866
|
+
declare const PALETTES: Record<string, string[]>;
|
|
867
|
+
/** Deterministic PRNG in [0, 1) (mulberry32) (9.3). */
|
|
868
|
+
declare function seededRandom(seed: number): () => number;
|
|
869
|
+
/** A seeded mesh-gradient CSS background (4 radial blobs over a base colour) (9.3). */
|
|
870
|
+
declare function meshGradient(seed?: number, palette?: string | string[]): string;
|
|
871
|
+
declare const GENART_FX: EffectDefinition[];
|
|
872
|
+
/** Register halftone-in, mesh-drift, kaleido and grain-flicker (9.3). */
|
|
873
|
+
declare function registerGenArtPack(): void;
|
|
874
|
+
|
|
875
|
+
/**
|
|
876
|
+
* 9.4 — Video motion (`motionary/fx/video`, also `motionary/components/fx-video`):
|
|
877
|
+
*
|
|
878
|
+
* - `scrubVideo(video, trigger?)` — scroll-driven video: `currentTime`
|
|
879
|
+
* follows the scroll progress of `trigger` (default the video) through the
|
|
880
|
+
* viewport, eased. Returns a stop function.
|
|
881
|
+
* - `frameSequence(canvas, { count, src | draw }, trigger?)` — an Apple-style
|
|
882
|
+
* image sequence scrubbed by scroll: frame `i` is the image `src(i)`
|
|
883
|
+
* (preloaded) or whatever `draw(ctx, i, w, h)` paints. Returns a stop.
|
|
884
|
+
* - `scrollProgress(el)` — 0 when `el` enters at the bottom, 1 when it leaves
|
|
885
|
+
* at the top.
|
|
886
|
+
*
|
|
887
|
+
* Effects: `film-burn` (enter) — a warm light leak burns across as the
|
|
888
|
+
* element appears; `jump-cut` (attention) — two hard cuts (zoom / reframe)
|
|
889
|
+
* and back, like an edit. Reduced motion: scrubbing shows the first frame,
|
|
890
|
+
* film-burn fades, jump-cut does nothing.
|
|
891
|
+
*/
|
|
892
|
+
|
|
893
|
+
/** Scroll progress of `el` through the viewport: 0 entering at the bottom → 1 leaving at the top (9.4). */
|
|
894
|
+
declare function scrollProgress(el: Element): number;
|
|
895
|
+
/** Scroll-driven video: `video.currentTime` follows the scroll progress of `trigger` (9.4). */
|
|
896
|
+
declare function scrubVideo(video: HTMLVideoElement, trigger?: Element, opts?: {
|
|
897
|
+
ease?: number;
|
|
898
|
+
}): () => void;
|
|
899
|
+
interface FrameSequenceSource {
|
|
900
|
+
count: number;
|
|
901
|
+
src?: (i: number) => string;
|
|
902
|
+
draw?: (ctx: CanvasRenderingContext2D, i: number, w: number, h: number) => void;
|
|
903
|
+
}
|
|
904
|
+
/** Image-sequence scrubbing on a canvas (preloads `src(i)`, or paints with `draw`) (9.4). */
|
|
905
|
+
declare function frameSequence(canvas: HTMLCanvasElement, seq: FrameSequenceSource, trigger?: Element): () => void;
|
|
906
|
+
declare const VIDEO_FX: EffectDefinition[];
|
|
907
|
+
/** Register film-burn and jump-cut (9.4). */
|
|
908
|
+
declare function registerVideoPack(): void;
|
|
909
|
+
|
|
850
910
|
/**
|
|
851
911
|
* 5.5 — generative backgrounds on Canvas 2D, registered through
|
|
852
912
|
* `registerEffect()` (kind `background`): `flow-field`, `voronoi`,
|
|
@@ -956,5 +1016,5 @@ declare const EFFECT_PACKS: Record<string, EffectDefinition[]>;
|
|
|
956
1016
|
/** Register every 6.x effect pack (idempotent). */
|
|
957
1017
|
declare function registerEffectPacks(): void;
|
|
958
1018
|
|
|
959
|
-
export { AI_FX, CAMERA_MOVES, CHART_FX, CINEMA_FX, CYBER_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FESTIVAL_FX, FOCUS_FX, FORM_FX, GAME_FX, GEO_FX, GESTURE3_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, LOTTIE_FX, MORPH2_FX, MUSIC_FX, ORGANIC_FX, PAPER_FX, PHYSICS2_FX, RETRO_FX, SHOP_FX, SOCIAL_FX, SPATIAL_FX, SURFACE_FX, SURFACE_THEMES, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, applySurfaceTheme, arcPath, blobRadius, cameraFrame, crossDocumentTransitions, decodeFrame, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, lottieToKeyframes, lottieToSvg, musicSample, orientationToTilt, packManifest, pageTransition, paperRandom, parseFigure, pinchAngle, pinchScale, pixelSteps, pointsToPath, register3dPack, registerAiPack, registerChartPack, registerCinemaPack, registerCyberPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGesture3Pack, registerGpuPack, registerLightPack, registerLottiePack, registerMorphPack, registerMusicPack, registerOrganicPack, registerPaperPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerSpatialPack, registerSurfacePack, registerTextPack, registerTransitionsPack, registerWeatherPack, riveInputs, roughLine, routeLength, samplePath, shaderBackground, shakeFrames, skyAt, sparkVectors, splitChars, splitWords, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule, xrSupport, yawToOffset };
|
|
1019
|
+
export { AI_FX, CAMERA_MOVES, CHART_FX, CINEMA_FX, CYBER_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FESTIVAL_FX, FOCUS_FX, FORM_FX, GAME_FX, GENART_FX, GEO_FX, GESTURE3_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, LOTTIE_FX, MORPH2_FX, MUSIC_FX, ORGANIC_FX, PALETTES, PAPER_FX, PHYSICS2_FX, RETRO_FX, SHOP_FX, SOCIAL_FX, SPATIAL_FX, SURFACE_FX, SURFACE_THEMES, TEXT3_FX, TRANSITIONS2_FX, VIDEO_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, applySurfaceTheme, arcPath, blobRadius, cameraFrame, crossDocumentTransitions, decodeFrame, fanAngles, fieldFallback, frameSequence, glslToWgsl, loadEffectPack, lottieToKeyframes, lottieToSvg, meshGradient, musicSample, orientationToTilt, packManifest, pageTransition, paperRandom, parseFigure, pinchAngle, pinchScale, pixelSteps, pointsToPath, register3dPack, registerAiPack, registerChartPack, registerCinemaPack, registerCyberPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGenArtPack, registerGeoPack, registerGesture3Pack, registerGpuPack, registerLightPack, registerLottiePack, registerMorphPack, registerMusicPack, registerOrganicPack, registerPaperPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerSpatialPack, registerSurfacePack, registerTextPack, registerTransitionsPack, registerVideoPack, registerWeatherPack, riveInputs, roughLine, routeLength, samplePath, scrollProgress, scrubVideo, seededRandom, shaderBackground, shakeFrames, skyAt, sparkVectors, splitChars, splitWords, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule, xrSupport, yawToOffset };
|
|
960
1020
|
export type { EffectPackManifest, ShaderSpec };
|
package/dist/components/fx2.js
CHANGED
|
@@ -51,6 +51,10 @@ import { CINEMA_FX, registerCinemaPack } from './fx-cinema.js';
|
|
|
51
51
|
export { CAMERA_MOVES, cameraFrame } from './fx-cinema.js';
|
|
52
52
|
import { LOTTIE_FX, registerLottiePack } from './fx-lottie.js';
|
|
53
53
|
export { lottieToKeyframes, lottieToSvg, riveInputs } from './fx-lottie.js';
|
|
54
|
+
import { GENART_FX, registerGenArtPack } from './fx-genart.js';
|
|
55
|
+
export { PALETTES, meshGradient, seededRandom } from './fx-genart.js';
|
|
56
|
+
import { VIDEO_FX, registerVideoPack } from './fx-video.js';
|
|
57
|
+
export { frameSequence, scrollProgress, scrubVideo } from './fx-video.js';
|
|
54
58
|
import '../chunks/registry-CnO7ZVPK.js';
|
|
55
59
|
import '../chunks/base-CLuqlLfG.js';
|
|
56
60
|
import '../chunks/generative-2LhxG5BJ.js';
|
|
@@ -86,6 +90,8 @@ const EFFECT_PACKS = {
|
|
|
86
90
|
spatial: SPATIAL_FX,
|
|
87
91
|
cinema: CINEMA_FX,
|
|
88
92
|
lottie: LOTTIE_FX,
|
|
93
|
+
genart: GENART_FX,
|
|
94
|
+
video: VIDEO_FX,
|
|
89
95
|
};
|
|
90
96
|
/** Register every 6.x effect pack (idempotent). */
|
|
91
97
|
function registerEffectPacks() {
|
|
@@ -116,7 +122,9 @@ function registerEffectPacks() {
|
|
|
116
122
|
registerSpatialPack();
|
|
117
123
|
registerCinemaPack();
|
|
118
124
|
registerLottiePack();
|
|
125
|
+
registerGenArtPack();
|
|
126
|
+
registerVideoPack();
|
|
119
127
|
}
|
|
120
128
|
|
|
121
|
-
export { AI_FX, CHART_FX, CINEMA_FX, CYBER_FX, DEPTH3_FX, EFFECT_PACKS, FESTIVAL_FX, FOCUS_FX, FORM_FX, GAME_FX, GEO_FX, GESTURE3_FX, GPU_FX, LIGHT_FX, LOTTIE_FX, MORPH2_FX, MUSIC_FX, ORGANIC_FX, PAPER_FX, PHYSICS2_FX, RETRO_FX, SHOP_FX, SOCIAL_FX, SPATIAL_FX, SURFACE_FX, TEXT3_FX, TRANSITIONS2_FX, WEATHER_FX, register3dPack, registerAiPack, registerChartPack, registerCinemaPack, registerCyberPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGesture3Pack, registerGpuPack, registerLightPack, registerLottiePack, registerMorphPack, registerMusicPack, registerOrganicPack, registerPaperPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerSpatialPack, registerSurfacePack, registerTextPack, registerTransitionsPack, registerWeatherPack };
|
|
129
|
+
export { AI_FX, CHART_FX, CINEMA_FX, CYBER_FX, DEPTH3_FX, EFFECT_PACKS, FESTIVAL_FX, FOCUS_FX, FORM_FX, GAME_FX, GENART_FX, GEO_FX, GESTURE3_FX, GPU_FX, LIGHT_FX, LOTTIE_FX, MORPH2_FX, MUSIC_FX, ORGANIC_FX, PAPER_FX, PHYSICS2_FX, RETRO_FX, SHOP_FX, SOCIAL_FX, SPATIAL_FX, SURFACE_FX, TEXT3_FX, TRANSITIONS2_FX, VIDEO_FX, WEATHER_FX, register3dPack, registerAiPack, registerChartPack, registerCinemaPack, registerCyberPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGenArtPack, registerGeoPack, registerGesture3Pack, registerGpuPack, registerLightPack, registerLottiePack, registerMorphPack, registerMusicPack, registerOrganicPack, registerPaperPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerSpatialPack, registerSurfacePack, registerTextPack, registerTransitionsPack, registerVideoPack, registerWeatherPack };
|
|
122
130
|
//# sourceMappingURL=fx2.js.map
|