@pixerate/flair 0.28.0 → 0.29.0

package/dist/{svg-BhRboN9q.d.ts → svg-DaKRPA9v.d.ts}

@@ -289,17 +289,30 @@ interface SvgPlayerOptions extends SvgViewOptions {
     /** Hide the view (`visibility: hidden`) whenever playback is paused or reset (default false). */
     hideWhenPaused?: boolean;
     /**
-     * Plays in answer to the pointer instead of on its own (see {@link SvgTrigger}):
-     * `"hover"` and `"press"` play to the end while hovered or held and back to
-     * the start after; `"click"` plays the next step on each click, starting
-     * over after the last. `autoplay`, `loop` and `steps` are ignored.
+     * Plays in answer to the pointer or the page instead of on its own (see
+     * {@link SvgTrigger}): `"hover"` and `"press"` play to the end while
+     * hovered or held and back to the start after; `"click"` plays the next
+     * step on each click, starting over after the last; `"scroll"` follows
+     * the trigger target's progress through the viewport (see `scrollRange`),
+     * scrubbing back and forth as the page scrolls. `autoplay`, `loop` and
+     * `steps` are ignored.
      */
     trigger?: SvgTrigger;
-    /** The element whose pointer events trigger it (default the container). */
+    /** The element whose pointer events trigger it, or whose scrolling a scroll trigger follows (default the container). */
     triggerTarget?: HTMLElement;
+    /**
+     * For a scroll trigger: the stretch of the target's progress through the
+     * viewport (0 as its top comes in at the bottom, 1 as its bottom leaves at
+     * the top) over which the picture plays from start to end (default
+     * `[0.1, 0.6]`: from just after it comes into view to a little past the
+     * middle).
+     */
+    scrollRange?: readonly [number, number];
 }
 /** What makes a triggered {@link SvgPlayer} play. */
-type SvgTrigger = "hover" | "press" | "click";
+type SvgTrigger = "hover" | "press" | "click" | "scroll";
+/** The stretch of the viewport a scroll-triggered picture plays over (see `SvgPlayerOptions.scrollRange`). */
+declare const SCROLL_RANGE: readonly [number, number];
 /**
  * Plays an {@link SvgMotion} inside `container`: loops by default, and can be
  * paused, sought and sped up. Dispose it to stop and remove the picture.
@@ -327,6 +340,10 @@ declare class SvgPlayer {
     private wasPlayingBeforeHidden;
     private hasEnteredViewport;
     private intersectionObserver?;
+    private readonly scrollRange;
+    /** A scroll trigger's pending update (one per frame). */
+    private scrollFrame;
+    private followingScroll;
     constructor(container: HTMLElement, motion: SvgMotion, options?: SvgPlayerOptions);
     /** The loop length in ms. */
     get duration(): number;
@@ -339,6 +356,17 @@ declare class SvgPlayer {
     reset(): void;
     /** Shows the picture at `ms` (wrapped into the loop when looping). */
     seek(ms: number): void;
+    /**
+     * Shows the picture at `progress` of the way through it, 0–1: how hosts
+     * scrub it themselves (a slider, a scroll position of their own). A scroll
+     * trigger stops following the page once a host calls this.
+     */
+    setProgress(progress: number): void;
+    /**
+     * A scroll trigger's playback position, 0–1, for the trigger target's
+     * `progress` through the viewport (see {@link SvgPlayerOptions.scrollRange}).
+     */
+    scrollPosition(progress: number): number;
     setSpeed(speed: number): void;
     /**
      * Plays to the end (`true`) or back to the start (`false`) from wherever it
@@ -356,6 +384,10 @@ declare class SvgPlayer {
     private onEnter;
     private onLeave;
     private onClick;
+    /** Seeks to where the trigger target is in the viewport. */
+    private followScroll;
+    /** A scroll or resize: follow it on the next frame (or now, without frames). */
+    private onScroll;
     private listen;
     private run;
 }
@@ -386,4 +418,4 @@ interface AnimateCountOptions {
  */
 declare function animateCount(options: AnimateCountOptions): () => void;
 
-export { type AnimateCountOptions as A, svgMotionIssues as B, type Clock as C, type DataKey as D, EASES as E, svgOpeningTag as F, svgView as G, writtenText as H, ManualClock as M, type SvgMotion as S, type SvgTrigger as a, SvgPlayer as b, type EaseName as c, SCRAMBLE_MS as d, STEP_MS as e, SVG_PICTURE as f, type SvgAnimation as g, type SvgBox as h, type SvgElementFrame as i, type SvgPlayerOptions as j, type SvgView as k, type SvgViewOptions as l, animateCount as m, defaultDataKey as n, formatCount as o, jitter as p, lerpAttr as q, lerpData as r, pageHidden as s, parseSvg as t, realClock as u, stepData as v, stepProgress as w, stepStart as x, svgDuration as y, svgFrame as z };
+export { type AnimateCountOptions as A, svgFrame as B, type Clock as C, type DataKey as D, EASES as E, svgMotionIssues as F, svgOpeningTag as G, svgView as H, writtenText as I, ManualClock as M, type SvgMotion as S, type SvgTrigger as a, SvgPlayer as b, type EaseName as c, SCRAMBLE_MS as d, SCROLL_RANGE as e, STEP_MS as f, SVG_PICTURE as g, type SvgAnimation as h, type SvgBox as i, type SvgElementFrame as j, type SvgPlayerOptions as k, type SvgView as l, type SvgViewOptions as m, animateCount as n, defaultDataKey as o, formatCount as p, jitter as q, lerpAttr as r, lerpData as s, pageHidden as t, parseSvg as u, realClock as v, stepData as w, stepProgress as x, stepStart as y, svgDuration as z };

package/dist/{types-DUOMxZaq.d.ts → types-wh28fXW4.d.ts}

@@ -1,8 +1,8 @@
 import { C as ControlValue, a as ControlDef } from './controls-Ec6P0Vpy.js';
-import { S as SvgMotion, a as SvgTrigger } from './svg-BhRboN9q.js';
+import { S as SvgMotion, a as SvgTrigger } from './svg-DaKRPA9v.js';
 
 /** What an effect is for, used to group the catalog. */
-type EffectCategory = "gradient" | "organic" | "pattern" | "light" | "lighting" | "space" | "retro" | "image" | "overlay" | "text" | "morph" | "interaction" | "pyrotechnics" | "timewarp" | "melt" | "electric" | "splatter" | "bubble" | "sticker" | "trail" | "particles" | "debris" | "impact" | "comic" | "atmosphere" | "glow" | "shadow" | "distortion" | "transition" | "loader" | "data" | "icon";
+type EffectCategory = "gradient" | "organic" | "pattern" | "light" | "lighting" | "space" | "retro" | "image" | "overlay" | "text" | "morph" | "interaction" | "pyrotechnics" | "timewarp" | "melt" | "electric" | "splatter" | "bubble" | "sticker" | "trail" | "particles" | "debris" | "impact" | "comic" | "atmosphere" | "glow" | "shadow" | "distortion" | "audio" | "scroll" | "transition" | "loader" | "data" | "icon";
 /** Every category, in the order the catalog lists them. */
 declare const EFFECT_CATEGORIES: readonly EffectCategory[];
 /**

package/dist/vector/index.d.ts

@@ -1,5 +1,5 @@
-import { h as SvgBox, S as SvgMotion } from '../svg-BhRboN9q.js';
-export { A as AnimateCountOptions, D as DataKey, E as EASES, c as EaseName, d as SCRAMBLE_MS, e as STEP_MS, f as SVG_PICTURE, g as SvgAnimation, i as SvgElementFrame, b as SvgPlayer, j as SvgPlayerOptions, a as SvgTrigger, k as SvgView, l as SvgViewOptions, m as animateCount, n as defaultDataKey, o as formatCount, q as lerpAttr, r as lerpData, t as parseSvg, v as stepData, w as stepProgress, x as stepStart, y as svgDuration, z as svgFrame, B as svgMotionIssues, F as svgOpeningTag, G as svgView, H as writtenText } from '../svg-BhRboN9q.js';
+import { i as SvgBox, S as SvgMotion } from '../svg-DaKRPA9v.js';
+export { A as AnimateCountOptions, D as DataKey, E as EASES, c as EaseName, d as SCRAMBLE_MS, e as SCROLL_RANGE, f as STEP_MS, g as SVG_PICTURE, h as SvgAnimation, j as SvgElementFrame, b as SvgPlayer, k as SvgPlayerOptions, a as SvgTrigger, l as SvgView, m as SvgViewOptions, n as animateCount, o as defaultDataKey, p as formatCount, r as lerpAttr, s as lerpData, u as parseSvg, w as stepData, x as stepProgress, y as stepStart, z as svgDuration, B as svgFrame, F as svgMotionIssues, G as svgOpeningTag, H as svgView, I as writtenText } from '../svg-DaKRPA9v.js';
 
 /**
  * Shape morphing: any SVG paths turned into paths with the same structure, so

package/dist/vector/index.js

@@ -7,16 +7,17 @@ import {
 } from "../chunk-H6L67KHI.js";
 import {
   svgAnimatedMarkup
-} from "../chunk-YBGRXVAE.js";
+} from "../chunk-X3C2VFTM.js";
 import {
   parseViewBox,
   svgFrameMarkup,
   svgInlineLayout,
   svgViewBox
-} from "../chunk-STKEKXCK.js";
+} from "../chunk-AUH3PEFW.js";
 import {
   EASES,
   SCRAMBLE_MS,
+  SCROLL_RANGE,
   STEP_MS,
   SVG_PICTURE,
   SvgPlayer,
@@ -35,7 +36,7 @@ import {
   svgOpeningTag,
   svgView,
   writtenText
-} from "../chunk-PFGGPIMT.js";
+} from "../chunk-DA4UUSDO.js";
 import "../chunk-WMZQCUFJ.js";
 import {
   morphPaths,
@@ -44,6 +45,7 @@ import {
 export {
   EASES,
   SCRAMBLE_MS,
+  SCROLL_RANGE,
   STEP_MS,
   SVG_PICTURE,
   SvgPlayer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/flair",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "description": "Web visual effects and motion graphics: WebGL2 shader effects, animated vector effects, a catalog of ready-made effects, and a UI-agnostic, agent-ready effect editor.",
   "author": "Pixerate",
   "license": "MIT",