@pixerate/flair 0.23.0 → 0.25.0

package/dist/node.d.ts

@@ -1,24 +1,184 @@
 import { C as ControlValue } from './controls-Ec6P0Vpy.js';
+import { S as SvgMotion } from './svg-BhRboN9q.js';
+import { E as EffectDefinition, V as VectorEffect } from './types-DUOMxZaq.js';
 
-/** Finds a local Chrome or Chromium executable, or `null`. */
+/**
+ * Finds a local Chrome or Chromium executable, or `null`: `CHROME_PATH` (or
+ * `CHROME_BIN`), then the usual install places, then a Chromium Playwright
+ * downloaded.
+ */
 declare function findChrome(): string | null;
+/** The ffmpeg to run: `FFMPEG_PATH`, else `ffmpeg` on the `PATH`. */
+declare function ffmpegPath(): string;
+/** A file type the exporter writes, from the output path. */
+type OutputFormat = 'mp4' | 'webm' | 'mov' | 'gif' | 'png' | 'svg';
+/** What to write and how. */
+interface OutputPlan {
+    format: OutputFormat;
+    /** The output path, resolved. For a PNG sequence, a printf pattern (`…/frame_%04d.png`). */
+    path: string;
+    /** Whether the frames keep their alpha. */
+    alpha: boolean;
+    /** ffmpeg's arguments after the input (for mp4, webm and mov). */
+    ffmpegArgs?: string[];
+}
+/**
+ * Works out the format from `outputPath`'s extension and what alpha it can
+ * keep. A path with no extension, or ending in a slash, is a folder of PNG
+ * frames; a `.png` path with a `%d` pattern (`out_%04d.png`) names each
+ * frame, and one without gets `_%04d` added (unless there is one frame).
+ * Throws a sentence for formats it cannot write, and for alpha in MP4.
+ */
+declare function planOutput(outputPath: string, options?: {
+    alpha?: boolean;
+    frames?: number;
+}): OutputPlan;
+/** Where the pointer is in a recording: nowhere (`none`), or the scripted pointer of {@link scriptedPointer} (`auto`). */
+type PointerMode = 'none' | 'auto';
 interface ExportOptions {
-    /** GLSL fragment shader source */
+    /** GLSL fragment shader source (Shadertoy-style `mainImage`). */
     source: string;
-    /** Uniform values override */
+    /**
+     * Control values over the declared defaults. An image control takes a
+     * URL, a `data:` URL, or a local file path (read into a `data:` URL).
+     */
     values?: Record<string, ControlValue>;
-    /** Destination file path (.gif or .mp4) */
+    /** Destination: .mp4, .webm, .mov, .gif, or PNG frames (a folder or `out_%04d.png`). */
     outputPath: string;
     width?: number;
     height?: number;
     fps?: number;
+    /** Seconds (default 3). */
     duration?: number;
+    /** Keep the shader's alpha (WebM, MOV, GIF and PNG; MP4 is always opaque). */
+    alpha?: boolean;
+    /**
+     * The shader draws over other content (`fragColor.a` is coverage): without
+     * `alpha` it is composited over `background`. Otherwise its alpha is
+     * ignored without `alpha`, as on an opaque canvas.
+     */
+    transparent?: boolean;
+    /** CSS colour under transparent pixels when `alpha` is off (default black). */
+    background?: string;
+    /** The pointer: `none` (default) or `auto`, a scripted pointer that hovers, wanders and clicks. */
+    pointer?: PointerMode;
     onProgress?: (frame: number, total: number) => void;
 }
 /**
- * Renders a shader animation frame-by-frame via hardware-accelerated WebGL2 in
- * headless Chrome and encodes to an animated GIF or MP4 video using ffmpeg.
+ * Renders a shader animation frame by frame with WebGL2 in headless Chrome,
+ * the way `ShaderRenderer` draws it (the same GLSL wrapper and built-ins,
+ * images, int and bool controls), and writes MP4 (H.264), WebM (VP9, with
+ * alpha when asked), MOV (ProRes 4444), GIF or PNG frames. MP4, WebM and
+ * MOV need ffmpeg; GIF and PNG do not.
  */
 declare function exportMotionGraphic(options: ExportOptions): Promise<string>;
 
-export { type ExportOptions, exportMotionGraphic, findChrome };
+/**
+ * Renders a catalog effect, applied to a subject, to a file in Node: video
+ * (MP4, WebM, MOV), GIF, PNG frames, or (vector effects) an animated SVG.
+ */
+
+/**
+ * What an effect is applied to, in Node:
+ * - `{ image }`: a picture's file path or URL (or a `data:` URL).
+ * - `{ svg }`: an SVG's file path, URL, or markup (`"<svg …>"`).
+ * - `{ text }`: words, for a vector effect's text, or drawn with `textImage` for a shader's text or mask.
+ * - `{ path }`: SVG path data (`d`), for a shape control.
+ * - `{ video }`: a video file's path, decoded to frames with ffmpeg and shown one per frame.
+ */
+type NodeSubject = {
+    image: string;
+} | {
+    svg: string;
+} | {
+    text: string;
+    font?: string;
+    weight?: number | string;
+} | {
+    path: string;
+} | {
+    video: string;
+};
+interface EffectExportOptions {
+    /** What to apply it to; several fill several controls in order (a transition's from and to). */
+    subject?: NodeSubject | readonly NodeSubject[];
+    /** A preset by name, under `values`. */
+    preset?: string;
+    /** Control values over the defaults (and the subject). An image control also takes a file path. */
+    values?: Record<string, ControlValue>;
+    /** .mp4, .webm, .mov, .gif, .svg (vector effects), or PNG frames (a folder, or `out_%04d.png`). */
+    outputPath: string;
+    /** Pixels (default: 1280 × 720 for effects that show a picture, 720 × 720 for other shaders, a vector's own shape 720 px on its long edge). */
+    width?: number;
+    height?: number;
+    fps?: number;
+    /**
+     * Seconds. Default: a shader's loop (when it loops in 12 s or less), a
+     * video subject's length (up to 10 s), else 3; a vector effect's one
+     * play-through (with its trigger acted out).
+     */
+    duration?: number;
+    /** Keep transparency (WebM, MOV, GIF, PNG and SVG; MP4 is always opaque). */
+    alpha?: boolean;
+    /** CSS colour under transparent pixels without `alpha` (default black for shaders, white for vector effects). */
+    background?: string;
+    /**
+     * The pointer, for effects that answer it: `auto` (the default for them),
+     * a scripted pointer that hovers, wanders and clicks; `none` leaves it
+     * still. Vector effects with a trigger have it acted out (clicked through
+     * their steps, or hovered and let go).
+     */
+    pointer?: PointerMode;
+    onProgress?: (frame: number, total: number) => void;
+}
+/** What a Node subject becomes: control values, and video files by image control. */
+interface NodeSubjectValues {
+    values: Record<string, ControlValue>;
+    /** Image control → video file. */
+    video: Record<string, string>;
+}
+/**
+ * The control values that put Node subjects in `effect` (see
+ * `subjectValues` in `@pixerate/flair/embed`, which picks the controls):
+ * image files and URLs become `data:` URLs, SVG files and URLs are read as
+ * markup, and a video is kept as its file for its control, to be decoded to
+ * frames. Throws a sentence when the effect takes no such thing.
+ */
+declare function nodeSubjectValues(effect: EffectDefinition, subject: NodeSubject | readonly NodeSubject[]): Promise<NodeSubjectValues>;
+/** How a vector effect plays over time in a recording: the frame at each ms, and its loop. */
+interface VectorTimeline {
+    /** One play-through, ms. */
+    length: number;
+    /** Step start times (ms) for the whole loop, for an animated SVG. */
+    steps: number[];
+    /** The picture's time and steps at `ms` into the recording. */
+    at(ms: number): {
+        time: number;
+        steps: number[];
+    };
+}
+/**
+ * A vector effect's timeline: a loop plays and rests `hold` ms; a hover or
+ * press trigger plays to the end, rests, and plays back; a click trigger is
+ * clicked through each of its steps (or, with none, clicked again after
+ * each play-through).
+ */
+declare function vectorTimeline(effect: Pick<VectorEffect, 'hold' | 'trigger'>, motion: SvgMotion): VectorTimeline;
+/**
+ * Renders a catalog effect (by id or definition), applied to `subject`, to
+ * a file: a shader through WebGL2 in headless Chrome, a vector effect by
+ * drawing each frame's SVG there, or (to `.svg`) a vector effect as one
+ * animated SVG with no browser at all. MP4, WebM, MOV and video subjects
+ * need ffmpeg. Throws a sentence when the effect is unknown, takes no such
+ * subject, or cannot be written in that format.
+ *
+ * ```ts
+ * await exportEffect("image-duotone", { subject: { image: "team.jpg" }, preset: "Spotify", outputPath: "team.mp4" });
+ * await exportEffect("click-ripple", { alpha: true, outputPath: "ripple.webm" });
+ * await exportEffect("typewriter", { subject: { text: "Hello" }, outputPath: "hello.gif" });
+ * await exportEffect("toggle-switch", { outputPath: "toggle.svg" });
+ * ```
+ */
+declare function exportEffect(effect: string | EffectDefinition, options: EffectExportOptions): Promise<string>;
+
+export { type EffectExportOptions, type ExportOptions, type NodeSubject, type NodeSubjectValues, type OutputFormat, type OutputPlan, type PointerMode, exportEffect, exportMotionGraphic, ffmpegPath, findChrome, nodeSubjectValues, planOutput, vectorTimeline };

package/dist/node.js

@@ -1,10 +1,32 @@
+import {
+  exportEffect,
+  nodeSubjectValues,
+  vectorTimeline
+} from "./chunk-OKYMKSXK.js";
 import {
   exportMotionGraphic,
-  findChrome
-} from "./chunk-UP6QQVRS.js";
+  ffmpegPath,
+  findChrome,
+  planOutput
+} from "./chunk-JL6TI6II.js";
+import "./chunk-YBGRXVAE.js";
+import "./chunk-STKEKXCK.js";
+import "./chunk-S2RGHHKZ.js";
+import "./chunk-H6VDFBIO.js";
+import "./chunk-RDU63CDO.js";
+import "./chunk-PYDN5G2P.js";
+import "./chunk-EHDJ3CPJ.js";
 import "./chunk-VYOMXE6I.js";
+import "./chunk-PFGGPIMT.js";
+import "./chunk-WMZQCUFJ.js";
+import "./chunk-ORAFCHX3.js";
 export {
+  exportEffect,
   exportMotionGraphic,
-  findChrome
+  ffmpegPath,
+  findChrome,
+  nodeSubjectValues,
+  planOutput,
+  vectorTimeline
 };
 //# sourceMappingURL=node.js.map

package/dist/react/index.d.ts

@@ -1,8 +1,11 @@
 import * as react from 'react';
 import { HTMLAttributes } from 'react';
-import { V as VectorEffect$1 } from '../types-DLkbOX8d.js';
 import { C as ControlValue } from '../controls-Ec6P0Vpy.js';
 import { S as SvgMotion, a as SvgTrigger, C as Clock, b as SvgPlayer } from '../svg-BhRboN9q.js';
+import { E as EffectDefinition, V as VectorEffect$1 } from '../types-DUOMxZaq.js';
+import { EffectSubject } from '../embed/index.js';
+import '../renderer-teaa98RE.js';
+import '../frames-VEcqa40g.js';
 
 /** When to leave the still in place of the animation. */
 type ReducedMotion = "user" | "always" | "never";
@@ -90,4 +93,32 @@ interface VectorEffectProps extends Omit<SvgPlayerViewProps, "motion" | "id"> {
  */
 declare function VectorEffect(props: VectorEffectProps): react.JSX.Element;
 
-export { type ReducedMotion, SvgMotion, SvgPlayer, SvgPlayerView, type SvgPlayerViewProps, SvgTrigger, VectorEffect, type VectorEffectProps };
+interface FlairEffectProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** A catalog effect, by id or definition: shader or vector. */
+    effect: string | EffectDefinition;
+    /** What to apply it to: a picture, a video, an SVG, words or a path (see `EffectSubject`). */
+    subject?: EffectSubject | readonly EffectSubject[];
+    /** A preset by name, under `values`. */
+    preset?: string;
+    /** Control values over the effect's defaults (and preset). */
+    values?: Record<string, ControlValue>;
+    /** Start playing at once (default `true`). */
+    autoplay?: boolean;
+    /** Pause while scrolled out of view (default `true`). */
+    pauseWhenHidden?: boolean;
+}
+/**
+ * Any catalog effect, shader or vector, applied to a subject: a picture, a
+ * video, an SVG, words or a path (see `mountEffect` in
+ * `@pixerate/flair/embed`). Fills its element: size it with CSS. A new
+ * subject or values update the running effect; a new effect, preset or
+ * playback option starts it again. It renders nothing on the server.
+ *
+ * ```tsx
+ * <FlairEffect effect="image-duotone" subject={{ image: "/team.jpg" }} preset="Spotify" style={{ aspectRatio: "16 / 9" }} />
+ * <FlairEffect effect="typewriter" subject={{ text: "Hello there" }} />
+ * ```
+ */
+declare function FlairEffect(props: FlairEffectProps): react.JSX.Element;
+
+export { FlairEffect, type FlairEffectProps, type ReducedMotion, SvgMotion, SvgPlayer, SvgPlayerView, type SvgPlayerViewProps, SvgTrigger, VectorEffect, type VectorEffectProps };

package/dist/react/index.js

@@ -1,20 +1,25 @@
-import {
-  effectDefaults,
-  getEffect,
-  renderVectorEffect
-} from "../chunk-4F4KL4KU.js";
 import {
   svgFrameMarkup,
   svgInlineLayout,
   svgViewBox
-} from "../chunk-LVPIIWPP.js";
+} from "../chunk-STKEKXCK.js";
+import {
+  mountEffect
+} from "../chunk-S2RGHHKZ.js";
+import "../chunk-H6VDFBIO.js";
+import "../chunk-RDU63CDO.js";
+import {
+  effectDefaults,
+  getEffect,
+  renderVectorEffect
+} from "../chunk-PYDN5G2P.js";
+import "../chunk-EHDJ3CPJ.js";
+import "../chunk-VYOMXE6I.js";
 import {
   SvgPlayer
 } from "../chunk-PFGGPIMT.js";
-import "../chunk-OHW7UG6D.js";
-import "../chunk-EHDJ3CPJ.js";
 import "../chunk-WMZQCUFJ.js";
-import "../chunk-VYOMXE6I.js";
+import "../chunk-ORAFCHX3.js";
 
 // src/react/index.tsx
 import {
@@ -134,7 +139,47 @@ function VectorEffect(props) {
     }
   );
 }
+function FlairEffect(props) {
+  const { effect, subject, preset, values, autoplay, pauseWhenHidden, style, ...rest } = props;
+  const host = useRef(null);
+  const mounted = useRef(void 0);
+  const valuesKey = JSON.stringify(values ?? {});
+  const applied = useRef({ valuesKey: "" });
+  const latest = useRef({ subject, values, valuesKey });
+  latest.current = { subject, values, valuesKey };
+  useEffect(() => {
+    const now = latest.current;
+    const m = mountEffect(host.current, effect, {
+      ...now.subject ? { subject: now.subject } : {},
+      ...preset ? { preset } : {},
+      ...now.values ? { values: now.values } : {},
+      autoplay: autoplay ?? true,
+      pauseWhenHidden: pauseWhenHidden ?? true
+    });
+    m.element.style.display = "block";
+    m.element.style.width = "100%";
+    m.element.style.height = "100%";
+    mounted.current = m;
+    applied.current = { subject: now.subject, valuesKey: now.valuesKey };
+    return () => {
+      m.dispose();
+      mounted.current = void 0;
+    };
+  }, [effect, preset, autoplay, pauseWhenHidden]);
+  useEffect(() => {
+    if (!mounted.current || !subject || subject === applied.current.subject) return;
+    mounted.current.setSubject(subject);
+    applied.current.subject = subject;
+  }, [subject]);
+  useEffect(() => {
+    if (!mounted.current || !values || valuesKey === applied.current.valuesKey) return;
+    mounted.current.setValues(values);
+    applied.current.valuesKey = valuesKey;
+  }, [valuesKey]);
+  return /* @__PURE__ */ jsx("div", { ref: host, style: { position: "relative", ...style }, ...rest });
+}
 export {
+  FlairEffect,
   SvgPlayerView,
   VectorEffect
 };

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/index.tsx"],"sourcesContent":["/**\n * React components for Flair's vector effects: `<VectorEffect>` plays a\n * catalog effect by id, `<SvgPlayerView>` plays any {@link SvgMotion}.\n *\n * Both render a still of the picture on the server (its last frame, by\n * default), so a page hydrates with the picture in place rather than a blank\n * box that jumps; the live `SvgPlayer` takes over after mount and is disposed\n * on unmount. Under `prefers-reduced-motion: reduce` the still stays.\n *\n * Needs React 18 or later (an optional peer dependency of the package).\n *\n * @packageDocumentation\n */\n\nimport {\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n} from \"react\";\nimport { getEffect, effectDefaults } from \"../catalog/index.js\";\nimport { renderVectorEffect, type VectorEffect as VectorEffectDefinition } from \"../catalog/types.js\";\nimport type { ControlValue } from \"../shader/controls.js\";\nimport type { Clock } from \"../time/clock.js\";\nimport type { SvgMotion } from \"../vector/motion.js\";\nimport { svgFrameMarkup, svgInlineLayout, svgViewBox } from \"../vector/static.js\";\nimport { SvgPlayer, type SvgTrigger } from \"../vector/svg.js\";\n\n// Layout effects swap the still for the player before paint; on a server neither runs.\nconst useIsomorphicLayoutEffect = typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\n/** Cap height of a heavy sans, as a share of its font size: what an inline word is framed to. */\nconst CAP_HEIGHT = \"0.72em\";\n\n/** When to leave the still in place of the animation. */\nexport type ReducedMotion = \"user\" | \"always\" | \"never\";\n\nexport interface SvgPlayerViewProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  /** The picture and its animations. */\n  motion: SvgMotion;\n  /** Start again at the end (default `true`); `false` plays once and stays on the last frame. */\n  loop?: boolean;\n  /** Start playing at once (default `true`). */\n  autoplay?: boolean;\n  /** Playback speed (default 1). */\n  speed?: number;\n  /** Ms to rest on the last frame before looping (default 600). */\n  hold?: number;\n  /** Loop length in ms (default: the picture's own, plus `hold`). */\n  duration?: number;\n  /** Step start times in ms, for pictures that change on steps. */\n  steps?: readonly number[];\n  /** Plays in answer to the pointer (see `SvgTrigger`). */\n  trigger?: SvgTrigger;\n  /** Pause while scrolled out of view. */\n  pauseWhenHidden?: boolean;\n  /**\n   * Wait to start until scrolled into view. Default `true` when it plays once\n   * (`loop={false}`, no trigger), so a one-shot further down the page does not\n   * finish before anyone sees it; `false` plays at mount.\n   */\n  playOnEnter?: boolean;\n  /** Hide the picture while paused or reset. */\n  hideWhenPaused?: boolean;\n  /** Time source (default animation frames); a `ManualClock` steps frames yourself. */\n  clock?: Clock;\n  /** Called with the id of the innermost element with an id that is clicked. */\n  onPick?: (id: string) => void;\n  /** Called with the player once it is made, and `undefined` when it is disposed. */\n  onPlayer?: (player: SvgPlayer | undefined) => void;\n  /**\n   * The still shown before the player starts (server render, hydration) and\n   * instead of it under reduced motion: `\"last\"` (default; the rest frame,\n   * `\"first\"` for a hover or press trigger), `\"first\"` or a time in ms.\n   */\n  poster?: \"first\" | \"last\" | number;\n  /**\n   * `\"user\"` (default) shows the still when the visitor prefers reduced\n   * motion, `\"always\"` always does, `\"never\"` always plays.\n   */\n  reducedMotion?: ReducedMotion;\n  /**\n   * Size it as a word in a line of text: `display: inline-block` with the\n   * viewBox's aspect ratio and `height` 0.72em (the cap height of a heavy\n   * sans; pass a CSS length for another). Meant for pictures framed from cap\n   * height to baseline, like drip text's `inline`. Otherwise it is a block\n   * as wide as its container with the viewBox's aspect ratio.\n   */\n  inline?: boolean | string;\n  /**\n   * With `inline`, keep room for what spills past the word (descenders,\n   * outlines, glows, drips): a margin of the picture's `data-overhang` (see\n   * `svgInlineLayout`), so the lines around it make space instead of being\n   * painted over. Default `false`.\n   */\n  contain?: boolean;\n}\n\nfunction prefersReducedMotion(): boolean {\n  return typeof matchMedia === \"function\" && matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\n/** The host's size from the picture's viewBox, so the still and the player take the same room. */\nfunction hostStyle(svg: string, inline: boolean | string | undefined, contain: boolean | undefined, style?: CSSProperties): CSSProperties {\n  const box = svgViewBox(svg);\n  const aspectRatio = box ? `${box[2]} / ${box[3]}` : undefined;\n  const spill = inline && contain ? svgInlineLayout(svg)?.overhang : undefined;\n  const base: CSSProperties = inline\n    ? {\n        display: \"inline-block\",\n        height: typeof inline === \"string\" ? inline : CAP_HEIGHT,\n        aspectRatio,\n        ...(spill && { margin: `${spill.top}em ${spill.right}em ${spill.bottom}em ${spill.left}em` }),\n      }\n    : { display: \"block\", aspectRatio };\n  return { position: \"relative\", ...base, ...style };\n}\n\nconst LAYER: CSSProperties = { position: \"absolute\", inset: 0, display: \"block\" };\n\n/**\n * Plays an {@link SvgMotion}: a still on the server and before mount, then\n * an `SvgPlayer` (remade when the motion or its options change, disposed on\n * unmount). Pass a memoised `motion`: a new object each render restarts it.\n */\nexport function SvgPlayerView(props: SvgPlayerViewProps) {\n  const {\n    motion,\n    loop,\n    autoplay,\n    speed,\n    hold,\n    duration,\n    steps,\n    trigger,\n    pauseWhenHidden,\n    playOnEnter,\n    hideWhenPaused,\n    clock,\n    onPick,\n    onPlayer,\n    poster,\n    reducedMotion = \"user\",\n    inline,\n    contain,\n    style,\n    ...rest\n  } = props;\n  const still = useRef<HTMLSpanElement>(null);\n  const mount = useRef<HTMLSpanElement>(null);\n  const player = useRef<SvgPlayer | undefined>(undefined);\n  // Callbacks change every render; the player calls the latest without being remade.\n  const callbacks = useRef({ onPick, onPlayer });\n  callbacks.current = { onPick, onPlayer };\n\n  const at = poster ?? (trigger === \"hover\" || trigger === \"press\" ? \"first\" : \"last\");\n  const markup = useMemo(() => svgFrameMarkup(motion, { at, steps }) ?? \"\", [motion, at, steps]);\n  const stepsKey = steps?.join(\",\");\n  // A one-shot waits until it is seen.\n  const enter = playOnEnter ?? (loop === false && !trigger);\n\n  useIsomorphicLayoutEffect(() => {\n    const host = mount.current;\n    if (!host) return;\n    if (reducedMotion === \"always\" || (reducedMotion === \"user\" && prefersReducedMotion())) return;\n    const p = new SvgPlayer(host, motion, {\n      loop,\n      autoplay,\n      speed,\n      hold,\n      duration,\n      steps,\n      trigger,\n      pauseWhenHidden,\n      playOnEnter: enter,\n      hideWhenPaused,\n      clock,\n      onPick: (id) => callbacks.current.onPick?.(id),\n    });\n    player.current = p;\n    // Set directly, not through props, so React leaves it be on later renders.\n    if (still.current) still.current.style.display = \"none\";\n    callbacks.current.onPlayer?.(p);\n    return () => {\n      p.dispose();\n      player.current = undefined;\n      if (still.current) still.current.style.display = \"block\";\n      callbacks.current.onPlayer?.(undefined);\n    };\n    // `speed` is applied below without remaking; `steps` by value.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [motion, loop, autoplay, hold, duration, stepsKey, trigger, pauseWhenHidden, enter, hideWhenPaused, clock, reducedMotion]);\n\n  useEffect(() => {\n    player.current?.setSpeed(speed ?? 1);\n  }, [speed]);\n\n  return (\n    <span {...rest} style={hostStyle(motion.svg, inline, contain, style)}>\n      <span ref={still} aria-hidden=\"true\" style={LAYER} dangerouslySetInnerHTML={{ __html: markup }} />\n      <span ref={mount} style={LAYER} />\n    </span>\n  );\n}\n\nexport interface VectorEffectProps extends Omit<SvgPlayerViewProps, \"motion\" | \"id\"> {\n  /** A vector effect's catalog id (`\"drip-text\"`), or the effect itself. */\n  id: string | VectorEffectDefinition;\n  /** Control values; missing ones take the preset's, then the defaults. */\n  values?: Record<string, ControlValue>;\n  /** A preset's name to start from. */\n  preset?: string;\n  /** The host element's own `id`. */\n  elementId?: string;\n}\n\n/**\n * Plays a catalog vector effect: `<VectorEffect id=\"drip-text\" values={{ word: \"Slop\" }} loop={false} />`.\n * Its `hold` and `trigger` are used unless given. With an `inline` control\n * set (drip text's), it is sized as a word in the line (see `inline`).\n * Throws when `id` is not a vector effect.\n */\nexport function VectorEffect(props: VectorEffectProps) {\n  const { id, values, preset, elementId, ...rest } = props;\n  const effect = typeof id === \"string\" ? getEffect(id) : id;\n  if (!effect || effect.kind !== \"vector\")\n    throw new Error(`\"${typeof id === \"string\" ? id : effect?.id}\" is not a vector effect; pick one from findEffects({ kind: \"vector\" })`);\n  const valuesKey = JSON.stringify(values ?? {});\n  const motion = useMemo(\n    () => renderVectorEffect(effect, effectDefaults(effect, { preset, values })),\n    // Values by content, so an inline object literal does not restart it.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [effect, preset, valuesKey],\n  );\n  return (\n    <SvgPlayerView\n      id={elementId}\n      motion={motion}\n      hold={effect.hold}\n      trigger={effect.trigger}\n      inline={values?.inline === true}\n      {...rest}\n    />\n  );\n}\n\nexport type { SvgPlayer, SvgMotion, SvgTrigger };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/react/index.tsx"],"sourcesContent":["/**\n * React components for Flair: `<FlairEffect>` runs any catalog effect (shader\n * or vector) applied to a picture, video, SVG or words; `<VectorEffect>` plays\n * a catalog vector effect by id, `<SvgPlayerView>` plays any {@link SvgMotion}.\n *\n * Both render a still of the picture on the server (its last frame, by\n * default), so a page hydrates with the picture in place rather than a blank\n * box that jumps; the live `SvgPlayer` takes over after mount and is disposed\n * on unmount. Under `prefers-reduced-motion: reduce` the still stays.\n *\n * Needs React 18 or later (an optional peer dependency of the package).\n *\n * @packageDocumentation\n */\n\nimport {\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n} from \"react\";\nimport { getEffect, effectDefaults, type EffectDefinition } from \"../catalog/index.js\";\nimport { mountEffect, type EffectSubject, type MountedEffect } from \"../embed/index.js\";\nimport { renderVectorEffect, type VectorEffect as VectorEffectDefinition } from \"../catalog/types.js\";\nimport type { ControlValue } from \"../shader/controls.js\";\nimport type { Clock } from \"../time/clock.js\";\nimport type { SvgMotion } from \"../vector/motion.js\";\nimport { svgFrameMarkup, svgInlineLayout, svgViewBox } from \"../vector/static.js\";\nimport { SvgPlayer, type SvgTrigger } from \"../vector/svg.js\";\n\n// Layout effects swap the still for the player before paint; on a server neither runs.\nconst useIsomorphicLayoutEffect = typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\n/** Cap height of a heavy sans, as a share of its font size: what an inline word is framed to. */\nconst CAP_HEIGHT = \"0.72em\";\n\n/** When to leave the still in place of the animation. */\nexport type ReducedMotion = \"user\" | \"always\" | \"never\";\n\nexport interface SvgPlayerViewProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  /** The picture and its animations. */\n  motion: SvgMotion;\n  /** Start again at the end (default `true`); `false` plays once and stays on the last frame. */\n  loop?: boolean;\n  /** Start playing at once (default `true`). */\n  autoplay?: boolean;\n  /** Playback speed (default 1). */\n  speed?: number;\n  /** Ms to rest on the last frame before looping (default 600). */\n  hold?: number;\n  /** Loop length in ms (default: the picture's own, plus `hold`). */\n  duration?: number;\n  /** Step start times in ms, for pictures that change on steps. */\n  steps?: readonly number[];\n  /** Plays in answer to the pointer (see `SvgTrigger`). */\n  trigger?: SvgTrigger;\n  /** Pause while scrolled out of view. */\n  pauseWhenHidden?: boolean;\n  /**\n   * Wait to start until scrolled into view. Default `true` when it plays once\n   * (`loop={false}`, no trigger), so a one-shot further down the page does not\n   * finish before anyone sees it; `false` plays at mount.\n   */\n  playOnEnter?: boolean;\n  /** Hide the picture while paused or reset. */\n  hideWhenPaused?: boolean;\n  /** Time source (default animation frames); a `ManualClock` steps frames yourself. */\n  clock?: Clock;\n  /** Called with the id of the innermost element with an id that is clicked. */\n  onPick?: (id: string) => void;\n  /** Called with the player once it is made, and `undefined` when it is disposed. */\n  onPlayer?: (player: SvgPlayer | undefined) => void;\n  /**\n   * The still shown before the player starts (server render, hydration) and\n   * instead of it under reduced motion: `\"last\"` (default; the rest frame,\n   * `\"first\"` for a hover or press trigger), `\"first\"` or a time in ms.\n   */\n  poster?: \"first\" | \"last\" | number;\n  /**\n   * `\"user\"` (default) shows the still when the visitor prefers reduced\n   * motion, `\"always\"` always does, `\"never\"` always plays.\n   */\n  reducedMotion?: ReducedMotion;\n  /**\n   * Size it as a word in a line of text: `display: inline-block` with the\n   * viewBox's aspect ratio and `height` 0.72em (the cap height of a heavy\n   * sans; pass a CSS length for another). Meant for pictures framed from cap\n   * height to baseline, like drip text's `inline`. Otherwise it is a block\n   * as wide as its container with the viewBox's aspect ratio.\n   */\n  inline?: boolean | string;\n  /**\n   * With `inline`, keep room for what spills past the word (descenders,\n   * outlines, glows, drips): a margin of the picture's `data-overhang` (see\n   * `svgInlineLayout`), so the lines around it make space instead of being\n   * painted over. Default `false`.\n   */\n  contain?: boolean;\n}\n\nfunction prefersReducedMotion(): boolean {\n  return typeof matchMedia === \"function\" && matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\n/** The host's size from the picture's viewBox, so the still and the player take the same room. */\nfunction hostStyle(svg: string, inline: boolean | string | undefined, contain: boolean | undefined, style?: CSSProperties): CSSProperties {\n  const box = svgViewBox(svg);\n  const aspectRatio = box ? `${box[2]} / ${box[3]}` : undefined;\n  const spill = inline && contain ? svgInlineLayout(svg)?.overhang : undefined;\n  const base: CSSProperties = inline\n    ? {\n        display: \"inline-block\",\n        height: typeof inline === \"string\" ? inline : CAP_HEIGHT,\n        aspectRatio,\n        ...(spill && { margin: `${spill.top}em ${spill.right}em ${spill.bottom}em ${spill.left}em` }),\n      }\n    : { display: \"block\", aspectRatio };\n  return { position: \"relative\", ...base, ...style };\n}\n\nconst LAYER: CSSProperties = { position: \"absolute\", inset: 0, display: \"block\" };\n\n/**\n * Plays an {@link SvgMotion}: a still on the server and before mount, then\n * an `SvgPlayer` (remade when the motion or its options change, disposed on\n * unmount). Pass a memoised `motion`: a new object each render restarts it.\n */\nexport function SvgPlayerView(props: SvgPlayerViewProps) {\n  const {\n    motion,\n    loop,\n    autoplay,\n    speed,\n    hold,\n    duration,\n    steps,\n    trigger,\n    pauseWhenHidden,\n    playOnEnter,\n    hideWhenPaused,\n    clock,\n    onPick,\n    onPlayer,\n    poster,\n    reducedMotion = \"user\",\n    inline,\n    contain,\n    style,\n    ...rest\n  } = props;\n  const still = useRef<HTMLSpanElement>(null);\n  const mount = useRef<HTMLSpanElement>(null);\n  const player = useRef<SvgPlayer | undefined>(undefined);\n  // Callbacks change every render; the player calls the latest without being remade.\n  const callbacks = useRef({ onPick, onPlayer });\n  callbacks.current = { onPick, onPlayer };\n\n  const at = poster ?? (trigger === \"hover\" || trigger === \"press\" ? \"first\" : \"last\");\n  const markup = useMemo(() => svgFrameMarkup(motion, { at, steps }) ?? \"\", [motion, at, steps]);\n  const stepsKey = steps?.join(\",\");\n  // A one-shot waits until it is seen.\n  const enter = playOnEnter ?? (loop === false && !trigger);\n\n  useIsomorphicLayoutEffect(() => {\n    const host = mount.current;\n    if (!host) return;\n    if (reducedMotion === \"always\" || (reducedMotion === \"user\" && prefersReducedMotion())) return;\n    const p = new SvgPlayer(host, motion, {\n      loop,\n      autoplay,\n      speed,\n      hold,\n      duration,\n      steps,\n      trigger,\n      pauseWhenHidden,\n      playOnEnter: enter,\n      hideWhenPaused,\n      clock,\n      onPick: (id) => callbacks.current.onPick?.(id),\n    });\n    player.current = p;\n    // Set directly, not through props, so React leaves it be on later renders.\n    if (still.current) still.current.style.display = \"none\";\n    callbacks.current.onPlayer?.(p);\n    return () => {\n      p.dispose();\n      player.current = undefined;\n      if (still.current) still.current.style.display = \"block\";\n      callbacks.current.onPlayer?.(undefined);\n    };\n    // `speed` is applied below without remaking; `steps` by value.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [motion, loop, autoplay, hold, duration, stepsKey, trigger, pauseWhenHidden, enter, hideWhenPaused, clock, reducedMotion]);\n\n  useEffect(() => {\n    player.current?.setSpeed(speed ?? 1);\n  }, [speed]);\n\n  return (\n    <span {...rest} style={hostStyle(motion.svg, inline, contain, style)}>\n      <span ref={still} aria-hidden=\"true\" style={LAYER} dangerouslySetInnerHTML={{ __html: markup }} />\n      <span ref={mount} style={LAYER} />\n    </span>\n  );\n}\n\nexport interface VectorEffectProps extends Omit<SvgPlayerViewProps, \"motion\" | \"id\"> {\n  /** A vector effect's catalog id (`\"drip-text\"`), or the effect itself. */\n  id: string | VectorEffectDefinition;\n  /** Control values; missing ones take the preset's, then the defaults. */\n  values?: Record<string, ControlValue>;\n  /** A preset's name to start from. */\n  preset?: string;\n  /** The host element's own `id`. */\n  elementId?: string;\n}\n\n/**\n * Plays a catalog vector effect: `<VectorEffect id=\"drip-text\" values={{ word: \"Slop\" }} loop={false} />`.\n * Its `hold` and `trigger` are used unless given. With an `inline` control\n * set (drip text's), it is sized as a word in the line (see `inline`).\n * Throws when `id` is not a vector effect.\n */\nexport function VectorEffect(props: VectorEffectProps) {\n  const { id, values, preset, elementId, ...rest } = props;\n  const effect = typeof id === \"string\" ? getEffect(id) : id;\n  if (!effect || effect.kind !== \"vector\")\n    throw new Error(`\"${typeof id === \"string\" ? id : effect?.id}\" is not a vector effect; pick one from findEffects({ kind: \"vector\" })`);\n  const valuesKey = JSON.stringify(values ?? {});\n  const motion = useMemo(\n    () => renderVectorEffect(effect, effectDefaults(effect, { preset, values })),\n    // Values by content, so an inline object literal does not restart it.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [effect, preset, valuesKey],\n  );\n  return (\n    <SvgPlayerView\n      id={elementId}\n      motion={motion}\n      hold={effect.hold}\n      trigger={effect.trigger}\n      inline={values?.inline === true}\n      {...rest}\n    />\n  );\n}\n\nexport type { SvgPlayer, SvgMotion, SvgTrigger };\n\nexport interface FlairEffectProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /** A catalog effect, by id or definition: shader or vector. */\n  effect: string | EffectDefinition;\n  /** What to apply it to: a picture, a video, an SVG, words or a path (see `EffectSubject`). */\n  subject?: EffectSubject | readonly EffectSubject[];\n  /** A preset by name, under `values`. */\n  preset?: string;\n  /** Control values over the effect's defaults (and preset). */\n  values?: Record<string, ControlValue>;\n  /** Start playing at once (default `true`). */\n  autoplay?: boolean;\n  /** Pause while scrolled out of view (default `true`). */\n  pauseWhenHidden?: boolean;\n}\n\n/**\n * Any catalog effect, shader or vector, applied to a subject: a picture, a\n * video, an SVG, words or a path (see `mountEffect` in\n * `@pixerate/flair/embed`). Fills its element: size it with CSS. A new\n * subject or values update the running effect; a new effect, preset or\n * playback option starts it again. It renders nothing on the server.\n *\n * ```tsx\n * <FlairEffect effect=\"image-duotone\" subject={{ image: \"/team.jpg\" }} preset=\"Spotify\" style={{ aspectRatio: \"16 / 9\" }} />\n * <FlairEffect effect=\"typewriter\" subject={{ text: \"Hello there\" }} />\n * ```\n */\nexport function FlairEffect(props: FlairEffectProps) {\n  const { effect, subject, preset, values, autoplay, pauseWhenHidden, style, ...rest } = props;\n  const host = useRef<HTMLDivElement>(null);\n  const mounted = useRef<MountedEffect | undefined>(undefined);\n  const valuesKey = JSON.stringify(values ?? {});\n  // What the running effect last took, so a re-render with the same subject or values changes nothing.\n  const applied = useRef<{ subject?: FlairEffectProps[\"subject\"]; valuesKey: string }>({ valuesKey: \"\" });\n  const latest = useRef({ subject, values, valuesKey });\n  latest.current = { subject, values, valuesKey };\n  useEffect(() => {\n    const now = latest.current;\n    const m = mountEffect(host.current!, effect, {\n      ...(now.subject ? { subject: now.subject } : {}),\n      ...(preset ? { preset } : {}),\n      ...(now.values ? { values: now.values } : {}),\n      autoplay: autoplay ?? true,\n      pauseWhenHidden: pauseWhenHidden ?? true,\n    });\n    m.element.style.display = \"block\";\n    m.element.style.width = \"100%\";\n    m.element.style.height = \"100%\";\n    mounted.current = m;\n    applied.current = { subject: now.subject, valuesKey: now.valuesKey };\n    return () => {\n      m.dispose();\n      mounted.current = undefined;\n    };\n  }, [effect, preset, autoplay, pauseWhenHidden]);\n  useEffect(() => {\n    if (!mounted.current || !subject || subject === applied.current.subject) return;\n    mounted.current.setSubject(subject);\n    applied.current.subject = subject;\n  }, [subject]);\n  useEffect(() => {\n    if (!mounted.current || !values || valuesKey === applied.current.valuesKey) return;\n    mounted.current.setValues(values);\n    applied.current.valuesKey = valuesKey;\n  }, [valuesKey]);\n  return <div ref={host} style={{ position: \"relative\", ...style }} {...rest} />;\n}\n"],"mappings":"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","names":[]}

package/dist/recorder-CDPPTJMG.js

@@ -0,0 +1,31 @@
+import {
+  exportMotionGraphic,
+  ffmpegPath,
+  findChrome,
+  fragmentSource,
+  frameStates,
+  imageDataUrl,
+  pageControls,
+  planOutput,
+  renderPageHtml,
+  runRender,
+  scriptedPointer,
+  sequencePath
+} from "./chunk-JL6TI6II.js";
+import "./chunk-RDU63CDO.js";
+import "./chunk-VYOMXE6I.js";
+export {
+  exportMotionGraphic,
+  ffmpegPath,
+  findChrome,
+  fragmentSource,
+  frameStates,
+  imageDataUrl,
+  pageControls,
+  planOutput,
+  renderPageHtml,
+  runRender,
+  scriptedPointer,
+  sequencePath
+};
+//# sourceMappingURL=recorder-CDPPTJMG.js.map

package/dist/recorder-CDPPTJMG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/{renderer-C2P1qGzP.d.ts → renderer-teaa98RE.d.ts}

@@ -390,4 +390,4 @@ declare class ShaderRenderer {
     private onRestored;
 }
 
-export { BUILTIN_UNIFORMS as B, type CompileError as C, type FrameState as F, ImageLoadError as I, type LiveSource as L, type RendererStats as R, SVG_EDGE as S, TextureCache as T, VERTEX_SOURCE as V, type CompileStatus as a, type CompileResult as b, type CompiledShader as c, ShaderCompileError as d, ShaderRenderer as e, type ShaderRendererOptions as f, type TextureSource as g, applyTextureSettings as h, compileShader as i, createContext as j, drawFrame as k, formatCompileError as l, isSvgUrl as m, loadImage as n, preloadImages as o, parseCompileLog as p, resetGlCaches as q, releaseImages as r, seekVideo as s, sizeSvg as t, wrapSource as w };
+export { BUILTIN_UNIFORMS as B, type CompileError as C, type FrameState as F, ImageLoadError as I, type LiveSource as L, type RendererStats as R, ShaderRenderer as S, TextureCache as T, VERTEX_SOURCE as V, type CompileStatus as a, type CompileResult as b, type CompiledShader as c, SVG_EDGE as d, ShaderCompileError as e, type ShaderRendererOptions as f, type TextureSource as g, applyTextureSettings as h, compileShader as i, createContext as j, drawFrame as k, formatCompileError as l, isSvgUrl as m, loadImage as n, preloadImages as o, parseCompileLog as p, resetGlCaches as q, releaseImages as r, seekVideo as s, sizeSvg as t, wrapSource as w };

package/dist/svelte/index.d.ts

@@ -1,11 +1,15 @@
 import { ActionReturn } from 'svelte/action';
-import { V as VectorEffect } from '../types-DLkbOX8d.js';
 import { C as ControlValue } from '../controls-Ec6P0Vpy.js';
 import { a as SvgTrigger, C as Clock, b as SvgPlayer, S as SvgMotion } from '../svg-BhRboN9q.js';
+import { E as EffectDefinition, V as VectorEffect } from '../types-DUOMxZaq.js';
+import { EffectSubject } from '../embed/index.js';
+import '../renderer-teaa98RE.js';
+import '../frames-VEcqa40g.js';
 
 /**
- * Svelte 5 bindings for Flair's vector effects, written as plain TypeScript so
- * they need no Svelte compiler: the `vectorEffect` action plays a catalog
+ * Svelte 5 bindings for Flair, written as plain TypeScript so they need no
+ * Svelte compiler: the `flairEffect` action runs any catalog effect (shader or
+ * vector) applied to a picture, video, SVG or words; the `vectorEffect` action plays a catalog
  * effect (or any {@link SvgMotion}) in an element, and `vectorEffectStill`
  * gives the markup and style of its still for server rendering.
  *
@@ -143,4 +147,29 @@ declare function vectorEffectStill(params: VectorEffectParams): VectorEffectStil
  */
 declare function vectorEffect(node: HTMLElement, initial: VectorEffectParams): ActionReturn<VectorEffectParams>;
 
-export { type ReducedMotion, SvgMotion, type SvgMotionParams, SvgPlayer, type SvgPlayerParams, SvgTrigger, type VectorEffectByIdParams, type VectorEffectParams, type VectorEffectStill, vectorEffect, vectorEffectStill };
+/** What the `flairEffect` action runs: any catalog effect, applied to a subject. */
+interface FlairEffectParams {
+    /** A catalog effect, by id or definition: shader or vector. */
+    effect: string | EffectDefinition;
+    /** What to apply it to: a picture, a video, an SVG, words or a path (see `EffectSubject`). */
+    subject?: EffectSubject | readonly EffectSubject[];
+    preset?: string;
+    values?: Record<string, ControlValue>;
+    /** Start playing at once (default `true`). */
+    autoplay?: boolean;
+    /** Pause while scrolled out of view (default `true`). */
+    pauseWhenHidden?: boolean;
+}
+/**
+ * Runs any catalog effect, shader or vector, in an element, applied to a
+ * subject (see `mountEffect` in `@pixerate/flair/embed`); it fills the
+ * element, so size it with CSS. A new subject or values update the running
+ * effect; a new effect, preset or playback option starts it again.
+ *
+ * ```svelte
+ * <div use:flairEffect={{ effect: "image-duotone", subject: { image: "/team.jpg" } }} style="aspect-ratio: 16 / 9"></div>
+ * ```
+ */
+declare function flairEffect(node: HTMLElement, initial: FlairEffectParams): ActionReturn<FlairEffectParams>;
+
+export { type FlairEffectParams, type ReducedMotion, SvgMotion, type SvgMotionParams, SvgPlayer, type SvgPlayerParams, SvgTrigger, type VectorEffectByIdParams, type VectorEffectParams, type VectorEffectStill, flairEffect, vectorEffect, vectorEffectStill };

package/dist/svelte/index.js

@@ -1,20 +1,25 @@
-import {
-  effectDefaults,
-  getEffect,
-  renderVectorEffect
-} from "../chunk-4F4KL4KU.js";
 import {
   svgFrameMarkup,
   svgInlineLayout,
   svgViewBox
-} from "../chunk-LVPIIWPP.js";
+} from "../chunk-STKEKXCK.js";
+import {
+  mountEffect
+} from "../chunk-S2RGHHKZ.js";
+import "../chunk-H6VDFBIO.js";
+import "../chunk-RDU63CDO.js";
+import {
+  effectDefaults,
+  getEffect,
+  renderVectorEffect
+} from "../chunk-PYDN5G2P.js";
+import "../chunk-EHDJ3CPJ.js";
+import "../chunk-VYOMXE6I.js";
 import {
   SvgPlayer
 } from "../chunk-PFGGPIMT.js";
-import "../chunk-OHW7UG6D.js";
-import "../chunk-EHDJ3CPJ.js";
 import "../chunk-WMZQCUFJ.js";
-import "../chunk-VYOMXE6I.js";
+import "../chunk-ORAFCHX3.js";
 
 // src/svelte/index.ts
 var CAP_HEIGHT = "0.72em";
@@ -188,7 +193,44 @@ function vectorEffect(node, initial) {
     }
   };
 }
+function flairEffect(node, initial) {
+  let params = initial;
+  if (!node.style.position) node.style.position = "relative";
+  const start = () => {
+    const m = mountEffect(node, params.effect, {
+      ...params.subject ? { subject: params.subject } : {},
+      ...params.preset ? { preset: params.preset } : {},
+      ...params.values ? { values: params.values } : {},
+      autoplay: params.autoplay ?? true,
+      pauseWhenHidden: params.pauseWhenHidden ?? true
+    });
+    m.element.style.display = "block";
+    m.element.style.width = "100%";
+    m.element.style.height = "100%";
+    return m;
+  };
+  let mounted = start();
+  return {
+    update(next) {
+      const restart = next.effect !== params.effect || next.preset !== params.preset || next.autoplay !== params.autoplay || next.pauseWhenHidden !== params.pauseWhenHidden;
+      const subjectChanged = next.subject !== params.subject;
+      const valuesChanged = JSON.stringify(next.values ?? {}) !== JSON.stringify(params.values ?? {});
+      params = next;
+      if (restart) {
+        mounted.dispose();
+        mounted = start();
+        return;
+      }
+      if (subjectChanged && next.subject) mounted.setSubject(next.subject);
+      if (valuesChanged && next.values) mounted.setValues(next.values);
+    },
+    destroy() {
+      mounted.dispose();
+    }
+  };
+}
 export {
+  flairEffect,
   vectorEffect,
   vectorEffectStill
 };