use-scroll-animate 6.6.0 → 6.8.0

package/dist/components/fx2.d.cts

@@ -164,6 +164,112 @@ declare const MORPH2_FX: EffectDefinition[];
 /** Register the 6.6 morph & SVG pack (idempotent). */
 declare function registerMorphEffects2(): void;
 
+/**
+ * 6.7 — Transitions 2.0 (`motionary/components/fx-transitions`), registered
+ * through `registerEffect()` (kind `page`; option `mode: 'in' | 'out'`):
+ *
+ * - `ripple-dissolve` — a circle with a ripple ring grows from the pointer
+ *   (or `x` / `y` 0–1) and reveals / hides the element.
+ * - `shatter` — the element breaks into shards that fly apart (out) or
+ *   fly together (in).
+ * - `mosaic-flip` — a grid of tiles flips over in a diagonal wave.
+ * - `liquid-wipe` — a wavy liquid edge sweeps across.
+ * - `page-curl` — the element turns like a page around its left edge.
+ * - `camera-dolly` — a dolly zoom: scale + depth blur + fade.
+ *
+ * `pageTransition(update, effect)` runs a DOM update inside the View
+ * Transitions API (when available) and plays the effect on the new snapshot;
+ * without the API it runs `update()` and plays the effect on `target`.
+ * `crossDocumentTransitions(effect)` opts an MPA into cross-document view
+ * transitions (`@view-transition { navigation: auto }`) with the same look.
+ * Reduced motion: plain short fades.
+ */
+
+declare const TRANSITIONS2_FX: EffectDefinition[];
+/**
+ * Run `update` (a DOM change) as a transition: inside `document.startViewTransition`
+ * when supported (the new snapshot plays `effect`), otherwise `update()` then the
+ * effect on `target` (default `document.body`'s first element).
+ */
+declare function pageTransition(update: () => void | Promise<void>, effect?: string, options?: Record<string, unknown>, target?: HTMLElement): Promise<void>;
+/** Opt a multi-page site into cross-document view transitions with an effect's look. Returns a remover. */
+declare function crossDocumentTransitions(effect?: string, duration?: number): () => void;
+/** Register the 6.7 transitions pack (idempotent). */
+declare function registerTransitionEffects2(): void;
+
+/**
+ * 6.8 — Weather & ambience (`motionary/components/fx-weather`), registered
+ * through `registerEffect()` (kind `background`, Canvas 2D):
+ *
+ * - `rain-glass` — droplets sit on a window pane, grow, and run down leaving
+ *   trails.
+ * - `snowfall` — flakes drift down and pile up along the bottom edge.
+ * - `lightning` — a safe storm: branching bolts at most once per `interval`
+ *   (≥ 2.5 s, far below the WCAG 2.3.1 limit of 3 flashes / s), the sky glow
+ *   is capped at 22 % brightness and there is no flash at all under reduced
+ *   motion.
+ * - `fog` — soft layered fog banks drifting at different speeds.
+ * - `aurora-veil` — curtains of northern lights waving over a night sky.
+ * - `day-cycle` — the sky moves through dawn, day, dusk and night with the sun
+ *   and moon on an arc (`cycle` seconds, or a fixed `hour` 0–24).
+ *
+ * Every effect renders only while visible, adapts its quality and draws one
+ * static frame under reduced motion.
+ */
+
+/** Sky colours (top, bottom) for an hour 0–24. */
+declare function skyAt(hour: number): [string, string];
+declare const WEATHER_FX: EffectDefinition[];
+/** Register the 6.8 weather & ambience pack (idempotent). */
+declare function registerWeatherEffects(): void;
+
+/**
+ * 6.8 — Interactive physics 2.0 (`motionary/components/fx-physics`) on a tiny
+ * Verlet integrator (`VerletWorld`), registered through `registerEffect()`:
+ *
+ * - `soft-body` (kind `hover`) — the element wobbles like jelly: pointer
+ *   motion pushes a damped spring that squashes and skews it.
+ * - `magnet` (kind `hover`) — the element's children are pulled toward the
+ *   pointer on springs and settle back when it leaves.
+ * - `cloth` (kind `background`) — a cloth hangs from the top edge and ripples
+ *   when the pointer moves through it.
+ * - `rope` (kind `background`) — a rope with a weight swings from the top;
+ *   the pointer pushes it.
+ * - `pinball` (kind `background`) — balls fall through round bumpers that
+ *   light up on a hit; click to drop another ball.
+ *
+ * Canvas effects render only while visible; reduced motion draws one static
+ * frame and the hover effects do nothing.
+ */
+
+interface VerletPoint {
+    x: number;
+    y: number;
+    px: number;
+    py: number;
+    pinned: boolean;
+}
+/** A minimal Verlet world: points, distance sticks, gravity, damping. */
+declare class VerletWorld {
+    gravity: number;
+    damping: number;
+    iterations: number;
+    points: VerletPoint[];
+    sticks: [number, number, number][];
+    constructor(gravity?: number, damping?: number, iterations?: number);
+    add(x: number, y: number, pinned?: boolean): number;
+    link(a: number, b: number, len?: number): void;
+    step(dt: number, bounds?: {
+        w: number;
+        h: number;
+    }): void;
+    /** Push points within `r` px of (x, y) by (dx, dy). */
+    push(x: number, y: number, dx: number, dy: number, r?: number): void;
+}
+declare const PHYSICS2_FX: EffectDefinition[];
+/** Register the 6.8 physics 2.0 pack (idempotent). */
+declare function registerPhysicsEffects2(): void;
+
 /**
  * 5.5 — generative backgrounds on Canvas 2D, registered through
  * `registerEffect()` (kind `background`): `flow-field`, `voronoi`,
@@ -236,5 +342,5 @@ declare const FX2_PACKS: Record<string, EffectDefinition[]>;
 /** Register every 6.x pack (idempotent). */
 declare function registerFx2(): void;
 
-export { DEPTH3_FX, FX2_PACKS, GLSL_HEAD, GPU_FX, LIGHT_FX, MORPH2_FX, TEXT3_FX, fieldFallback, pointsToPath, register3dEffects, registerFx2, registerGpuEffects, registerLightEffects, registerMorphEffects2, registerTextEffects3, samplePath, shaderBackground, splitChars, supportsWebGL2, trackPointer };
+export { DEPTH3_FX, FX2_PACKS, GLSL_HEAD, GPU_FX, LIGHT_FX, MORPH2_FX, PHYSICS2_FX, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, crossDocumentTransitions, fieldFallback, pageTransition, pointsToPath, register3dEffects, registerFx2, registerGpuEffects, registerLightEffects, registerMorphEffects2, registerPhysicsEffects2, registerTextEffects3, registerTransitionEffects2, registerWeatherEffects, samplePath, shaderBackground, skyAt, splitChars, supportsWebGL2, trackPointer };
 export type { ShaderSpec };

package/dist/components/fx2.d.ts

@@ -164,6 +164,112 @@ declare const MORPH2_FX: EffectDefinition[];
 /** Register the 6.6 morph & SVG pack (idempotent). */
 declare function registerMorphEffects2(): void;
 
+/**
+ * 6.7 — Transitions 2.0 (`motionary/components/fx-transitions`), registered
+ * through `registerEffect()` (kind `page`; option `mode: 'in' | 'out'`):
+ *
+ * - `ripple-dissolve` — a circle with a ripple ring grows from the pointer
+ *   (or `x` / `y` 0–1) and reveals / hides the element.
+ * - `shatter` — the element breaks into shards that fly apart (out) or
+ *   fly together (in).
+ * - `mosaic-flip` — a grid of tiles flips over in a diagonal wave.
+ * - `liquid-wipe` — a wavy liquid edge sweeps across.
+ * - `page-curl` — the element turns like a page around its left edge.
+ * - `camera-dolly` — a dolly zoom: scale + depth blur + fade.
+ *
+ * `pageTransition(update, effect)` runs a DOM update inside the View
+ * Transitions API (when available) and plays the effect on the new snapshot;
+ * without the API it runs `update()` and plays the effect on `target`.
+ * `crossDocumentTransitions(effect)` opts an MPA into cross-document view
+ * transitions (`@view-transition { navigation: auto }`) with the same look.
+ * Reduced motion: plain short fades.
+ */
+
+declare const TRANSITIONS2_FX: EffectDefinition[];
+/**
+ * Run `update` (a DOM change) as a transition: inside `document.startViewTransition`
+ * when supported (the new snapshot plays `effect`), otherwise `update()` then the
+ * effect on `target` (default `document.body`'s first element).
+ */
+declare function pageTransition(update: () => void | Promise<void>, effect?: string, options?: Record<string, unknown>, target?: HTMLElement): Promise<void>;
+/** Opt a multi-page site into cross-document view transitions with an effect's look. Returns a remover. */
+declare function crossDocumentTransitions(effect?: string, duration?: number): () => void;
+/** Register the 6.7 transitions pack (idempotent). */
+declare function registerTransitionEffects2(): void;
+
+/**
+ * 6.8 — Weather & ambience (`motionary/components/fx-weather`), registered
+ * through `registerEffect()` (kind `background`, Canvas 2D):
+ *
+ * - `rain-glass` — droplets sit on a window pane, grow, and run down leaving
+ *   trails.
+ * - `snowfall` — flakes drift down and pile up along the bottom edge.
+ * - `lightning` — a safe storm: branching bolts at most once per `interval`
+ *   (≥ 2.5 s, far below the WCAG 2.3.1 limit of 3 flashes / s), the sky glow
+ *   is capped at 22 % brightness and there is no flash at all under reduced
+ *   motion.
+ * - `fog` — soft layered fog banks drifting at different speeds.
+ * - `aurora-veil` — curtains of northern lights waving over a night sky.
+ * - `day-cycle` — the sky moves through dawn, day, dusk and night with the sun
+ *   and moon on an arc (`cycle` seconds, or a fixed `hour` 0–24).
+ *
+ * Every effect renders only while visible, adapts its quality and draws one
+ * static frame under reduced motion.
+ */
+
+/** Sky colours (top, bottom) for an hour 0–24. */
+declare function skyAt(hour: number): [string, string];
+declare const WEATHER_FX: EffectDefinition[];
+/** Register the 6.8 weather & ambience pack (idempotent). */
+declare function registerWeatherEffects(): void;
+
+/**
+ * 6.8 — Interactive physics 2.0 (`motionary/components/fx-physics`) on a tiny
+ * Verlet integrator (`VerletWorld`), registered through `registerEffect()`:
+ *
+ * - `soft-body` (kind `hover`) — the element wobbles like jelly: pointer
+ *   motion pushes a damped spring that squashes and skews it.
+ * - `magnet` (kind `hover`) — the element's children are pulled toward the
+ *   pointer on springs and settle back when it leaves.
+ * - `cloth` (kind `background`) — a cloth hangs from the top edge and ripples
+ *   when the pointer moves through it.
+ * - `rope` (kind `background`) — a rope with a weight swings from the top;
+ *   the pointer pushes it.
+ * - `pinball` (kind `background`) — balls fall through round bumpers that
+ *   light up on a hit; click to drop another ball.
+ *
+ * Canvas effects render only while visible; reduced motion draws one static
+ * frame and the hover effects do nothing.
+ */
+
+interface VerletPoint {
+    x: number;
+    y: number;
+    px: number;
+    py: number;
+    pinned: boolean;
+}
+/** A minimal Verlet world: points, distance sticks, gravity, damping. */
+declare class VerletWorld {
+    gravity: number;
+    damping: number;
+    iterations: number;
+    points: VerletPoint[];
+    sticks: [number, number, number][];
+    constructor(gravity?: number, damping?: number, iterations?: number);
+    add(x: number, y: number, pinned?: boolean): number;
+    link(a: number, b: number, len?: number): void;
+    step(dt: number, bounds?: {
+        w: number;
+        h: number;
+    }): void;
+    /** Push points within `r` px of (x, y) by (dx, dy). */
+    push(x: number, y: number, dx: number, dy: number, r?: number): void;
+}
+declare const PHYSICS2_FX: EffectDefinition[];
+/** Register the 6.8 physics 2.0 pack (idempotent). */
+declare function registerPhysicsEffects2(): void;
+
 /**
  * 5.5 — generative backgrounds on Canvas 2D, registered through
  * `registerEffect()` (kind `background`): `flow-field`, `voronoi`,
@@ -236,5 +342,5 @@ declare const FX2_PACKS: Record<string, EffectDefinition[]>;
 /** Register every 6.x pack (idempotent). */
 declare function registerFx2(): void;
 
-export { DEPTH3_FX, FX2_PACKS, GLSL_HEAD, GPU_FX, LIGHT_FX, MORPH2_FX, TEXT3_FX, fieldFallback, pointsToPath, register3dEffects, registerFx2, registerGpuEffects, registerLightEffects, registerMorphEffects2, registerTextEffects3, samplePath, shaderBackground, splitChars, supportsWebGL2, trackPointer };
+export { DEPTH3_FX, FX2_PACKS, GLSL_HEAD, GPU_FX, LIGHT_FX, MORPH2_FX, PHYSICS2_FX, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, crossDocumentTransitions, fieldFallback, pageTransition, pointsToPath, register3dEffects, registerFx2, registerGpuEffects, registerLightEffects, registerMorphEffects2, registerPhysicsEffects2, registerTextEffects3, registerTransitionEffects2, registerWeatherEffects, samplePath, shaderBackground, skyAt, splitChars, supportsWebGL2, trackPointer };
 export type { ShaderSpec };

package/dist/components/fx2.js

@@ -1,5 +1,5 @@
-import { G as GPU_FX, r as registerGpuEffects } from '../chunks/gpu-EjV49FQk.js';
-export { a as GLSL_HEAD, f as fieldFallback, s as shaderBackground, b as supportsWebGL2 } from '../chunks/gpu-EjV49FQk.js';
+import { G as GPU_FX, r as registerGpuEffects } from '../chunks/gpu-CsP2ZB3x.js';
+export { a as GLSL_HEAD, f as fieldFallback, s as shaderBackground, b as supportsWebGL2 } from '../chunks/gpu-CsP2ZB3x.js';
 import { TEXT3_FX, registerTextEffects3 } from './fx-text.js';
 export { splitChars } from './fx-text.js';
 import { LIGHT_FX, registerLightEffects } from './fx-light.js';
@@ -7,7 +7,13 @@ export { trackPointer } from './fx-light.js';
 import { DEPTH3_FX, register3dEffects } from './fx-3d.js';
 import { MORPH2_FX, registerMorphEffects2 } from './fx-morph.js';
 export { pointsToPath, samplePath } from './fx-morph.js';
-import '../chunks/registry-Bu5NrAyA.js';
+import { TRANSITIONS2_FX, registerTransitionEffects2 } from './fx-transitions.js';
+export { crossDocumentTransitions, pageTransition } from './fx-transitions.js';
+import { WEATHER_FX, registerWeatherEffects } from './fx-weather.js';
+export { skyAt } from './fx-weather.js';
+import { PHYSICS2_FX, registerPhysicsEffects2 } from './fx-physics.js';
+export { VerletWorld } from './fx-physics.js';
+import '../chunks/registry-D23neB4M.js';
 import '../chunks/base-DchG4q_S.js';
 import '../chunks/generative-2LhxG5BJ.js';
 import '../chunks/shared-CkKHWrtJ.js';
@@ -19,6 +25,9 @@ const FX2_PACKS = {
     light: LIGHT_FX,
     depth: DEPTH3_FX,
     morph: MORPH2_FX,
+    transitions: TRANSITIONS2_FX,
+    weather: WEATHER_FX,
+    physics: PHYSICS2_FX,
 };
 /** Register every 6.x pack (idempotent). */
 function registerFx2() {
@@ -27,7 +36,10 @@ function registerFx2() {
     registerLightEffects();
     register3dEffects();
     registerMorphEffects2();
+    registerTransitionEffects2();
+    registerWeatherEffects();
+    registerPhysicsEffects2();
 }
 
-export { DEPTH3_FX, FX2_PACKS, GPU_FX, LIGHT_FX, MORPH2_FX, TEXT3_FX, register3dEffects, registerFx2, registerGpuEffects, registerLightEffects, registerMorphEffects2, registerTextEffects3 };
+export { DEPTH3_FX, FX2_PACKS, GPU_FX, LIGHT_FX, MORPH2_FX, PHYSICS2_FX, TEXT3_FX, TRANSITIONS2_FX, WEATHER_FX, register3dEffects, registerFx2, registerGpuEffects, registerLightEffects, registerMorphEffects2, registerPhysicsEffects2, registerTextEffects3, registerTransitionEffects2, registerWeatherEffects };
 //# sourceMappingURL=fx2.js.map

package/dist/components/fx2.js.map

@@ -1 +1 @@
-{"version":3,"file":"fx2.js","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';\nimport { GPU_FX, registerGpuEffects } from './gpu';\nimport { TEXT3_FX, registerTextEffects3, splitChars } from './text3';\nimport { LIGHT_FX, registerLightEffects, trackPointer } from './light';\nimport { DEPTH3_FX, register3dEffects } from './depth3';\nimport { MORPH2_FX, registerMorphEffects2, samplePath, pointsToPath } from './morph2';\n\nexport { GPU_FX, registerGpuEffects, TEXT3_FX, registerTextEffects3, splitChars };\nexport { shaderBackground, supportsWebGL2, fieldFallback, GLSL_HEAD } from './gl';\nexport type { ShaderSpec } from './gl';\n\nexport { LIGHT_FX, registerLightEffects, trackPointer };\n\nexport { DEPTH3_FX, register3dEffects };\n\nexport { MORPH2_FX, registerMorphEffects2, samplePath, pointsToPath };\n\n/** The 6.x effect packs by name. */\nexport const FX2_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};\n\n/** Register every 6.x pack (idempotent). */\nexport function registerFx2(): void {\n  registerGpuEffects();\n  registerTextEffects3();\n  registerLightEffects();\n  register3dEffects();\n  registerMorphEffects2();\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAsBA;AACO,MAAM,SAAS,GAAuC;AAC3D,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,KAAK,EAAE,QAAQ;AACf,IAAA,KAAK,EAAE,SAAS;AAChB,IAAA,KAAK,EAAE,SAAS;;AAGlB;SACgB,WAAW,GAAA;AACzB,IAAA,kBAAkB,EAAE;AACpB,IAAA,oBAAoB,EAAE;AACtB,IAAA,oBAAoB,EAAE;AACtB,IAAA,iBAAiB,EAAE;AACnB,IAAA,qBAAqB,EAAE;AACzB;;;;"}
+{"version":3,"file":"fx2.js","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';\nimport { GPU_FX, registerGpuEffects } from './gpu';\nimport { TEXT3_FX, registerTextEffects3, splitChars } from './text3';\nimport { LIGHT_FX, registerLightEffects, trackPointer } from './light';\nimport { DEPTH3_FX, register3dEffects } from './depth3';\nimport { MORPH2_FX, registerMorphEffects2, samplePath, pointsToPath } from './morph2';\nimport { TRANSITIONS2_FX, registerTransitionEffects2, pageTransition, crossDocumentTransitions } from './transitions2';\nimport { WEATHER_FX, registerWeatherEffects, skyAt } from './weather';\nimport { PHYSICS2_FX, registerPhysicsEffects2, VerletWorld } from './physics2';\n\nexport { GPU_FX, registerGpuEffects, TEXT3_FX, registerTextEffects3, splitChars };\nexport { shaderBackground, supportsWebGL2, fieldFallback, GLSL_HEAD } from './gl';\nexport type { ShaderSpec } from './gl';\n\nexport { LIGHT_FX, registerLightEffects, trackPointer };\n\nexport { DEPTH3_FX, register3dEffects };\n\nexport { MORPH2_FX, registerMorphEffects2, samplePath, pointsToPath };\n\nexport { TRANSITIONS2_FX, registerTransitionEffects2, pageTransition, crossDocumentTransitions };\n\nexport { WEATHER_FX, registerWeatherEffects, skyAt };\n\nexport { PHYSICS2_FX, registerPhysicsEffects2, VerletWorld };\n\n/** The 6.x effect packs by name. */\nexport const FX2_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};\n\n/** Register every 6.x pack (idempotent). */\nexport function registerFx2(): void {\n  registerGpuEffects();\n  registerTextEffects3();\n  registerLightEffects();\n  register3dEffects();\n  registerMorphEffects2();\n  registerTransitionEffects2();\n  registerWeatherEffects();\n  registerPhysicsEffects2();\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA;AACO,MAAM,SAAS,GAAuC;AAC3D,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,KAAK,EAAE,QAAQ;AACf,IAAA,KAAK,EAAE,SAAS;AAChB,IAAA,KAAK,EAAE,SAAS;AAChB,IAAA,WAAW,EAAE,eAAe;AAC5B,IAAA,OAAO,EAAE,UAAU;AACnB,IAAA,OAAO,EAAE,WAAW;;AAGtB;SACgB,WAAW,GAAA;AACzB,IAAA,kBAAkB,EAAE;AACpB,IAAA,oBAAoB,EAAE;AACtB,IAAA,oBAAoB,EAAE;AACtB,IAAA,iBAAiB,EAAE;AACnB,IAAA,qBAAqB,EAAE;AACvB,IAAA,0BAA0B,EAAE;AAC5B,IAAA,sBAAsB,EAAE;AACxB,IAAA,uBAAuB,EAAE;AAC3B;;;;"}

package/dist/components/solid.js

@@ -28,7 +28,7 @@ import './depth.js';
 import './layout.js';
 import './packs.js';
 import './fx.js';
-import '../chunks/registry-Bu5NrAyA.js';
+import '../chunks/registry-D23neB4M.js';
 import './a11y.js';
 import '../chunks/index-tags-DucKMQr_.js';
 import './perf.js';

package/dist/components/svelte.js

@@ -27,7 +27,7 @@ import './depth.js';
 import './layout.js';
 import './packs.js';
 import './fx.js';
-import '../chunks/registry-Bu5NrAyA.js';
+import '../chunks/registry-D23neB4M.js';
 import './a11y.js';
 import '../chunks/index-tags-DucKMQr_.js';
 import './perf.js';

package/dist/components/vue.js

@@ -25,7 +25,7 @@ import './depth.js';
 import './layout.js';
 import './packs.js';
 import './fx.js';
-import '../chunks/registry-Bu5NrAyA.js';
+import '../chunks/registry-D23neB4M.js';
 import './a11y.js';
 import '../chunks/index-tags-DucKMQr_.js';
 import './perf.js';