reacthub-pixitweenjs 0.3.0-alpha.3 → 0.3.0-alpha.5

package/dist/constants/animationConstants.d.ts

@@ -0,0 +1,90 @@
+export declare const ANIMATION_DIRECTION: {
+    IN: string;
+    OUT: string;
+    ATTENTION: string;
+};
+export declare const ANIMATION_CATEGORY: {
+    NONE: string;
+    FADE: string;
+    SLIDE: string;
+    ZOOM: string;
+    BOUNCE: string;
+    BACK: string;
+    FLIP: string;
+    ROTATE: string;
+    ROLL: string;
+    LIGHT_SPEED: string;
+    WIPE: string;
+    SHAKE: string;
+    SPECIAL: string;
+};
+export declare const ANIMATION_DEFAULTS: {
+    OFFSET_SMALL: number;
+    OFFSET_MEDIUM: number;
+    OFFSET_LARGE: number;
+    DEFAULT_DURATION: number;
+    MIN_DURATION: number;
+    MAX_DURATION: number;
+    OPACITY_HIDDEN: number;
+    OPACITY_PARTIAL: number;
+    OPACITY_VISIBLE: number;
+    SCALE_HIDDEN: number;
+    SCALE_SMALL: number;
+    SCALE_NORMAL: number;
+    SCALE_LARGE: number;
+    ROTATION_NONE: number;
+    ROTATION_SMALL: number;
+    ROTATION_MEDIUM: number;
+    ROTATION_LARGE: number;
+    ROTATION_FULL: number;
+};
+export declare const EASING_PRESETS: {
+    EASE_IN_OUT: string;
+    EASE_OUT: string;
+    EASE_IN: string;
+    EASE_OUT_STRONG: string;
+    EASE_IN_STRONG: string;
+    BOUNCE_OUT: string;
+    BOUNCE_IN: string;
+    ELASTIC_OUT: string;
+    BACK_OUT: string;
+    BACK_IN: string;
+};
+export declare const BEZIER_CURVES: {
+    EASE_IN_OUT: number[];
+    EASE_OUT: number[];
+    EASE_IN: number[];
+    BOUNCE: number[];
+    SMOOTH: number[];
+    ZOOM_OUT: number[];
+    ZOOM_IN: number[];
+};
+export declare const SPRING_CONFIG: {
+    DEFAULT: {
+        damping: number;
+        stiffness: number;
+        mass: number;
+    };
+    BOUNCY: {
+        damping: number;
+        stiffness: number;
+        mass: number;
+    };
+    SMOOTH: {
+        damping: number;
+        stiffness: number;
+        mass: number;
+    };
+};
+export declare const KEYFRAME_PRESETS: {
+    BOUNCE_IN: number[];
+    BOUNCE_IN_VALUES: number[];
+    SHAKE: number[];
+    SHAKE_VALUES: number[];
+    HEARTBEAT: number[];
+    HEARTBEAT_VALUES: number[];
+    PULSE: number[];
+    PULSE_VALUES: number[];
+};
+export declare function getAnimationDirection(animationName: string): string | null;
+export declare function getAnimationCategory(animationName: string): string;

package/dist/constants/elementNames.d.ts

@@ -0,0 +1,4 @@
+export declare const PIXITEXT_HITAREA_PREFIX = "pixitext-hitarea";
+export declare const getPixiTextHitAreaName: (uniqueId: string) => string;
+/** Label of the PIXI.Text node inside PixiTextSprite, for `getChildByLabel(label, true)`. */
+export declare const PIXITEXT_TEXT_LABEL = "pixitext-text";

package/dist/filters/animated-vfx/AnimatedVfxFilter.d.ts

@@ -0,0 +1,19 @@
+import { Filter } from 'pixi.js';
+import { CreateAnimatedVfxFilterOptions } from './types';
+/**
+ * Generic time-driven VFX filter.
+ *
+ * `useSpriteFilters` advances `.time` for every filter with `__vfxAnimated`.
+ * Keep this contract stable so editor preview, scrubbing, and Remotion export
+ * all use the same deterministic timeline clock.
+ */
+export declare class AnimatedVfxFilter extends Filter {
+    readonly __vfxAnimated = true;
+    private vfx;
+    constructor({ fragment, name, intensity, uniforms }: CreateAnimatedVfxFilterOptions);
+    apply(filterManager: any, input: any, output: any, clearMode: any): void;
+    get time(): number;
+    set time(value: number);
+    get intensity(): number;
+    set intensity(value: number);
+}

package/dist/filters/animated-vfx/composeShader.d.ts

@@ -0,0 +1,2 @@
+export declare const defaultAnimatedVfxVertex: string;
+export declare const composeAnimatedVfxFragment: (body: string) => string;

package/dist/filters/animated-vfx/index.d.ts

@@ -0,0 +1,14 @@
+export { AnimatedVfxFilter } from './AnimatedVfxFilter';
+export { animatedVfxRegistry, isAnimatedVfxEffectName, type AnimatedVfxEffectName, } from './registry/animatedVfxRegistry';
+export declare const createVhsFilter: (intensity?: number) => import('./AnimatedVfxFilter').AnimatedVfxFilter;
+export declare const createGlitchWaveFilter: (intensity?: number) => import('./AnimatedVfxFilter').AnimatedVfxFilter;
+export declare const createLightLeakFilter: (intensity?: number) => import('./AnimatedVfxFilter').AnimatedVfxFilter;
+export declare const createFilmGrainFilter: (intensity?: number) => import('./AnimatedVfxFilter').AnimatedVfxFilter;
+export declare const createChromaticWaveFilter: (intensity?: number) => import('./AnimatedVfxFilter').AnimatedVfxFilter;
+export declare const createLiquidGlassFilter: (intensity?: number) => import('./AnimatedVfxFilter').AnimatedVfxFilter;
+export declare const createBrokenGlassFilter: (intensity?: number) => import('./AnimatedVfxFilter').AnimatedVfxFilter;
+export declare const createComicFilter: (intensity?: number) => import('./AnimatedVfxFilter').AnimatedVfxFilter;
+export declare const createWaveTearDownFilter: (intensity?: number) => import('./AnimatedVfxFilter').AnimatedVfxFilter;
+export declare const createWaveTearUpFilter: (intensity?: number) => import('./AnimatedVfxFilter').AnimatedVfxFilter;
+export declare const createWaveTearAcrossFilter: (intensity?: number) => import('./AnimatedVfxFilter').AnimatedVfxFilter;
+export declare const createWaveBrushFilter: (intensity?: number) => import('./AnimatedVfxFilter').AnimatedVfxFilter;

package/dist/filters/animated-vfx/registry/animatedVfxRegistry.d.ts

@@ -0,0 +1,65 @@
+import { AnimatedVfxFilter } from '../AnimatedVfxFilter';
+export declare const animatedVfxRegistry: {
+    VHS: {
+        shaderName: string;
+        defaultIntensity: number;
+        create: (intensity?: number | undefined) => AnimatedVfxFilter;
+    };
+    GlitchWave: {
+        shaderName: string;
+        defaultIntensity: number;
+        create: (intensity?: number | undefined) => AnimatedVfxFilter;
+    };
+    LightLeak: {
+        shaderName: string;
+        defaultIntensity: number;
+        create: (intensity?: number | undefined) => AnimatedVfxFilter;
+    };
+    FilmGrain: {
+        shaderName: string;
+        defaultIntensity: number;
+        create: (intensity?: number | undefined) => AnimatedVfxFilter;
+    };
+    ChromaticWave: {
+        shaderName: string;
+        defaultIntensity: number;
+        create: (intensity?: number | undefined) => AnimatedVfxFilter;
+    };
+    LiquidGlass: {
+        shaderName: string;
+        defaultIntensity: number;
+        create: (intensity?: number | undefined) => AnimatedVfxFilter;
+    };
+    BrokenGlass: {
+        shaderName: string;
+        defaultIntensity: number;
+        create: (intensity?: number | undefined) => AnimatedVfxFilter;
+    };
+    Comic: {
+        shaderName: string;
+        defaultIntensity: number;
+        create: (intensity?: number | undefined) => AnimatedVfxFilter;
+    };
+    WaveTearDown: {
+        shaderName: "vfx-wave-tear-down";
+        defaultIntensity: number;
+        create: (intensity?: number | undefined) => AnimatedVfxFilter;
+    };
+    WaveTearUp: {
+        shaderName: "vfx-wave-tear-up";
+        defaultIntensity: number;
+        create: (intensity?: number | undefined) => AnimatedVfxFilter;
+    };
+    WaveTearAcross: {
+        shaderName: "vfx-wave-tear-across";
+        defaultIntensity: number;
+        create: (intensity?: number | undefined) => AnimatedVfxFilter;
+    };
+    WaveBrush: {
+        shaderName: string;
+        defaultIntensity: number;
+        create: (intensity?: number | undefined) => AnimatedVfxFilter;
+    };
+};
+export type AnimatedVfxEffectName = keyof typeof animatedVfxRegistry;
+export declare const isAnimatedVfxEffectName: (effect: string) => effect is AnimatedVfxEffectName;

package/dist/filters/animated-vfx/registry/waveTearVariants.d.ts

@@ -0,0 +1,14 @@
+export declare const WAVE_TEAR_VARIANTS: {
+    readonly WaveTearDown: {
+        readonly shaderName: "vfx-wave-tear-down";
+        readonly direction: Float32Array<ArrayBuffer>;
+    };
+    readonly WaveTearUp: {
+        readonly shaderName: "vfx-wave-tear-up";
+        readonly direction: Float32Array<ArrayBuffer>;
+    };
+    readonly WaveTearAcross: {
+        readonly shaderName: "vfx-wave-tear-across";
+        readonly direction: Float32Array<ArrayBuffer>;
+    };
+};

package/dist/filters/animated-vfx/toStrength.d.ts

@@ -0,0 +1 @@
+export declare const toStrength: (intensity: number, max?: number) => number;

package/dist/filters/animated-vfx/types.d.ts

@@ -0,0 +1,18 @@
+import { AnimatedVfxFilter } from './AnimatedVfxFilter';
+export type AnimatedVfxUniformValue = number | Float32Array;
+export interface AnimatedVfxUniformDefinition {
+    value: AnimatedVfxUniformValue;
+    type: string;
+}
+export type AnimatedVfxUniformDefinitions = Record<string, AnimatedVfxUniformDefinition>;
+export interface CreateAnimatedVfxFilterOptions {
+    name: string;
+    fragment: string;
+    intensity: number;
+    uniforms?: AnimatedVfxUniformDefinitions;
+}
+export interface AnimatedVfxDefinition {
+    shaderName: string;
+    defaultIntensity: number;
+    create: (intensity?: number) => AnimatedVfxFilter;
+}

package/dist/filters/animatedVfxFilters.d.ts

@@ -0,0 +1 @@
+export * from './animated-vfx';

package/dist/filters/blend-mode/createBlendCompositeFilter.d.ts

@@ -0,0 +1,26 @@
+import { Filter } from 'pixi.js';
+/**
+ * Builds a PIXI Filter that composites its input using the given blend mode,
+ * meant to be appended as the LAST entry of an element's own `filters` array
+ * — NOT applied via `Container.blendMode`.
+ *
+ * WHY: in PIXI v8, once an object has its own `filters` array, the object's
+ * effective blend mode against its backdrop is decided entirely by the LAST
+ * filter's own `Filter.blendMode` / shader (each filter carries its own
+ * compositing state). A `blendMode` set on the object or an ancestor
+ * Container is silently ignored the moment that object also has `filters` —
+ * PixiJS's BlendModePipe pushes the blend as a nested filter *inside* the
+ * object's own filter push, so its backdrop capture reads the object's own
+ * (still-empty) offscreen filter texture instead of the real scene, and the
+ * blend collapses to "just show the foreground normally".
+ *
+ * Appending the correct blend filter as the last item of the SAME `filters`
+ * array avoids this: the whole chain is one filter push, so the backdrop is
+ * captured once, correctly, and this filter's blend state is what finally
+ * composites the (fully color-adjusted) result back onto the real scene.
+ *
+ * Only call this when the element already has >0 other filters — with zero
+ * filters, `Container.blendMode` on `AbstractContainer`'s outer wrapper
+ * already works correctly (no offscreen filter pass to interfere with it).
+ */
+export declare const createBlendCompositeFilter: (blendModeCode: number | undefined | null) => Filter | null;

package/dist/filters/edge-feather/EdgeFeatherFilter.d.ts

@@ -0,0 +1,19 @@
+import { Filter } from 'pixi.js';
+/**
+ * EdgeFeatherFilter
+ *
+ * Fades an element's alpha to 0 near its own rectangular edges so that blend
+ * modes / composites melt smoothly into whatever is behind them, instead of
+ * showing the element's hard rectangle cutoff.
+ *
+ * `featherAmount` is 0 (no feather, sharp edge) to 1 (fully faded from the
+ * element's center outward — feather radius equals half of its shorter
+ * dimension).
+ */
+export declare class EdgeFeatherFilter extends Filter {
+    private edge;
+    constructor(featherAmount: number);
+    apply(filterManager: any, input: any, output: any, clearMode: any): void;
+    get featherAmount(): number;
+    set featherAmount(value: number);
+}

package/dist/filters/plate-key/PlateKeyFilter.d.ts

@@ -0,0 +1,29 @@
+import { Filter } from 'pixi.js';
+/**
+ * PlateKeyFilter
+ *
+ * Knocks a flat background plate out of a logo/wordmark image at draw time.
+ *
+ * Why this exists: uploaded brand assets frequently carry a baked-in solid
+ * background. The CoffeeCo brand-kit logo is a 512x512 RGBA PNG that is 100%
+ * opaque, with every corner at rgb(236,234,218) — so the end card composited it
+ * as a hard cream rectangle floating over the plate. Measured on that asset,
+ * the border ring has a standard deviation of 3.2, i.e. it is genuinely flat and
+ * safe to key; a tolerance of ~0.16 (40/255) lifts it cleanly while leaving the
+ * dark brown lettering and the fine gold filigree untouched.
+ *
+ * This is a render-time repair, not a replacement for storing a transparent
+ * asset. It exists because the assets already sitting in customer workspaces
+ * cannot be re-uploaded retroactively.
+ */
+export declare class PlateKeyFilter extends Filter {
+    private plate;
+    constructor(keyColor: [number, number, number], tolerance?: number, softness?: number);
+    get tolerance(): number;
+    set tolerance(value: number);
+    set keyColor(rgb: [number, number, number]);
+}
+/** Parse `#RRGGBB` / `0xRRGGBB` / `rgb(r,g,b)` into normalised 0..1 RGB. */
+export declare function parsePlateKeyColor(input: string | number | null | undefined): [number, number, number] | null;
+/** The cream/near-white plate that uploaded logos ship with most often. */
+export declare const DEFAULT_PLATE_KEY_COLOR: [number, number, number];

package/dist/hocs/AbstractContainer.d.ts

@@ -2,6 +2,11 @@ import { PixiBaseSpriteProps, ForwardedRefResponse, containerScale } from '../ty
 import * as React from "react";
 import * as PIXI from "pixi.js";
 interface AbstractContainerProps extends PixiBaseSpriteProps {
+    /** Container label/id override. Defaults to `getElementName(uniqueId)`. */
+    id?: string;
+    sortableChildren?: boolean;
+    /** Text handed to text-unit / typewriter effects (see usePixiAnimation). */
+    animationText?: string;
     ignoreTlForVideo?: boolean;
     isText?: boolean;
     isDragging?: boolean;

package/dist/hocs/BorderMaskContainer.d.ts

@@ -1,5 +1,6 @@
 import { Container } from 'pixi.js';
-import { MaskTypes } from '../types/MaskTypes';
+import { CropRect } from '../types/CropTypes';
+import { MaskShapeInput } from './drawMaskShape';
 import * as React from "react";
 export interface BorderConfig {
     width: number;
@@ -11,18 +12,32 @@ export interface BorderMaskContainerProps {
     width?: number;
     height?: number;
     border?: BorderConfig;
+    /** `true` = radius 10% of the shorter side; a number = radius in px. */
     roundedCorners?: boolean | number;
-    maskShape?: MaskTypes;
+    maskShape?: MaskShapeInput;
+    /**
+     * Sprite-local crop rect (top-left origin). The mask, border and named shape
+     * are all drawn inside this sub-rect.
+     */
+    crop?: CropRect;
     spriteRef?: React.RefObject<Container | null>;
-    children: React.ReactNode;
+    children?: React.ReactNode;
 }
 /**
- * BorderMaskContainer — wraps a sprite child with an optional stroke
- * border and/or a Graphics mask (rounded rect or named shape).
+ * BorderMaskContainer — wraps a sprite child with an optional stroke border
+ * and/or a Graphics mask (rounded rect, named shape, or crop rect).
  *
- * Mask attaches imperatively to `spriteRef.current` (Container/Sprite).
- * Cleans up on unmount or shape change.
+ * Ported from the Clippy editor:
+ *  - declarative `draw` callbacks (redraw when their deps change)
+ *  - `useLayoutEffect` attaches the mask before paint (no unmasked flash)
+ *  - the wrapper container is ALWAYS rendered, so toggling a border/mask never
+ *    changes the tree shape and remounts the sprite child (texture/ref reset)
+ *  - mask/border Graphics mount only when needed: an empty Graphics still adds
+ *    its (0,0) origin to the parent's getBounds() and inflates transformer boxes
  */
-declare const BorderMaskContainer: React.FC<BorderMaskContainerProps>;
+declare const BorderMaskContainer: {
+    ({ x, y, width, height, border, roundedCorners, maskShape, crop, spriteRef, children, }: BorderMaskContainerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default BorderMaskContainer;
 export { BorderMaskContainer };

package/dist/hocs/drawMaskShape.d.ts

@@ -1,3 +1,7 @@
 import { Graphics } from 'pixi.js';
-import { MaskType } from '../types/MaskTypes';
-export declare function drawMaskShape(g: Graphics, shape: MaskType, cx: number, cy: number, w: number, h: number): void;
+import { MaskTypes } from '../types/MaskTypes';
+import { CropRect } from '../types/CropTypes';
+/** Accepts the enum or its plain string value (e.g. 'circle' from JSON). */
+export type MaskShapeInput = MaskTypes | `${MaskTypes}`;
+export declare function drawMaskShape(g: Graphics, shape: MaskShapeInput, cx: number, cy: number, w: number, h: number, crop?: CropRect): void;
+export declare function applyMaskClipPath(ctx: CanvasRenderingContext2D, shape: MaskShapeInput, w: number, h: number, crop?: CropRect): void;

package/dist/hooks/index.d.ts

@@ -1,3 +1,13 @@
 export * from './useGsapEffect';
 export * from './useSpriteFilters';
 export * from './aep';
+export { default as usePixiAnimation } from './usePixiAnimation';
+export { useVideoTexture } from './video/useVideoTexture';
+export { useVideoLifecycle } from './video/useVideoLifecycle';
+export { useVideoTimelineSync } from './video/useVideoTimelineSync';
+export { withFiltersHook } from './withFiltersHook';
+export { withEffectsHook, useEffects, getEffectFilter } from './withEffectsHook';
+export { fromMultiplierColorCorrection, type SpriteColorCorrection, type SpriteEffectsInput } from './useSpriteFilters';
+export { useSvgTexture, type UseSvgTextureOptions } from './useSvgTexture';
+export { useDebouncedValue } from './useDebouncedValue';
+export { useFontEpoch } from './useFontEpoch';

package/dist/hooks/useBlendFilter.d.ts

@@ -0,0 +1,17 @@
+import { PixiBlendModeString } from '../utils/blendMode';
+/**
+ * Resolves the editor's numeric blend-mode code (from `transformation.blendMode`)
+ * to the PIXI v8 string value expected by `Container.blendMode` / `Sprite.blendMode`.
+ *
+ * PIXI v8 replaced the old numeric `BLEND_MODES` enum with a string union
+ * ('normal' | 'multiply' | 'darken' | ...). Photoshop-style modes (Overlay,
+ * Darken, Lighten, Color Dodge/Burn, Hard/Soft Light) additionally require the
+ * `pixi.js/advanced-blend-modes` side-effect module to be imported once at app
+ * bootstrap (see src/index.tsx) — without it those string values are inert and
+ * the renderer silently falls back to 'normal'.
+ *
+ * Callers set the returned string directly on a Container/Sprite's `blendMode`
+ * prop — no filter needed for this to take effect.
+ */
+export declare const useBlendFilter: (blendMode?: number) => PixiBlendModeString;
+export default useBlendFilter;

package/dist/hooks/useDebouncedValue.d.ts

@@ -0,0 +1,11 @@
+/**
+ * `value`, but only after it has stopped changing for `delayMs`.
+ *
+ * A single timer is restarted on every change and cleared on cleanup, so only the FINAL value
+ * of a burst is ever published, never an intermediate one. (`delayMs <= 0` publishes on the
+ * next effect tick.) The first value is returned immediately.
+ *
+ * Used by `useSvgTexture` / `PixiSvgRawSprite` so dragging a resize handle re-rasterises once.
+ */
+export declare function useDebouncedValue<T>(value: T, delayMs: number): T;
+export default useDebouncedValue;

package/dist/hooks/useFontEpoch.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A counter that increments every time fonts finish loading (`Events.FONTS_LOADED`).
+ *
+ * Put it in any memo/effect dependency list that builds a `TextStyle` or a text layout, so it
+ * re-runs against the real font instead of the fallback it measured with before the load.
+ * On each event it also flushes both measurement caches:
+ *   - Pixi's `CanvasTextMetrics` (keyed by font string)
+ *   - this engine's default layout metrics provider
+ */
+export declare function useFontEpoch(): number;

package/dist/hooks/usePixiAnimation.d.ts

@@ -0,0 +1,24 @@
+/**
+ * usePixiAnimation
+ *
+ * Drives entrance/exit animations by creating a child timeline and adding it
+ * to the parent GSAP timeline. Follows the same pattern as PixiSequence for
+ * consistent timeline nesting behavior.
+ *
+ * @param {Object} config - Animation configuration
+ * @param {React.RefObject} config.targetRef - Reference to the PIXI container
+ * @param {Object} config.transformation - Transformation properties
+ * @param {number} config.start - Element start time in seconds
+ * @param {number} config.end - Element end time in seconds
+ * @param {Object} [config.effectOptions] - Additional options for GSAP effects
+ */
+declare const usePixiAnimation: ({ targetRef, transformation, start, end, effectOptions }: {
+    targetRef: any;
+    transformation: any;
+    start: any;
+    end: any;
+    effectOptions?: {} | undefined;
+}) => {
+    childTimelineRef: import('react').RefObject<null>;
+};
+export default usePixiAnimation;

package/dist/hooks/useSpriteFilters.d.ts

@@ -1,39 +1,81 @@
 import { Effects } from '../types/Effects';
-import * as PIXI from "pixi.js";
+import type * as PIXI from "pixi.js";
+/**
+ * Colour correction in SLIDER units (ported from the Clippy editor).
+ *
+ *   brightness, contrast, saturation, red, green, blue,
+ *   temperature, tint, highlights, shadows, exposure, vibrance : -100..100, 0 = no change
+ *   hue                                                         : -180..180 degrees
+ *   sharpness, blurRadius, vignette, noise, edgeFeather         : 0..100
+ *   gamma, alpha                                                : 1 = no change
+ *
+ * This replaces the earlier multiplier convention (neutral = 1). To convert old
+ * values use `fromMultiplierColorCorrection`.
+ */
 export interface SpriteColorCorrection {
     enabled?: boolean;
+    brightness?: number;
     contrast?: number;
     saturation?: number;
-    brightness?: number;
-    alpha?: number;
     red?: number;
     green?: number;
     blue?: number;
     gamma?: number;
-    blurRadius?: number;
+    alpha?: number;
     temperature?: number;
+    tint?: number;
     hue?: number;
+    highlights?: number;
+    shadows?: number;
+    exposure?: number;
+    vibrance?: number;
     sharpness?: number;
+    blurRadius?: number;
     vignette?: number;
     noise?: number;
+    edgeFeather?: number;
 }
 export interface SpriteEffectsInput {
     name?: Effects | string;
+    /** 0..100. Defaults to 100 for any real effect, 0 for "None". */
     intensity?: number;
     params?: Record<string, unknown>;
 }
+export type PlateKeyInput = boolean | string | {
+    color?: string;
+    tolerance?: number;
+} | null;
 export interface UseSpriteFiltersProps {
     colorCorrection?: SpriteColorCorrection;
     effects?: SpriteEffectsInput;
+    neonColor?: number | string | null;
+    /** `transformation.blendMode` (numeric code). Appended as the LAST filter when others exist. */
+    blendMode?: number;
+    /** Key a flat background plate out of the image. `true` = default cream plate. */
+    plateKey?: PlateKeyInput;
 }
 /**
- * Hook that builds an ordered, memoized PIXI filter array from
- * `{ colorCorrection, effects }`. Replaces ad-hoc filter array
- * construction inside individual sprites.
+ * Convert the old multiplier-style correction (neutral = 1: `contrast: 2`) to the
+ * slider scale (neutral = 0: `contrast: 100`). Fields that were not multipliers
+ * (hue, temperature, sharpness, blurRadius, vignette, noise, gamma, alpha) pass
+ * through unchanged. Only the six multiplier fields are rescaled.
+ */
+export declare const fromMultiplierColorCorrection: (old: Record<string, number | undefined> | null | undefined) => SpriteColorCorrection;
+/**
+ * One ordered filter array for a sprite: plate-key -> colour correction ->
+ * effect preset(s) -> blur/vignette/noise -> blend composite (last).
+ *
+ * Ported from the Clippy editor, with two deliberate differences:
+ *  - colour-correction fields are read individually so the memo only re-runs when a
+ *    value changes, not whenever the caller passes a fresh `{}`
+ *  - the filters this hook created are destroyed when they are replaced or on
+ *    unmount (Clippy leaks them)
+ *
+ * Time-varying effects (VHS, glitch, godray...) are driven from the master GSAP
+ * timeline via `registerTimeUpdateListener`, so they follow the playhead: animate
+ * while playing, jump on seek, freeze when paused. Deterministic for export.
  *
- * Order: temperature → sharpness → HSL → adjustment → effect(s) → blur → vignette → noise.
- * Returns empty array when no filter applies (avoids the cost of
- * `filters: []` allocating a render target on the sprite).
+ * Returns `[]` (never null) when no filter applies, so it is safe to pass straight
+ * to `<pixiSprite filters={...}>`.
  */
-export declare const useSpriteFilters: ({ colorCorrection, effects, }: UseSpriteFiltersProps) => PIXI.Filter[];
-export default useSpriteFilters;
+export declare const useSpriteFilters: ({ colorCorrection, effects, neonColor, blendMode, plateKey, }: UseSpriteFiltersProps) => PIXI.Filter[];

package/dist/hooks/useSvgTexture.d.ts

@@ -0,0 +1,29 @@
+import * as PIXI from "pixi.js";
+export interface UseSvgTextureOptions {
+    src?: string;
+    width?: number;
+    height?: number;
+    stroke?: string;
+    strokeWidth?: number;
+    /** Render multiplier. 2 gives crisp results without devicePixelRatio jitter. */
+    resolution?: number;
+    /** ms to wait after the LAST width/height change before re-rasterising. Default 120. */
+    resizeDebounceMs?: number;
+}
+export interface UseSvgTextureResult {
+    texture: PIXI.Texture | null;
+    isLoading: boolean;
+}
+/**
+ * Rasterise an SVG (with optional stroke override) to a PIXI.Texture at
+ * `width x height x resolution`. Non-SVG sources fall back to the regular texture loader.
+ * Ported from the Clippy editor's `useSvgTexture`, with these fixes:
+ *
+ *  - The previous texture (and its canvas) is DESTROYED when a new one replaces it and on
+ *    unmount. Clippy leaked one CanvasSource per re-raster.
+ *  - width/height changes are debounced, so dragging a resize handle re-rasterises once
+ *    after the drag settles instead of on every pointer move.
+ *  - Inline `data:image/svg+xml` sources are rasterised too (Clippy only matched `.svg` URLs).
+ *  - A failed fetch (HTTP error) yields `null` instead of rasterising an error page.
+ */
+export declare function useSvgTexture({ src, width, height, stroke, strokeWidth, resolution, resizeDebounceMs, }: UseSvgTextureOptions): UseSvgTextureResult;

package/dist/hooks/video/useVideoLifecycle.d.ts

@@ -0,0 +1,23 @@
+export interface VideoLifecycleState {
+    isPlaying: boolean;
+    progress: number;
+    isMuted: boolean;
+    isWaiting: boolean;
+    isStalled: boolean;
+}
+/**
+ * useVideoLifecycle
+ *
+ * Attaches DOM event listeners to track waiting / stalled / loaded state
+ * on the underlying HTMLVideoElement. Returns a mutable state ref the caller
+ * can read inside GSAP callbacks (without triggering React re-renders).
+ *
+ * Also keeps `muted` and `playbackRate` in sync with props via dedicated
+ * effects — each prop change touches only the relevant attribute.
+ */
+export declare function useVideoLifecycle({ getVideo, ready, muted, playbackRate, }: {
+    getVideo: () => HTMLVideoElement | null | undefined;
+    ready: boolean;
+    muted: boolean;
+    playbackRate: number;
+}): React.MutableRefObject<VideoLifecycleState>;