motionary 8.7.0 → 8.8.0

package/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [8.8.0] - 2026-10-09
+
+### Added
+- **2 new components (8.8)** in `motionary/components/widgets` (also in `dist/widgets.umd.js`):
+  - `<usa-panorama>` — 360° panorama viewer: drag / swipe to look around with inertia, slow `autorotate` (°/s, `0` off, pauses on hover / focus), ← / → keys, compass, built-in procedural landscape when no `src`; "View in XR" badge when WebXR immersive sessions are offered (`usa:xr` { mode }, `usa:xr-request`); `yaw`, `lookAt(deg)`; `usa:look` { yaw }.
+  - `<usa-spatial-card>` — spatial-computing window: frosted glass floating in depth, gaze highlight following the pointer, `[data-depth]` layers, `[slot=ornament]` bar below the window; eases forward on hover / focus, sinks on press; `active`; `usa:focus-depth` { active }.
+- **XR / spatial pack — `motionary/fx/spatial`** (= `motionary/components/fx-spatial`, `registerSpatialPack()`, also in `registerEffectPacks()`): `portal-open` (enter), `orbit-in` (enter), `spatial-float` (loop), `depth-pop` (attention). `yawToOffset()`, `xrSupport()` (WebXR session detection).
+- Showcase: 4 new gallery cards with copyable code, live demos and live Store thumbnails.
+
+### Accessibility
+- The panorama is a focusable `img` (roledescription "panorama") with your `label`; ← / → look around; auto-rotate pauses while hovered or focused. The spatial card keeps its content in reading order, the gaze layer is `aria-hidden`. Reduced motion: no auto-rotate, inertia or depth transitions; `portal-open` / `orbit-in` just show, `spatial-float` is skipped, `depth-pop` does nothing.
+
 ## [8.7.0] - 2026-10-09
 
 ### Added

package/dist/components/fx-spatial.cjs

@@ -0,0 +1,100 @@
+'use strict';
+
+var registry = require('../chunks/registry-BVklOepd.cjs');
+require('../chunks/base-DoRUZBy-.cjs');
+
+/** Horizontal background offset (px) of a 360° panorama `width` px wide for a `yaw` in degrees (wraps) (8.8). */
+function yawToOffset(yaw, width) {
+    if (!width)
+        return 0;
+    const y = ((yaw % 360) + 360) % 360;
+    return -Math.round((y / 360) * width * 100) / 100;
+}
+/** Which WebXR session the browser offers: `'immersive-vr'`, `'immersive-ar'`, `'inline'` or `'none'` (8.8). */
+async function xrSupport() {
+    const xr = typeof navigator !== 'undefined' ? navigator.xr : undefined;
+    if (!xr?.isSessionSupported)
+        return 'none';
+    for (const m of ['immersive-vr', 'immersive-ar', 'inline']) {
+        try {
+            if (await xr.isSessionSupported(m))
+                return m;
+        }
+        catch {
+            /* blocked by policy */
+        }
+    }
+    return 'none';
+}
+const SPATIAL_FX = [
+    {
+        name: 'portal-open',
+        kind: 'enter',
+        description: 'The element opens like a portal: a ring of light expands and the content comes through from depth (`color`).',
+        defaults: { color: '#a78bfa', duration: 1100 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            if (getComputedStyle(el).position === 'static') {
+                const prev = el.style.position;
+                el.style.position = 'relative';
+                ctx.onCleanup(() => (el.style.position = prev));
+            }
+            const ring = document.createElement('span');
+            ring.setAttribute('aria-hidden', 'true');
+            Object.assign(ring.style, { position: 'absolute', left: '50%', top: '50%', width: '20px', height: '20px', margin: '-10px 0 0 -10px', borderRadius: '50%', border: `3px solid ${o.color}`, boxShadow: `0 0 18px 4px ${o.color}, inset 0 0 12px ${o.color}`, pointerEvents: 'none' });
+            el.appendChild(ring);
+            ctx.onCleanup(() => ring.remove());
+            const big = Math.max(el.offsetWidth, el.offsetHeight, 80) / 10;
+            const a = ctx.animate(ring, [{ transform: 'scale(0)', opacity: 1 }, { transform: `scale(${big})`, opacity: 0.9, offset: 0.6 }, { transform: `scale(${big * 1.2})`, opacity: 0 }], { duration: o.duration, easing: 'cubic-bezier(.2,.8,.2,1)' });
+            const b = ctx.animate(el, [{ clipPath: 'circle(0% at 50% 50%)', transform: 'perspective(700px) translateZ(-200px)' }, { clipPath: 'circle(75% at 50% 50%)', transform: 'none' }], { duration: o.duration, easing: 'cubic-bezier(.2,.8,.2,1)', fill: 'backwards' });
+            const end = () => ring.remove();
+            return Promise.all([a?.finished.catch(() => undefined), b?.finished.catch(() => undefined)]).then(end, end);
+        },
+    },
+    {
+        name: 'orbit-in',
+        kind: 'enter',
+        description: 'The element swings in around the vertical axis like a spatial window placed beside you (`from`).',
+        defaults: { from: 'left', duration: 900 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const s = o.from === 'right' ? 1 : -1;
+            return ctx.animate(el, [{ transform: `perspective(900px) translateX(${s * 60}%) rotateY(${-s * 70}deg) translateZ(-120px)`, opacity: 0 }, { transform: 'none', opacity: 1 }], { duration: o.duration, easing: 'cubic-bezier(.2,.9,.25,1)', fill: 'backwards' })?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'spatial-float',
+        kind: 'loop',
+        description: 'A gentle floating in depth with a breathing shadow, until the cleanup runs.',
+        defaults: { duration: 4200 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const a = ctx.animate(el, [{ transform: 'perspective(800px) translateZ(0) translateY(0)', boxShadow: '0 14px 30px -18px rgba(15,23,42,.5)' }, { transform: 'perspective(800px) translateZ(24px) translateY(-6px)', boxShadow: '0 30px 50px -22px rgba(15,23,42,.45)' }, { transform: 'perspective(800px) translateZ(0) translateY(0)', boxShadow: '0 14px 30px -18px rgba(15,23,42,.5)' }], { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });
+            return () => a?.cancel();
+        },
+    },
+    {
+        name: 'depth-pop',
+        kind: 'attention',
+        description: 'The element pops forward towards the viewer and settles back.',
+        defaults: { duration: 600 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            return ctx.animate(el, [{ transform: 'perspective(700px) translateZ(0)' }, { transform: 'perspective(700px) translateZ(90px)', filter: 'brightness(1.1)', offset: 0.35 }, { transform: 'perspective(700px) translateZ(-10px)', offset: 0.7 }, { transform: 'perspective(700px) translateZ(0)' }], { duration: o.duration, easing: 'ease-out' })?.finished.catch(() => undefined);
+        },
+    },
+];
+/** Register portal-open, orbit-in, spatial-float and depth-pop (8.8). */
+function registerSpatialPack() {
+    registry.registerEffects(SPATIAL_FX);
+}
+
+exports.SPATIAL_FX = SPATIAL_FX;
+exports.registerSpatialPack = registerSpatialPack;
+exports.xrSupport = xrSupport;
+exports.yawToOffset = yawToOffset;
+//# sourceMappingURL=fx-spatial.cjs.map

package/dist/components/fx-spatial.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fx-spatial.cjs","sources":["../../src/components/fx2/spatial.ts"],"sourcesContent":["/**\n * 8.8 — XR / spatial pack (`motionary/fx/spatial`, also `motionary/components/fx-spatial`):\n *\n * - `portal-open` (enter) — the element opens like a portal: a ring of\n *   light expands and the content comes through from depth (`color`).\n * - `orbit-in` (enter) — the element swings in around the vertical axis\n *   like a spatial window placed beside you (`from` left|right).\n * - `spatial-float` (loop) — a gentle floating in depth with a breathing\n *   shadow; the cleanup stops it.\n * - `depth-pop` (attention) — the element pops forward towards the viewer\n *   and settles back.\n *\n * Reduced motion: portal-open / orbit-in just show, spatial-float is\n * skipped, depth-pop does nothing.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\n/** Horizontal background offset (px) of a 360° panorama `width` px wide for a `yaw` in degrees (wraps) (8.8). */\nexport function yawToOffset(yaw: number, width: number): number {\n  if (!width) return 0;\n  const y = ((yaw % 360) + 360) % 360;\n  return -Math.round((y / 360) * width * 100) / 100;\n}\n\n/** Which WebXR session the browser offers: `'immersive-vr'`, `'immersive-ar'`, `'inline'` or `'none'` (8.8). */\nexport async function xrSupport(): Promise<'immersive-vr' | 'immersive-ar' | 'inline' | 'none'> {\n  const xr = typeof navigator !== 'undefined' ? (navigator as any).xr : undefined;\n  if (!xr?.isSessionSupported) return 'none';\n  for (const m of ['immersive-vr', 'immersive-ar', 'inline'] as const) {\n    try {\n      if (await xr.isSessionSupported(m)) return m;\n    } catch {\n      /* blocked by policy */\n    }\n  }\n  return 'none';\n}\n\nexport const SPATIAL_FX: EffectDefinition[] = [\n  {\n    name: 'portal-open',\n    kind: 'enter',\n    description: 'The element opens like a portal: a ring of light expands and the content comes through from depth (`color`).',\n    defaults: { color: '#a78bfa', duration: 1100 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\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 ring = document.createElement('span');\n      ring.setAttribute('aria-hidden', 'true');\n      Object.assign(ring.style, { position: 'absolute', left: '50%', top: '50%', width: '20px', height: '20px', margin: '-10px 0 0 -10px', borderRadius: '50%', border: `3px solid ${o.color}`, boxShadow: `0 0 18px 4px ${o.color}, inset 0 0 12px ${o.color}`, pointerEvents: 'none' });\n      el.appendChild(ring);\n      ctx.onCleanup(() => ring.remove());\n      const big = Math.max(el.offsetWidth, el.offsetHeight, 80) / 10;\n      const a = ctx.animate(ring, [{ transform: 'scale(0)', opacity: 1 }, { transform: `scale(${big})`, opacity: 0.9, offset: 0.6 }, { transform: `scale(${big * 1.2})`, opacity: 0 }], { duration: o.duration, easing: 'cubic-bezier(.2,.8,.2,1)' });\n      const b = ctx.animate(el, [{ clipPath: 'circle(0% at 50% 50%)', transform: 'perspective(700px) translateZ(-200px)' }, { clipPath: 'circle(75% at 50% 50%)', transform: 'none' }], { duration: o.duration, easing: 'cubic-bezier(.2,.8,.2,1)', fill: 'backwards' });\n      const end = () => ring.remove();\n      return Promise.all([a?.finished.catch(() => undefined), b?.finished.catch(() => undefined)]).then(end, end);\n    },\n  },\n  {\n    name: 'orbit-in',\n    kind: 'enter',\n    description: 'The element swings in around the vertical axis like a spatial window placed beside you (`from`).',\n    defaults: { from: 'left', duration: 900 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const s = o.from === 'right' ? 1 : -1;\n      return ctx.animate(el, [{ transform: `perspective(900px) translateX(${s * 60}%) rotateY(${-s * 70}deg) translateZ(-120px)`, opacity: 0 }, { transform: 'none', opacity: 1 }], { duration: o.duration, easing: 'cubic-bezier(.2,.9,.25,1)', fill: 'backwards' })?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'spatial-float',\n    kind: 'loop',\n    description: 'A gentle floating in depth with a breathing shadow, until the cleanup runs.',\n    defaults: { duration: 4200 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const a = ctx.animate(el, [{ transform: 'perspective(800px) translateZ(0) translateY(0)', boxShadow: '0 14px 30px -18px rgba(15,23,42,.5)' }, { transform: 'perspective(800px) translateZ(24px) translateY(-6px)', boxShadow: '0 30px 50px -22px rgba(15,23,42,.45)' }, { transform: 'perspective(800px) translateZ(0) translateY(0)', boxShadow: '0 14px 30px -18px rgba(15,23,42,.5)' }], { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });\n      return () => a?.cancel();\n    },\n  },\n  {\n    name: 'depth-pop',\n    kind: 'attention',\n    description: 'The element pops forward towards the viewer and settles back.',\n    defaults: { duration: 600 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      return ctx.animate(el, [{ transform: 'perspective(700px) translateZ(0)' }, { transform: 'perspective(700px) translateZ(90px)', filter: 'brightness(1.1)', offset: 0.35 }, { transform: 'perspective(700px) translateZ(-10px)', offset: 0.7 }, { transform: 'perspective(700px) translateZ(0)' }], { duration: o.duration, easing: 'ease-out' })?.finished.catch(() => undefined);\n    },\n  },\n];\n\n/** Register portal-open, orbit-in, spatial-float and depth-pop (8.8). */\nexport function registerSpatialPack(): void {\n  registerEffects(SPATIAL_FX);\n}\n"],"names":["registerEffects"],"mappings":"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"}

package/dist/components/fx-spatial.d.cts

@@ -0,0 +1,68 @@
+type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
+type Cleanup = () => void;
+
+/**
+ * 5.0 — unified plugin-style effect registration. Every effect (built-in or
+ * yours) is a plain object registered once and played the same way:
+ * `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
+ * `<usa-fx effect="name" trigger="click">`. Effects get a context that
+ * already applies reduced motion, motion sensitivity, intensity and the
+ * animation budget.
+ */
+
+declare const EFFECT_KINDS: readonly ["enter", "exit", "attention", "click", "hover", "card", "loop", "page", "background", "text", "cursor", "scroll"];
+type EffectKind = (typeof EFFECT_KINDS)[number];
+interface EffectContext {
+    /** Reduced motion applies (OS setting, `minimal` / `static` sensitivity). */
+    readonly reduced: boolean;
+    readonly sensitivity: MotionSensitivity;
+    /** The triggering event (pointer position for click effects), if any. */
+    readonly event?: Event;
+    /** `el.animate()` with the library's motion rules (may return `null`). */
+    animate(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
+    /** Register teardown for long-running effects (loops, listeners). */
+    onCleanup(fn: Cleanup): void;
+}
+interface EffectDefinition<O extends Record<string, unknown> = Record<string, any>> {
+    /** Unique, kebab-case. */
+    name: string;
+    kind: EffectKind;
+    /** One line for docs and the gallery. */
+    description?: string;
+    /** Option defaults (merged under the caller's options). */
+    defaults?: Partial<O>;
+    /**
+     * Under reduced motion: `'skip'` (do nothing — default for loop, background
+     * and cursor effects) or `'run'` (run with `ctx.reduced === true`, the
+     * effect degrades itself — default for everything else).
+     */
+    reduced?: 'skip' | 'run';
+    /** Play the effect. Return an Animation / Promise to be awaited, or a cleanup. */
+    run(el: HTMLElement, options: O, ctx: EffectContext): void | Cleanup | Animation | null | Promise<unknown>;
+}
+
+/**
+ * 8.8 — XR / spatial pack (`motionary/fx/spatial`, also `motionary/components/fx-spatial`):
+ *
+ * - `portal-open` (enter) — the element opens like a portal: a ring of
+ *   light expands and the content comes through from depth (`color`).
+ * - `orbit-in` (enter) — the element swings in around the vertical axis
+ *   like a spatial window placed beside you (`from` left|right).
+ * - `spatial-float` (loop) — a gentle floating in depth with a breathing
+ *   shadow; the cleanup stops it.
+ * - `depth-pop` (attention) — the element pops forward towards the viewer
+ *   and settles back.
+ *
+ * Reduced motion: portal-open / orbit-in just show, spatial-float is
+ * skipped, depth-pop does nothing.
+ */
+
+/** Horizontal background offset (px) of a 360° panorama `width` px wide for a `yaw` in degrees (wraps) (8.8). */
+declare function yawToOffset(yaw: number, width: number): number;
+/** Which WebXR session the browser offers: `'immersive-vr'`, `'immersive-ar'`, `'inline'` or `'none'` (8.8). */
+declare function xrSupport(): Promise<'immersive-vr' | 'immersive-ar' | 'inline' | 'none'>;
+declare const SPATIAL_FX: EffectDefinition[];
+/** Register portal-open, orbit-in, spatial-float and depth-pop (8.8). */
+declare function registerSpatialPack(): void;
+
+export { SPATIAL_FX, registerSpatialPack, xrSupport, yawToOffset };

package/dist/components/fx-spatial.d.ts

@@ -0,0 +1,68 @@
+type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
+type Cleanup = () => void;
+
+/**
+ * 5.0 — unified plugin-style effect registration. Every effect (built-in or
+ * yours) is a plain object registered once and played the same way:
+ * `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
+ * `<usa-fx effect="name" trigger="click">`. Effects get a context that
+ * already applies reduced motion, motion sensitivity, intensity and the
+ * animation budget.
+ */
+
+declare const EFFECT_KINDS: readonly ["enter", "exit", "attention", "click", "hover", "card", "loop", "page", "background", "text", "cursor", "scroll"];
+type EffectKind = (typeof EFFECT_KINDS)[number];
+interface EffectContext {
+    /** Reduced motion applies (OS setting, `minimal` / `static` sensitivity). */
+    readonly reduced: boolean;
+    readonly sensitivity: MotionSensitivity;
+    /** The triggering event (pointer position for click effects), if any. */
+    readonly event?: Event;
+    /** `el.animate()` with the library's motion rules (may return `null`). */
+    animate(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
+    /** Register teardown for long-running effects (loops, listeners). */
+    onCleanup(fn: Cleanup): void;
+}
+interface EffectDefinition<O extends Record<string, unknown> = Record<string, any>> {
+    /** Unique, kebab-case. */
+    name: string;
+    kind: EffectKind;
+    /** One line for docs and the gallery. */
+    description?: string;
+    /** Option defaults (merged under the caller's options). */
+    defaults?: Partial<O>;
+    /**
+     * Under reduced motion: `'skip'` (do nothing — default for loop, background
+     * and cursor effects) or `'run'` (run with `ctx.reduced === true`, the
+     * effect degrades itself — default for everything else).
+     */
+    reduced?: 'skip' | 'run';
+    /** Play the effect. Return an Animation / Promise to be awaited, or a cleanup. */
+    run(el: HTMLElement, options: O, ctx: EffectContext): void | Cleanup | Animation | null | Promise<unknown>;
+}
+
+/**
+ * 8.8 — XR / spatial pack (`motionary/fx/spatial`, also `motionary/components/fx-spatial`):
+ *
+ * - `portal-open` (enter) — the element opens like a portal: a ring of
+ *   light expands and the content comes through from depth (`color`).
+ * - `orbit-in` (enter) — the element swings in around the vertical axis
+ *   like a spatial window placed beside you (`from` left|right).
+ * - `spatial-float` (loop) — a gentle floating in depth with a breathing
+ *   shadow; the cleanup stops it.
+ * - `depth-pop` (attention) — the element pops forward towards the viewer
+ *   and settles back.
+ *
+ * Reduced motion: portal-open / orbit-in just show, spatial-float is
+ * skipped, depth-pop does nothing.
+ */
+
+/** Horizontal background offset (px) of a 360° panorama `width` px wide for a `yaw` in degrees (wraps) (8.8). */
+declare function yawToOffset(yaw: number, width: number): number;
+/** Which WebXR session the browser offers: `'immersive-vr'`, `'immersive-ar'`, `'inline'` or `'none'` (8.8). */
+declare function xrSupport(): Promise<'immersive-vr' | 'immersive-ar' | 'inline' | 'none'>;
+declare const SPATIAL_FX: EffectDefinition[];
+/** Register portal-open, orbit-in, spatial-float and depth-pop (8.8). */
+declare function registerSpatialPack(): void;
+
+export { SPATIAL_FX, registerSpatialPack, xrSupport, yawToOffset };

package/dist/components/fx-spatial.js

@@ -0,0 +1,95 @@
+import { registerEffects } from '../chunks/registry-CnO7ZVPK.js';
+import '../chunks/base-CLuqlLfG.js';
+
+/** Horizontal background offset (px) of a 360° panorama `width` px wide for a `yaw` in degrees (wraps) (8.8). */
+function yawToOffset(yaw, width) {
+    if (!width)
+        return 0;
+    const y = ((yaw % 360) + 360) % 360;
+    return -Math.round((y / 360) * width * 100) / 100;
+}
+/** Which WebXR session the browser offers: `'immersive-vr'`, `'immersive-ar'`, `'inline'` or `'none'` (8.8). */
+async function xrSupport() {
+    const xr = typeof navigator !== 'undefined' ? navigator.xr : undefined;
+    if (!xr?.isSessionSupported)
+        return 'none';
+    for (const m of ['immersive-vr', 'immersive-ar', 'inline']) {
+        try {
+            if (await xr.isSessionSupported(m))
+                return m;
+        }
+        catch {
+            /* blocked by policy */
+        }
+    }
+    return 'none';
+}
+const SPATIAL_FX = [
+    {
+        name: 'portal-open',
+        kind: 'enter',
+        description: 'The element opens like a portal: a ring of light expands and the content comes through from depth (`color`).',
+        defaults: { color: '#a78bfa', duration: 1100 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            if (getComputedStyle(el).position === 'static') {
+                const prev = el.style.position;
+                el.style.position = 'relative';
+                ctx.onCleanup(() => (el.style.position = prev));
+            }
+            const ring = document.createElement('span');
+            ring.setAttribute('aria-hidden', 'true');
+            Object.assign(ring.style, { position: 'absolute', left: '50%', top: '50%', width: '20px', height: '20px', margin: '-10px 0 0 -10px', borderRadius: '50%', border: `3px solid ${o.color}`, boxShadow: `0 0 18px 4px ${o.color}, inset 0 0 12px ${o.color}`, pointerEvents: 'none' });
+            el.appendChild(ring);
+            ctx.onCleanup(() => ring.remove());
+            const big = Math.max(el.offsetWidth, el.offsetHeight, 80) / 10;
+            const a = ctx.animate(ring, [{ transform: 'scale(0)', opacity: 1 }, { transform: `scale(${big})`, opacity: 0.9, offset: 0.6 }, { transform: `scale(${big * 1.2})`, opacity: 0 }], { duration: o.duration, easing: 'cubic-bezier(.2,.8,.2,1)' });
+            const b = ctx.animate(el, [{ clipPath: 'circle(0% at 50% 50%)', transform: 'perspective(700px) translateZ(-200px)' }, { clipPath: 'circle(75% at 50% 50%)', transform: 'none' }], { duration: o.duration, easing: 'cubic-bezier(.2,.8,.2,1)', fill: 'backwards' });
+            const end = () => ring.remove();
+            return Promise.all([a?.finished.catch(() => undefined), b?.finished.catch(() => undefined)]).then(end, end);
+        },
+    },
+    {
+        name: 'orbit-in',
+        kind: 'enter',
+        description: 'The element swings in around the vertical axis like a spatial window placed beside you (`from`).',
+        defaults: { from: 'left', duration: 900 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const s = o.from === 'right' ? 1 : -1;
+            return ctx.animate(el, [{ transform: `perspective(900px) translateX(${s * 60}%) rotateY(${-s * 70}deg) translateZ(-120px)`, opacity: 0 }, { transform: 'none', opacity: 1 }], { duration: o.duration, easing: 'cubic-bezier(.2,.9,.25,1)', fill: 'backwards' })?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'spatial-float',
+        kind: 'loop',
+        description: 'A gentle floating in depth with a breathing shadow, until the cleanup runs.',
+        defaults: { duration: 4200 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const a = ctx.animate(el, [{ transform: 'perspective(800px) translateZ(0) translateY(0)', boxShadow: '0 14px 30px -18px rgba(15,23,42,.5)' }, { transform: 'perspective(800px) translateZ(24px) translateY(-6px)', boxShadow: '0 30px 50px -22px rgba(15,23,42,.45)' }, { transform: 'perspective(800px) translateZ(0) translateY(0)', boxShadow: '0 14px 30px -18px rgba(15,23,42,.5)' }], { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });
+            return () => a?.cancel();
+        },
+    },
+    {
+        name: 'depth-pop',
+        kind: 'attention',
+        description: 'The element pops forward towards the viewer and settles back.',
+        defaults: { duration: 600 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            return ctx.animate(el, [{ transform: 'perspective(700px) translateZ(0)' }, { transform: 'perspective(700px) translateZ(90px)', filter: 'brightness(1.1)', offset: 0.35 }, { transform: 'perspective(700px) translateZ(-10px)', offset: 0.7 }, { transform: 'perspective(700px) translateZ(0)' }], { duration: o.duration, easing: 'ease-out' })?.finished.catch(() => undefined);
+        },
+    },
+];
+/** Register portal-open, orbit-in, spatial-float and depth-pop (8.8). */
+function registerSpatialPack() {
+    registerEffects(SPATIAL_FX);
+}
+
+export { SPATIAL_FX, registerSpatialPack, xrSupport, yawToOffset };
+//# sourceMappingURL=fx-spatial.js.map

package/dist/components/fx-spatial.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fx-spatial.js","sources":["../../src/components/fx2/spatial.ts"],"sourcesContent":["/**\n * 8.8 — XR / spatial pack (`motionary/fx/spatial`, also `motionary/components/fx-spatial`):\n *\n * - `portal-open` (enter) — the element opens like a portal: a ring of\n *   light expands and the content comes through from depth (`color`).\n * - `orbit-in` (enter) — the element swings in around the vertical axis\n *   like a spatial window placed beside you (`from` left|right).\n * - `spatial-float` (loop) — a gentle floating in depth with a breathing\n *   shadow; the cleanup stops it.\n * - `depth-pop` (attention) — the element pops forward towards the viewer\n *   and settles back.\n *\n * Reduced motion: portal-open / orbit-in just show, spatial-float is\n * skipped, depth-pop does nothing.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\n/** Horizontal background offset (px) of a 360° panorama `width` px wide for a `yaw` in degrees (wraps) (8.8). */\nexport function yawToOffset(yaw: number, width: number): number {\n  if (!width) return 0;\n  const y = ((yaw % 360) + 360) % 360;\n  return -Math.round((y / 360) * width * 100) / 100;\n}\n\n/** Which WebXR session the browser offers: `'immersive-vr'`, `'immersive-ar'`, `'inline'` or `'none'` (8.8). */\nexport async function xrSupport(): Promise<'immersive-vr' | 'immersive-ar' | 'inline' | 'none'> {\n  const xr = typeof navigator !== 'undefined' ? (navigator as any).xr : undefined;\n  if (!xr?.isSessionSupported) return 'none';\n  for (const m of ['immersive-vr', 'immersive-ar', 'inline'] as const) {\n    try {\n      if (await xr.isSessionSupported(m)) return m;\n    } catch {\n      /* blocked by policy */\n    }\n  }\n  return 'none';\n}\n\nexport const SPATIAL_FX: EffectDefinition[] = [\n  {\n    name: 'portal-open',\n    kind: 'enter',\n    description: 'The element opens like a portal: a ring of light expands and the content comes through from depth (`color`).',\n    defaults: { color: '#a78bfa', duration: 1100 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\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 ring = document.createElement('span');\n      ring.setAttribute('aria-hidden', 'true');\n      Object.assign(ring.style, { position: 'absolute', left: '50%', top: '50%', width: '20px', height: '20px', margin: '-10px 0 0 -10px', borderRadius: '50%', border: `3px solid ${o.color}`, boxShadow: `0 0 18px 4px ${o.color}, inset 0 0 12px ${o.color}`, pointerEvents: 'none' });\n      el.appendChild(ring);\n      ctx.onCleanup(() => ring.remove());\n      const big = Math.max(el.offsetWidth, el.offsetHeight, 80) / 10;\n      const a = ctx.animate(ring, [{ transform: 'scale(0)', opacity: 1 }, { transform: `scale(${big})`, opacity: 0.9, offset: 0.6 }, { transform: `scale(${big * 1.2})`, opacity: 0 }], { duration: o.duration, easing: 'cubic-bezier(.2,.8,.2,1)' });\n      const b = ctx.animate(el, [{ clipPath: 'circle(0% at 50% 50%)', transform: 'perspective(700px) translateZ(-200px)' }, { clipPath: 'circle(75% at 50% 50%)', transform: 'none' }], { duration: o.duration, easing: 'cubic-bezier(.2,.8,.2,1)', fill: 'backwards' });\n      const end = () => ring.remove();\n      return Promise.all([a?.finished.catch(() => undefined), b?.finished.catch(() => undefined)]).then(end, end);\n    },\n  },\n  {\n    name: 'orbit-in',\n    kind: 'enter',\n    description: 'The element swings in around the vertical axis like a spatial window placed beside you (`from`).',\n    defaults: { from: 'left', duration: 900 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const s = o.from === 'right' ? 1 : -1;\n      return ctx.animate(el, [{ transform: `perspective(900px) translateX(${s * 60}%) rotateY(${-s * 70}deg) translateZ(-120px)`, opacity: 0 }, { transform: 'none', opacity: 1 }], { duration: o.duration, easing: 'cubic-bezier(.2,.9,.25,1)', fill: 'backwards' })?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'spatial-float',\n    kind: 'loop',\n    description: 'A gentle floating in depth with a breathing shadow, until the cleanup runs.',\n    defaults: { duration: 4200 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const a = ctx.animate(el, [{ transform: 'perspective(800px) translateZ(0) translateY(0)', boxShadow: '0 14px 30px -18px rgba(15,23,42,.5)' }, { transform: 'perspective(800px) translateZ(24px) translateY(-6px)', boxShadow: '0 30px 50px -22px rgba(15,23,42,.45)' }, { transform: 'perspective(800px) translateZ(0) translateY(0)', boxShadow: '0 14px 30px -18px rgba(15,23,42,.5)' }], { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });\n      return () => a?.cancel();\n    },\n  },\n  {\n    name: 'depth-pop',\n    kind: 'attention',\n    description: 'The element pops forward towards the viewer and settles back.',\n    defaults: { duration: 600 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      return ctx.animate(el, [{ transform: 'perspective(700px) translateZ(0)' }, { transform: 'perspective(700px) translateZ(90px)', filter: 'brightness(1.1)', offset: 0.35 }, { transform: 'perspective(700px) translateZ(-10px)', offset: 0.7 }, { transform: 'perspective(700px) translateZ(0)' }], { duration: o.duration, easing: 'ease-out' })?.finished.catch(() => undefined);\n    },\n  },\n];\n\n/** Register portal-open, orbit-in, spatial-float and depth-pop (8.8). */\nexport function registerSpatialPack(): void {\n  registerEffects(SPATIAL_FX);\n}\n"],"names":[],"mappings":"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"}

package/dist/components/fx2.cjs

@@ -25,6 +25,7 @@ var components_fxCyber = require('./fx-cyber.cjs');
 var components_fxPaper = require('./fx-paper.cjs');
 var components_fxSurface = require('./fx-surface.cjs');
 var components_fxGesture = require('./fx-gesture.cjs');
+var components_fxSpatial = require('./fx-spatial.cjs');
 require('../chunks/registry-BVklOepd.cjs');
 require('../chunks/base-DoRUZBy-.cjs');
 require('../chunks/generative-BHIj-NU0.cjs');
@@ -57,6 +58,7 @@ const EFFECT_PACKS = {
     paper: components_fxPaper.PAPER_FX,
     surface: components_fxSurface.SURFACE_FX,
     gesture3: components_fxGesture.GESTURE3_FX,
+    spatial: components_fxSpatial.SPATIAL_FX,
 };
 /** Register every 6.x effect pack (idempotent). */
 function registerEffectPacks() {
@@ -84,6 +86,7 @@ function registerEffectPacks() {
     components_fxPaper.registerPaperPack();
     components_fxSurface.registerSurfacePack();
     components_fxGesture.registerGesture3Pack();
+    components_fxSpatial.registerSpatialPack();
 }
 
 exports.EFFECT_PACK_FORMAT = components_marketplace.EFFECT_PACK_FORMAT;
@@ -175,6 +178,10 @@ exports.orientationToTilt = components_fxGesture.orientationToTilt;
 exports.pinchAngle = components_fxGesture.pinchAngle;
 exports.pinchScale = components_fxGesture.pinchScale;
 exports.registerGesture3Pack = components_fxGesture.registerGesture3Pack;
+exports.SPATIAL_FX = components_fxSpatial.SPATIAL_FX;
+exports.registerSpatialPack = components_fxSpatial.registerSpatialPack;
+exports.xrSupport = components_fxSpatial.xrSupport;
+exports.yawToOffset = components_fxSpatial.yawToOffset;
 exports.EFFECT_PACKS = EFFECT_PACKS;
 exports.registerEffectPacks = registerEffectPacks;
 //# sourceMappingURL=fx2.cjs.map

package/dist/components/fx2.cjs.map

@@ -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';\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\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};\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}\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","registerGpuPack","registerTextPack","registerLightPack","register3dPack","registerMorphPack","registerTransitionsPack","registerWeatherPack","registerPhysicsPack","registerFocusPack","registerMusicPack","registerChartPack","registerShopPack","registerSocialPack","registerGamePack","registerGeoPack","registerFormPack","registerAiPack","registerFestivalPack","registerRetroPack","registerOrganicPack","registerCyberPack","registerPaperPack","registerSurfacePack","registerGesture3Pack"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA;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;;AAGvB;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;AACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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';\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\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};\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}\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","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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqFA;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;;AAGrB;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;AACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/fx2.d.cts

@@ -756,6 +756,30 @@ declare const GESTURE3_FX: EffectDefinition[];
 /** Register swipe-hint, pinch-hint, tilt-wobble and depth-in (8.7). */
 declare function registerGesture3Pack(): void;
 
+/**
+ * 8.8 — XR / spatial pack (`motionary/fx/spatial`, also `motionary/components/fx-spatial`):
+ *
+ * - `portal-open` (enter) — the element opens like a portal: a ring of
+ *   light expands and the content comes through from depth (`color`).
+ * - `orbit-in` (enter) — the element swings in around the vertical axis
+ *   like a spatial window placed beside you (`from` left|right).
+ * - `spatial-float` (loop) — a gentle floating in depth with a breathing
+ *   shadow; the cleanup stops it.
+ * - `depth-pop` (attention) — the element pops forward towards the viewer
+ *   and settles back.
+ *
+ * Reduced motion: portal-open / orbit-in just show, spatial-float is
+ * skipped, depth-pop does nothing.
+ */
+
+/** Horizontal background offset (px) of a 360° panorama `width` px wide for a `yaw` in degrees (wraps) (8.8). */
+declare function yawToOffset(yaw: number, width: number): number;
+/** Which WebXR session the browser offers: `'immersive-vr'`, `'immersive-ar'`, `'inline'` or `'none'` (8.8). */
+declare function xrSupport(): Promise<'immersive-vr' | 'immersive-ar' | 'inline' | 'none'>;
+declare const SPATIAL_FX: EffectDefinition[];
+/** Register portal-open, orbit-in, spatial-float and depth-pop (8.8). */
+declare function registerSpatialPack(): void;
+
 /**
  * 5.5 — generative backgrounds on Canvas 2D, registered through
  * `registerEffect()` (kind `background`): `flow-field`, `voronoi`,
@@ -865,5 +889,5 @@ declare const EFFECT_PACKS: Record<string, EffectDefinition[]>;
 /** Register every 6.x effect pack (idempotent). */
 declare function registerEffectPacks(): void;
 
-export { AI_FX, CHART_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, MORPH2_FX, MUSIC_FX, ORGANIC_FX, PAPER_FX, PHYSICS2_FX, RETRO_FX, SHOP_FX, SOCIAL_FX, SURFACE_FX, SURFACE_THEMES, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, applySurfaceTheme, arcPath, blobRadius, crossDocumentTransitions, decodeFrame, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, musicSample, orientationToTilt, packManifest, pageTransition, paperRandom, parseFigure, pinchAngle, pinchScale, pixelSteps, pointsToPath, register3dPack, registerAiPack, registerChartPack, registerCyberPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGesture3Pack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerOrganicPack, registerPaperPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerSurfacePack, registerTextPack, registerTransitionsPack, registerWeatherPack, roughLine, routeLength, samplePath, shaderBackground, shakeFrames, skyAt, sparkVectors, splitChars, splitWords, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule };
+export { AI_FX, CHART_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, 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, crossDocumentTransitions, decodeFrame, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, musicSample, orientationToTilt, packManifest, pageTransition, paperRandom, parseFigure, pinchAngle, pinchScale, pixelSteps, pointsToPath, register3dPack, registerAiPack, registerChartPack, registerCyberPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGesture3Pack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerOrganicPack, registerPaperPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerSpatialPack, registerSurfacePack, registerTextPack, registerTransitionsPack, registerWeatherPack, roughLine, routeLength, samplePath, shaderBackground, shakeFrames, skyAt, sparkVectors, splitChars, splitWords, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule, xrSupport, yawToOffset };
 export type { EffectPackManifest, ShaderSpec };

package/dist/components/fx2.d.ts

@@ -756,6 +756,30 @@ declare const GESTURE3_FX: EffectDefinition[];
 /** Register swipe-hint, pinch-hint, tilt-wobble and depth-in (8.7). */
 declare function registerGesture3Pack(): void;
 
+/**
+ * 8.8 — XR / spatial pack (`motionary/fx/spatial`, also `motionary/components/fx-spatial`):
+ *
+ * - `portal-open` (enter) — the element opens like a portal: a ring of
+ *   light expands and the content comes through from depth (`color`).
+ * - `orbit-in` (enter) — the element swings in around the vertical axis
+ *   like a spatial window placed beside you (`from` left|right).
+ * - `spatial-float` (loop) — a gentle floating in depth with a breathing
+ *   shadow; the cleanup stops it.
+ * - `depth-pop` (attention) — the element pops forward towards the viewer
+ *   and settles back.
+ *
+ * Reduced motion: portal-open / orbit-in just show, spatial-float is
+ * skipped, depth-pop does nothing.
+ */
+
+/** Horizontal background offset (px) of a 360° panorama `width` px wide for a `yaw` in degrees (wraps) (8.8). */
+declare function yawToOffset(yaw: number, width: number): number;
+/** Which WebXR session the browser offers: `'immersive-vr'`, `'immersive-ar'`, `'inline'` or `'none'` (8.8). */
+declare function xrSupport(): Promise<'immersive-vr' | 'immersive-ar' | 'inline' | 'none'>;
+declare const SPATIAL_FX: EffectDefinition[];
+/** Register portal-open, orbit-in, spatial-float and depth-pop (8.8). */
+declare function registerSpatialPack(): void;
+
 /**
  * 5.5 — generative backgrounds on Canvas 2D, registered through
  * `registerEffect()` (kind `background`): `flow-field`, `voronoi`,
@@ -865,5 +889,5 @@ declare const EFFECT_PACKS: Record<string, EffectDefinition[]>;
 /** Register every 6.x effect pack (idempotent). */
 declare function registerEffectPacks(): void;
 
-export { AI_FX, CHART_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, MORPH2_FX, MUSIC_FX, ORGANIC_FX, PAPER_FX, PHYSICS2_FX, RETRO_FX, SHOP_FX, SOCIAL_FX, SURFACE_FX, SURFACE_THEMES, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, applySurfaceTheme, arcPath, blobRadius, crossDocumentTransitions, decodeFrame, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, musicSample, orientationToTilt, packManifest, pageTransition, paperRandom, parseFigure, pinchAngle, pinchScale, pixelSteps, pointsToPath, register3dPack, registerAiPack, registerChartPack, registerCyberPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGesture3Pack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerOrganicPack, registerPaperPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerSurfacePack, registerTextPack, registerTransitionsPack, registerWeatherPack, roughLine, routeLength, samplePath, shaderBackground, shakeFrames, skyAt, sparkVectors, splitChars, splitWords, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule };
+export { AI_FX, CHART_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, 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, crossDocumentTransitions, decodeFrame, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, musicSample, orientationToTilt, packManifest, pageTransition, paperRandom, parseFigure, pinchAngle, pinchScale, pixelSteps, pointsToPath, register3dPack, registerAiPack, registerChartPack, registerCyberPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGesture3Pack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerOrganicPack, registerPaperPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerSpatialPack, registerSurfacePack, registerTextPack, registerTransitionsPack, registerWeatherPack, roughLine, routeLength, samplePath, shaderBackground, shakeFrames, skyAt, sparkVectors, splitChars, splitWords, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule, xrSupport, yawToOffset };
 export type { EffectPackManifest, ShaderSpec };

package/dist/components/fx2.js

@@ -45,6 +45,8 @@ import { SURFACE_FX, registerSurfacePack } from './fx-surface.js';
 export { SURFACE_THEMES, applySurfaceTheme } from './fx-surface.js';
 import { GESTURE3_FX, registerGesture3Pack } from './fx-gesture.js';
 export { orientationToTilt, pinchAngle, pinchScale } from './fx-gesture.js';
+import { SPATIAL_FX, registerSpatialPack } from './fx-spatial.js';
+export { xrSupport, yawToOffset } from './fx-spatial.js';
 import '../chunks/registry-CnO7ZVPK.js';
 import '../chunks/base-CLuqlLfG.js';
 import '../chunks/generative-2LhxG5BJ.js';
@@ -77,6 +79,7 @@ const EFFECT_PACKS = {
     paper: PAPER_FX,
     surface: SURFACE_FX,
     gesture3: GESTURE3_FX,
+    spatial: SPATIAL_FX,
 };
 /** Register every 6.x effect pack (idempotent). */
 function registerEffectPacks() {
@@ -104,7 +107,8 @@ function registerEffectPacks() {
     registerPaperPack();
     registerSurfacePack();
     registerGesture3Pack();
+    registerSpatialPack();
 }
 
-export { AI_FX, CHART_FX, CYBER_FX, DEPTH3_FX, EFFECT_PACKS, FESTIVAL_FX, FOCUS_FX, FORM_FX, GAME_FX, GEO_FX, GESTURE3_FX, GPU_FX, LIGHT_FX, MORPH2_FX, MUSIC_FX, ORGANIC_FX, PAPER_FX, PHYSICS2_FX, RETRO_FX, SHOP_FX, SOCIAL_FX, SURFACE_FX, TEXT3_FX, TRANSITIONS2_FX, WEATHER_FX, register3dPack, registerAiPack, registerChartPack, registerCyberPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGesture3Pack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerOrganicPack, registerPaperPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerSurfacePack, registerTextPack, registerTransitionsPack, registerWeatherPack };
+export { AI_FX, CHART_FX, CYBER_FX, DEPTH3_FX, EFFECT_PACKS, FESTIVAL_FX, FOCUS_FX, FORM_FX, GAME_FX, GEO_FX, GESTURE3_FX, GPU_FX, LIGHT_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, registerCyberPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGesture3Pack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerOrganicPack, registerPaperPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerSpatialPack, registerSurfacePack, registerTextPack, registerTransitionsPack, registerWeatherPack };
 //# sourceMappingURL=fx2.js.map