@pixerate/flair 0.9.0 → 0.10.0

package/dist/svg-CpeanaE_.d.ts

@@ -0,0 +1,375 @@
+/**
+ * Vector motion: animated SVG pictures described as data. A picture changes in
+ * steps (step 0 when it starts, step n at `steps[n - 1]` ms), and everything
+ * here is a pure function of its arguments, so a frame comes out the same
+ * however it is reached (played, stepped for a recording, or seeked).
+ */
+/** Easing curves by name. */
+declare const EASES: {
+    readonly linear: (t: number) => number;
+    readonly "in-out": (t: number) => number;
+    readonly out: (t: number) => number;
+};
+type EaseName = keyof typeof EASES;
+/** How long a change takes by default, in ms. */
+declare const STEP_MS = 800;
+/**
+ * When `step` starts, in ms since the media started (step 0 at 0, step n at
+ * `steps[n - 1]`), or undefined if it has not started yet.
+ */
+declare function stepStart(steps: readonly number[], step: number): number | undefined;
+/**
+ * How far a change that plays on `step` (after `delay` ms, over `ms`) has
+ * got at `timeMs`, eased: 0 before it starts, 1 once it is over.
+ */
+declare function stepProgress(steps: readonly number[], timeMs: number, step: number, options?: {
+    delay?: number;
+    ms?: number;
+    ease?: EaseName;
+}): number;
+/** The key an item in a list of data keeps from one state to the next. */
+type DataKey = (item: unknown, index: number) => string;
+/**
+ * Keys items by their `id`, `key`, `name` or `label` (or a link's `source`
+ * and `target`), else by position.
+ */
+declare const defaultDataKey: DataKey;
+/**
+ * Data between two states, `u` of the way from `a` to `b`. Numbers blend;
+ * lists match their items by key (`keyOf`), so each keeps its identity and
+ * moves rather than jumping, with items only in `b` growing from nothing and
+ * items only in `a` shrinking away; objects blend field by field; anything
+ * else changes halfway.
+ */
+declare function lerpData<D>(a: D, b: D, u: number, keyOf?: DataKey): D;
+/**
+ * The data to show at `timeMs`, for media whose data has a state per step:
+ * `states[n]` is shown from step n (the last one stays), reached by moving
+ * from the state before it over `ms`.
+ */
+declare function stepData<D>(states: readonly D[], steps: readonly number[], timeMs: number, options?: {
+    ms?: number;
+    ease?: EaseName;
+    keyOf?: DataKey;
+}): D;
+/**
+ * An animated SVG picture: markup plus changes to its elements. Draw it with
+ * `SvgPlayer` (or `svgView`), or compute frames yourself with `svgFrame`.
+ */
+interface SvgMotion {
+    /** One self-contained `<svg>` with a `viewBox`: no scripts, no outside links. */
+    svg: string;
+    /** Changes to its elements, each on a step. */
+    animate?: SvgAnimation[];
+}
+/** A box in an SVG's `viewBox` units: `[x, y, width, height]`. */
+type SvgBox = readonly [number, number, number, number];
+/** A change to one element of an {@link SvgMotion}, or (with `view`) to the whole picture. */
+interface SvgAnimation {
+    /** The element's `id` in the SVG (not needed for `view`). */
+    id?: string;
+    /** The step it plays on: 0 (default) when the media starts, 1 with the next shot, and so on. */
+    step?: number;
+    /** Ms after the step starts. */
+    delay?: number;
+    /** How long it takes, in ms (default {@link STEP_MS}). */
+    ms?: number;
+    ease?: EaseName;
+    /**
+     * Attributes from one value to another: numbers, colours (`#rrggbb`), or
+     * strings whose numbers change while the rest stays the same (a path's
+     * `d`, a `transform`, `points`).
+     */
+    attrs?: Record<string, readonly [string | number, string | number]>;
+    /** Draws a line or outline on along its length, from 0 to 1 (or between two fractions). */
+    draw?: boolean | readonly [number, number];
+    /**
+     * Zooms and pans the whole picture to frame a box (`[x, y, width, height]`
+     * in the `viewBox`'s units) or an element by id (with a margin round it),
+     * from where the last `view` left it (at first, the whole `viewBox`).
+     */
+    view?: SvgBox | string;
+    /**
+     * Moves the element along a path (by id) from its start to its end, or
+     * between the fractions in `at`; draw the element round (0, 0), like a
+     * circle at `cx="0" cy="0"`.
+     */
+    along?: string;
+    /** How far along the path `along` moves the element, from and to (default [0, 1]). */
+    at?: readonly [number, number];
+    /** Counts the element's text from one number to the other. */
+    count?: readonly [number, number];
+    /** How a count is written: `{n}` stands for the number ("{n}%", "$ {n}M"). */
+    format?: string;
+    /** Decimals in a count (default 0). */
+    decimals?: number;
+    /**
+     * Writes this text into the element letter by letter: none of it when the
+     * change starts, all of it when it ends (a typewriter).
+     */
+    write?: string;
+    /**
+     * With `write`: letters not yet written show characters picked from this
+     * string, changing every {@link SCRAMBLE_MS} ms, so the text decodes
+     * rather than types. The same time always picks the same characters.
+     */
+    scramble?: string;
+    /** With `write`: shown after the written letters while it writes ("▌", "|"). */
+    caret?: string;
+}
+/** How often scrambled letters change, in ms (see `SvgAnimation.scramble`). */
+declare const SCRAMBLE_MS = 50;
+/**
+ * `text` with `u` (0–1) of its letters written (see `SvgAnimation.write`):
+ * the rest scrambled from `scramble` (picked by `timeMs`) or left off, then
+ * the caret while it is unfinished. Letters are code points, so emoji and
+ * accents are never split.
+ */
+declare function writtenText(text: string, u: number, options?: {
+    scramble?: string;
+    caret?: string;
+    timeMs?: number;
+}): string;
+/** What one element of an animated SVG shows at a time. */
+interface SvgElementFrame {
+    attrs: Record<string, string>;
+    /** How much of its length is drawn, 0–1. */
+    draw?: number;
+    text?: string;
+    /** Where it is along a path: the path's id and the fraction of its length. */
+    along?: {
+        path: string;
+        at: number;
+    };
+    /**
+     * The whole picture's framing (on the frame for {@link SVG_PICTURE}): `u`
+     * of the way from one view to the next, `null` being the whole `viewBox`.
+     */
+    view?: {
+        from: SvgBox | string | null;
+        to: SvgBox | string;
+        u: number;
+    };
+}
+/** The key of the whole picture's frame in {@link svgFrame}'s result (for `view`). */
+declare const SVG_PICTURE = "";
+/** A value `u` of the way between two attribute values (see `SvgAnimation.attrs`). */
+declare function lerpAttr(a: string | number, b: string | number, u: number): string;
+/** Formats a number for a count animation (`{n}` stands for the rounded number). */
+declare function formatCount(value: number, options?: {
+    decimals?: number;
+    format?: string;
+}): string;
+/**
+ * What each animated element shows at `timeMs`. For each attribute (or
+ * line, count or writing) the latest change to have started wins; before the first
+ * one starts, the element shows that change's starting value, so something
+ * that grows in later is hidden until then.
+ */
+declare function svgFrame(animations: readonly SvgAnimation[], steps: readonly number[], timeMs: number): Map<string, SvgElementFrame>;
+/**
+ * The opening tag of the root element at the start of `markup` (up to its
+ * first `>`), cut out without a regular expression, so checks on it stay
+ * linear however long or odd the markup is.
+ */
+declare function svgOpeningTag(markup: string): string;
+/** Problems with an {@link SvgMotion}, as sentences; none when it can be drawn. */
+declare function svgMotionIssues(motion: unknown): string[];
+
+/**
+ * Time source for generative animations and playback.
+ * By default that is real time (animation frames and timers).
+ * A ManualClock instead moves only when told to, enabling frame-exact
+ * rendering, video recording, scrubbing, or fast simulation without waiting.
+ */
+interface Clock {
+    /** Current time in milliseconds. */
+    now(): number;
+    /** Resolves on the next frame. */
+    frame(): Promise<void>;
+    /** Resolves after `ms` milliseconds of this clock's time. */
+    sleep(ms: number): Promise<void>;
+    /**
+     * Whether the clock follows wall time. Live clocks stop when the tab is in
+     * the background (browsers pause animation frames there).
+     */
+    readonly live: boolean;
+}
+declare const pageHidden: () => boolean;
+declare const realClock: Clock;
+/**
+ * A clock that only moves when {@link advance} or {@link tick} is called.
+ * Each call fires the sleeps that fall due, in order, letting awaiting code
+ * run before the next sleep fires, then resolves pending frames.
+ */
+declare class ManualClock implements Clock {
+    readonly live = false;
+    private time;
+    private frames;
+    private sleepers;
+    private seq;
+    constructor(start?: number);
+    now(): number;
+    frame(): Promise<void>;
+    sleep(ms: number): Promise<void>;
+    get pending(): boolean;
+    advance(ms: number): Promise<void>;
+    tick(fps?: number): Promise<void>;
+}
+/**
+ * A repeatable pseudo-random number in [0, 1) for a key and index.
+ * Useful for deterministic, reproducible animations.
+ */
+declare function jitter(key: string, n: number): number;
+
+/**
+ * Drawing animated SVG pictures (see `SvgMotion`) in the DOM: a sanitising
+ * parser, a view that applies frames, and a player that runs on a `Clock`.
+ */
+
+/**
+ * The `<svg>` in `markup`, parsed and made safe to show: no scripts, event
+ * handlers, `<foreignObject>` or links outside itself. Undefined when it is
+ * not an SVG.
+ */
+declare function parseSvg(markup: string): SVGSVGElement | undefined;
+interface SvgViewOptions {
+    /** Called with the id of the innermost element with an id that is clicked. */
+    onPick?: (id: string) => void;
+}
+/** An {@link SvgMotion} drawn into an element; call `draw` with a time to show it then. */
+interface SvgView {
+    /** A `div` filled by the picture; put it anywhere. */
+    readonly element: HTMLDivElement;
+    /** Shows the picture at `timeMs`, with steps starting at `steps` (ms). */
+    draw(timeMs: number, steps?: readonly number[]): void;
+    /** An image of the picture as drawn now. */
+    capture(pixels: {
+        width: number;
+        height: number;
+    }): Promise<HTMLCanvasElement | undefined>;
+}
+/** Shows an {@link SvgMotion} as a live view; with `onPick`, clicks report the id of the element clicked. */
+declare function svgView(motion: SvgMotion, options?: SvgViewOptions): SvgView;
+/** How long an {@link SvgMotion} runs: its last change's end, in ms (at least 1). */
+declare function svgDuration(motion: SvgMotion, steps?: readonly number[]): number;
+interface SvgPlayerOptions extends SvgViewOptions {
+    /** Time source (default: animation frames). Pass a `ManualClock` to step frames yourself. */
+    clock?: Clock;
+    /** Start playing at once (default `true`). */
+    autoplay?: boolean;
+    /** Start again at the end (default `true`). */
+    loop?: boolean;
+    /** Loop length in ms (default: the picture's own, see {@link svgDuration}, plus `hold`). */
+    duration?: number;
+    /** Ms to rest on the last frame before looping (default 600). */
+    hold?: number;
+    /** Playback speed (default 1). */
+    speed?: number;
+    /** Step start times in ms, for pictures that change on steps (default none). */
+    steps?: readonly number[];
+    /** Pause the animation loop when scrolled out of view via IntersectionObserver (default false). */
+    pauseWhenHidden?: boolean;
+    /** Wait to start playing until the element enters the viewport via IntersectionObserver (default false). When true, autoplay is deferred until first visible. */
+    playOnEnter?: boolean;
+    /** 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.
+     */
+    trigger?: SvgTrigger;
+    /** The element whose pointer events trigger it (default the container). */
+    triggerTarget?: HTMLElement;
+}
+/** What makes a triggered {@link SvgPlayer} play. */
+type SvgTrigger = "hover" | "press" | "click";
+/**
+ * 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.
+ */
+declare class SvgPlayer {
+    private readonly container;
+    readonly view: SvgView;
+    private readonly clock;
+    private steps;
+    private readonly loop;
+    private length;
+    private readonly motion;
+    private readonly trigger?;
+    private readonly triggerTarget?;
+    /** With a hover or press trigger: 1 playing to the end, -1 back to the start. */
+    private direction;
+    /** With a click trigger: when each click came, in ms of playback. */
+    private clicks;
+    private readonly hideWhenPaused;
+    private speed;
+    private time;
+    private last;
+    private playing;
+    private disposed;
+    private wasPlayingBeforeHidden;
+    private hasEnteredViewport;
+    private intersectionObserver?;
+    constructor(container: HTMLElement, motion: SvgMotion, options?: SvgPlayerOptions);
+    /** The loop length in ms. */
+    get duration(): number;
+    /** The time shown, in ms. */
+    get currentTime(): number;
+    get isPlaying(): boolean;
+    play(): void;
+    pause(): void;
+    /** Stops playback, rewinds to `0 ms`, and hides the view if `hideWhenPaused` is enabled. */
+    reset(): void;
+    /** Shows the picture at `ms` (wrapped into the loop when looping). */
+    seek(ms: number): void;
+    setSpeed(speed: number): void;
+    /**
+     * Plays to the end (`true`) or back to the start (`false`) from wherever it
+     * is: what a hover or press trigger does, for hosts that drive it themselves
+     * (a hovered card, a focused button).
+     */
+    setActive(active: boolean): void;
+    /**
+     * Plays the picture's next step (what a click trigger does): steps 1, 2, …
+     * in turn, then step 1 again, so a picture whose last step leads back to
+     * how it started toggles; one with no steps plays again from the start.
+     */
+    advance(): void;
+    dispose(): void;
+    private onEnter;
+    private onLeave;
+    private onClick;
+    private listen;
+    private run;
+}
+interface AnimateCountOptions {
+    /** Starting number. */
+    from: number;
+    /** Ending number. */
+    to: number;
+    /** Duration in ms (default {@link STEP_MS}). */
+    ms?: number;
+    /** Delay before starting in ms (default 0). */
+    delay?: number;
+    /** Easing curve (default `"out"`). */
+    ease?: EaseName;
+    /** Number of decimal places (default 0). */
+    decimals?: number;
+    /** Format template where `{n}` is replaced by the formatted number (default `"{n}"`). */
+    format?: string;
+    /** Time source (default: animation frames). */
+    clock?: Clock;
+    /** Called with each formatted text frame (and raw numeric value). */
+    onUpdate: (text: string, value: number) => void;
+}
+/**
+ * Counts a number from `from` to `to` over `ms` using Flair's easing curves
+ * and `Clock`, calling `onUpdate` with the formatted string on each frame.
+ * Returns a cancel function that stops the animation.
+ */
+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, type EaseName as b, SCRAMBLE_MS as c, STEP_MS as d, SVG_PICTURE as e, type SvgAnimation as f, type SvgBox as g, type SvgElementFrame as h, SvgPlayer 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 };

package/dist/{types-CgHG5JLv.d.ts → types-D8uhzDyN.d.ts}

@@ -1,8 +1,8 @@
 import { C as ControlValue, a as ControlDef } from './controls-Syr6drzO.js';
-import { S as SvgMotion } from './motion-Ce0lmzm3.js';
+import { S as SvgMotion, a as SvgTrigger } from './svg-CpeanaE_.js';
 
 /** What an effect is for, used to group the catalog. */
-type EffectCategory = "gradient" | "organic" | "pattern" | "light" | "space" | "retro" | "image" | "overlay" | "text" | "morph" | "transition" | "loader" | "data" | "icon";
+type EffectCategory = "gradient" | "organic" | "pattern" | "light" | "space" | "retro" | "image" | "overlay" | "text" | "morph" | "interaction" | "transition" | "loader" | "data" | "icon";
 /** Every category, in the order the catalog lists them. */
 declare const EFFECT_CATEGORIES: readonly EffectCategory[];
 /** Named control values: a look an effect can be switched to. */
@@ -67,6 +67,12 @@ interface VectorEffect extends EffectBase {
     derived?: (values: Record<string, ControlValue>) => Record<string, string | number>;
     /** Ms to rest on the last frame before it loops (default 600). */
     hold?: number;
+    /**
+     * Plays in answer to the pointer rather than on a loop: pass it to
+     * `SvgPlayer` (`{ trigger: effect.trigger }`). Click-triggered pictures
+     * change on steps, each click playing the next.
+     */
+    trigger?: SvgTrigger;
 }
 type EffectDefinition = ShaderEffect | VectorEffect;
 /** The types a vector effect's `{{name: type …}}` placeholder can declare. */

package/dist/vector/index.d.ts

@@ -1,6 +1,4 @@
-import { a as EaseName, S as SvgMotion } from '../motion-Ce0lmzm3.js';
-export { D as DataKey, E as EASES, b as SCRAMBLE_MS, c as STEP_MS, d as SVG_PICTURE, e as SvgAnimation, f as SvgBox, g as SvgElementFrame, h as defaultDataKey, i as formatCount, l as lerpAttr, j as lerpData, s as stepData, k as stepProgress, m as stepStart, n as svgFrame, o as svgMotionIssues, p as svgOpeningTag, w as writtenText } from '../motion-Ce0lmzm3.js';
-import { C as Clock } from '../clock-BhdXWH-n.js';
+export { A as AnimateCountOptions, D as DataKey, E as EASES, b as EaseName, c as SCRAMBLE_MS, d as STEP_MS, e as SVG_PICTURE, f as SvgAnimation, g as SvgBox, h as SvgElementFrame, S as SvgMotion, i 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-CpeanaE_.js';
 
 /**
  * Shape morphing: any SVG paths turned into paths with the same structure, so
@@ -29,120 +27,4 @@ declare function morphSequence(paths: readonly string[], options?: MorphOptions)
  */
 declare function morphPaths(from: string, to: string, options?: MorphOptions): [string, string];
 
-/**
- * Drawing animated SVG pictures (see `SvgMotion`) in the DOM: a sanitising
- * parser, a view that applies frames, and a player that runs on a `Clock`.
- */
-
-/**
- * The `<svg>` in `markup`, parsed and made safe to show: no scripts, event
- * handlers, `<foreignObject>` or links outside itself. Undefined when it is
- * not an SVG.
- */
-declare function parseSvg(markup: string): SVGSVGElement | undefined;
-interface SvgViewOptions {
-    /** Called with the id of the innermost element with an id that is clicked. */
-    onPick?: (id: string) => void;
-}
-/** An {@link SvgMotion} drawn into an element; call `draw` with a time to show it then. */
-interface SvgView {
-    /** A `div` filled by the picture; put it anywhere. */
-    readonly element: HTMLDivElement;
-    /** Shows the picture at `timeMs`, with steps starting at `steps` (ms). */
-    draw(timeMs: number, steps?: readonly number[]): void;
-    /** An image of the picture as drawn now. */
-    capture(pixels: {
-        width: number;
-        height: number;
-    }): Promise<HTMLCanvasElement | undefined>;
-}
-/** Shows an {@link SvgMotion} as a live view; with `onPick`, clicks report the id of the element clicked. */
-declare function svgView(motion: SvgMotion, options?: SvgViewOptions): SvgView;
-/** How long an {@link SvgMotion} runs: its last change's end, in ms (at least 1). */
-declare function svgDuration(motion: SvgMotion, steps?: readonly number[]): number;
-interface SvgPlayerOptions extends SvgViewOptions {
-    /** Time source (default: animation frames). Pass a `ManualClock` to step frames yourself. */
-    clock?: Clock;
-    /** Start playing at once (default `true`). */
-    autoplay?: boolean;
-    /** Start again at the end (default `true`). */
-    loop?: boolean;
-    /** Loop length in ms (default: the picture's own, see {@link svgDuration}, plus `hold`). */
-    duration?: number;
-    /** Ms to rest on the last frame before looping (default 600). */
-    hold?: number;
-    /** Playback speed (default 1). */
-    speed?: number;
-    /** Step start times in ms, for pictures that change on steps (default none). */
-    steps?: readonly number[];
-    /** Pause the animation loop when scrolled out of view via IntersectionObserver (default false). */
-    pauseWhenHidden?: boolean;
-    /** Wait to start playing until the element enters the viewport via IntersectionObserver (default false). When true, autoplay is deferred until first visible. */
-    playOnEnter?: boolean;
-    /** Hide the view (`visibility: hidden`) whenever playback is paused or reset (default false). */
-    hideWhenPaused?: boolean;
-}
-/**
- * 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.
- */
-declare class SvgPlayer {
-    private readonly container;
-    readonly view: SvgView;
-    private readonly clock;
-    private readonly steps;
-    private readonly loop;
-    private readonly length;
-    private readonly hideWhenPaused;
-    private speed;
-    private time;
-    private last;
-    private playing;
-    private disposed;
-    private wasPlayingBeforeHidden;
-    private hasEnteredViewport;
-    private intersectionObserver?;
-    constructor(container: HTMLElement, motion: SvgMotion, options?: SvgPlayerOptions);
-    /** The loop length in ms. */
-    get duration(): number;
-    /** The time shown, in ms. */
-    get currentTime(): number;
-    get isPlaying(): boolean;
-    play(): void;
-    pause(): void;
-    /** Stops playback, rewinds to `0 ms`, and hides the view if `hideWhenPaused` is enabled. */
-    reset(): void;
-    /** Shows the picture at `ms` (wrapped into the loop when looping). */
-    seek(ms: number): void;
-    setSpeed(speed: number): void;
-    dispose(): void;
-    private run;
-}
-interface AnimateCountOptions {
-    /** Starting number. */
-    from: number;
-    /** Ending number. */
-    to: number;
-    /** Duration in ms (default {@link STEP_MS}). */
-    ms?: number;
-    /** Delay before starting in ms (default 0). */
-    delay?: number;
-    /** Easing curve (default `"out"`). */
-    ease?: EaseName;
-    /** Number of decimal places (default 0). */
-    decimals?: number;
-    /** Format template where `{n}` is replaced by the formatted number (default `"{n}"`). */
-    format?: string;
-    /** Time source (default: animation frames). */
-    clock?: Clock;
-    /** Called with each formatted text frame (and raw numeric value). */
-    onUpdate: (text: string, value: number) => void;
-}
-/**
- * Counts a number from `from` to `to` over `ms` using Flair's easing curves
- * and `Clock`, calling `onUpdate` with the formatted string on each frame.
- * Returns a cancel function that stops the animation.
- */
-declare function animateCount(options: AnimateCountOptions): () => void;
-
-export { type AnimateCountOptions, EaseName, type MorphOptions, SvgMotion, SvgPlayer, type SvgPlayerOptions, type SvgView, type SvgViewOptions, animateCount, morphPaths, morphSequence, parseSvg, svgDuration, svgView };
+export { type MorphOptions, morphPaths, morphSequence };

package/dist/vector/index.js

@@ -20,7 +20,7 @@ import {
   svgOpeningTag,
   svgView,
   writtenText
-} from "../chunk-TDMD5XAU.js";
+} from "../chunk-YACVME3D.js";
 import {
   morphPaths,
   morphSequence

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/flair",
-  "version": "0.9.0",
+  "version": "0.10.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",