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

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

@@ -0,0 +1,34 @@
+import * as PIXI from 'pixi.js';
+interface UseVideoTextureOptions {
+    src: string;
+    uniqueId: string;
+    frameStartAt: number;
+    fps?: number;
+    isRemotion?: boolean;
+}
+interface UseVideoTextureResult {
+    texture: PIXI.Texture | null;
+    videoElement: HTMLVideoElement | null;
+    isLoaded: boolean;
+    error: Error | null;
+}
+/**
+ * useVideoTexture (v8, scrub model)
+ *
+ * Builds a PixiJS v8 video texture. Mirrors the proven pixi-test-v1 reference:
+ *
+ *   - MP4: `PIXI.Assets.load({ src, data: { autoPlay:false, autoUpdate:false, ... } })`.
+ *     The Assets video loader buffers the full file and resolves decode-ready,
+ *     so the per-frame seeks the timeline drives return frames for EVERY clip.
+ *     (A lazily-built VideoSource from a raw <video> only buffers ~2 of N collage
+ *     clips in time, leaving the rest black.)
+ *   - Other containers (.mov/.avi/...): manual <video> wrapped in a VideoSource.
+ *   (HLS is intentionally not ported — add hls.js + a branch here if needed.)
+ *
+ * `source.autoUpdate = false` — GSAP is the clock (useVideoTimelineSync scrubs
+ * currentTime + calls source.update()). We never call play(), to dodge the
+ * browser's concurrent-video hardware-decode cap (~2-4) that blacks out extra
+ * clips. First frame is painted via a one-shot seeked/loadeddata → update().
+ */
+export declare function useVideoTexture({ src, uniqueId, frameStartAt, fps: _fps, isRemotion: _isRemotion, }: UseVideoTextureOptions): UseVideoTextureResult;
+export {};

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

@@ -0,0 +1,24 @@
+import { VideoLifecycleState } from './useVideoLifecycle';
+import * as PIXI from 'pixi.js';
+interface UseVideoTimelineSyncOptions {
+    textureRef: React.MutableRefObject<PIXI.Texture | null>;
+    stateRef: React.MutableRefObject<VideoLifecycleState>;
+    ready: boolean;
+    start: number;
+    end: number;
+    frameStartAt: number;
+    uniqueId: string;
+}
+/**
+ * useVideoTimelineSync (v8 scrub model)
+ *
+ * GSAP is the clock. Every tick maps timeline time → source time, seeks the
+ * element, and flags a GPU re-upload via `source.update()` (the AEP
+ * registerVideoSync model). While paused/scrubbing we only seek (no play()),
+ * keeping the concurrent-video hardware-decode cap (~2-4 clips) in check.
+ * During real playback (Events.RESUME) the active clip's element is also
+ * play()'d so its audio track is audible — drift correction still runs via
+ * the currentTime check below.
+ */
+export declare function useVideoTimelineSync({ textureRef, stateRef, ready, start, end, frameStartAt, uniqueId, }: UseVideoTimelineSyncOptions): import('react').RefObject<gsap.core.Tween | null>;
+export {};

package/dist/hooks/withEffectsHook.d.ts

@@ -0,0 +1,326 @@
+import * as PIXI from 'pixi.js';
+import * as PixiFilters from 'pixi-filters';
+/**
+ * withEffectsHook - Handles preset effect filters (visual looks/presets)
+ *
+ * This hook is responsible for creating preset visual effects like:
+ * - Essential: Warm, Cool, B&W, Vivid, Fade
+ * - Vintage: Sepia, Retro, Old Film, Polaroid, 70s
+ * - Cinematic: Cinematic, Dramatic, Moody, Film Noir, Soft Focus, Dark Mood
+ * - Modern: HDR, Pop, Pastel, Neon
+ * - Stylized: Pixelize, Radial Pixel, CrossCut, Liquid, Outliner, Dot Pattern
+ * - Artistic: Posterize, TV Glitch, Half Tone, Linocut, Shifter, Mirror
+ * - Enhancement: Glow, Vignette, Tilt Shift, Extrude Blur, Sharpie, Recolor, Green Screen
+ *
+ * For color correction adjustments (brightness, contrast, saturation, etc.),
+ * use withFiltersHook instead.
+ */
+/**
+ * Create black and white effect
+ * @param {number} intensity - Effect intensity from 0-100 (default: 100)
+ */
+declare const createBlackAndWhiteFilter: (intensity?: number) => PixiFilters.HslAdjustmentFilter;
+/**
+ * Create sepia effect
+ * @param {number} intensity - Effect intensity from 0-100 (default: 100)
+ */
+declare const createSepiaFilter: (intensity?: number) => PIXI.ColorMatrixFilter;
+/**
+ * Create retro/vintage effect
+ * @param {number} intensity - Effect intensity from 0-100 (default: 100)
+ */
+declare const createRetroVintageFilter: (intensity?: number) => PIXI.ColorMatrixFilter;
+/**
+ * Create night vision effect
+ */
+declare const createNightVisionFilter: () => (PIXI.ColorMatrixFilter | PixiFilters.GlowFilter)[];
+/**
+ * Create neon/glowing text effect
+ * @param {number} color - Hex color for the neon glow (default: 0x00ffff cyan)
+ * @param {number} intensity - Glow intensity from 0-100 (default: 50)
+ */
+declare const createNeonFilter: (color?: number, intensity?: number) => PixiFilters.GlowFilter[];
+/**
+ * Create cyan/cool effect
+ */
+declare const createCyanFilter: () => PIXI.ColorMatrixFilter;
+/**
+ * Create warm effect - adds orange/yellow tones
+ * @param {number} intensity - Effect intensity from 0-100 (default: 100)
+ */
+declare const createWarmFilter: (intensity?: number) => PIXI.ColorMatrixFilter;
+/**
+ * Create cool effect - adds blue tones
+ * @param {number} intensity - Effect intensity from 0-100 (default: 100)
+ */
+declare const createCoolFilter: (intensity?: number) => PIXI.ColorMatrixFilter;
+/**
+ * Create vivid effect - boosts saturation and contrast
+ * @param {number} intensity - Effect intensity from 0-100 (default: 100)
+ */
+declare const createVividFilter: (intensity?: number) => PixiFilters.AdjustmentFilter;
+/**
+ * Create fade effect - reduces contrast and saturation for washed out look
+ * @param {number} intensity - Effect intensity from 0-100 (default: 100)
+ */
+declare const createFadeFilter: (intensity?: number) => PIXI.ColorMatrixFilter;
+/**
+ * Create old film effect - sepia with grain and vignette
+ * @param {number} intensity - Effect intensity from 0-100 (default: 100)
+ */
+declare const createOldFilmFilter: (intensity?: number) => PixiFilters.OldFilmFilter;
+/**
+ * Create polaroid effect - slight warm tint with faded blacks
+ * @param {number} intensity - Effect intensity from 0-100 (default: 100)
+ */
+declare const createPolaroidFilter: (intensity?: number) => PIXI.ColorMatrixFilter;
+/**
+ * Create 70s effect - warm orange/brown tones with desaturation
+ * @param {number} intensity - Effect intensity from 0-100 (default: 100)
+ */
+declare const createSeventiesFilter: (intensity?: number) => PIXI.ColorMatrixFilter;
+/**
+ * Create cinematic effect - teal and orange color grading
+ * @param {number} intensity - Effect intensity from 0-100 (default: 100)
+ */
+declare const createCinematicFilter: (intensity?: number) => PIXI.ColorMatrixFilter;
+/**
+ * Create dramatic effect - high contrast with deep shadows
+ * @param {number} intensity - Effect intensity from 0-100 (default: 100)
+ */
+declare const createDramaticFilter: (intensity?: number) => PixiFilters.AdjustmentFilter;
+/**
+ * Create moody effect - cool tones with reduced brightness
+ * @param {number} intensity - Effect intensity from 0-100 (default: 100)
+ */
+declare const createMoodyFilter: (intensity?: number) => PIXI.ColorMatrixFilter;
+/**
+ * Create film noir effect - high contrast black and white with deep shadows
+ * @param {number} intensity - Effect intensity from 0-100 (default: 100)
+ */
+declare const createFilmNoirFilter: (intensity?: number) => (PixiFilters.AdjustmentFilter | PixiFilters.HslAdjustmentFilter)[];
+/**
+ * Create soft focus effect - subtle blur with glow
+ * @param {number} intensity - Effect intensity from 0-100 (default: 100)
+ */
+declare const createSoftFocusFilter: (intensity?: number) => (PixiFilters.AdjustmentFilter | PixiFilters.KawaseBlurFilter)[];
+/**
+ * Dreamy — soft glow + grain + moody gloom (Canva-like). Highlight bloom stays capped
+ * so faces keep detail; gloom drives vignette + crushed mids.
+ */
+declare const createDreamyFilter: (intensity?: number, params?: any) => (PixiFilters.AdjustmentFilter | PixiFilters.HslAdjustmentFilter | PixiFilters.KawaseBlurFilter | PixiFilters.OldFilmFilter | PixiFilters.AdvancedBloomFilter)[];
+/**
+ * Create dark mood effect - very dark with slight desaturation
+ * @param {number} intensity - Effect intensity from 0-100 (default: 100)
+ */
+declare const createDarkMoodFilter: (intensity?: number) => PixiFilters.AdjustmentFilter;
+/**
+ * Create HDR effect - enhanced dynamic range look
+ * @param {number} intensity - Effect intensity from 0-100 (default: 100)
+ */
+declare const createHDRFilter: (intensity?: number) => PixiFilters.AdjustmentFilter;
+/**
+ * Create pop effect - bright, saturated, punchy colors
+ * @param {number} intensity - Effect intensity from 0-100 (default: 100)
+ */
+declare const createPopFilter: (intensity?: number) => PixiFilters.AdjustmentFilter;
+/**
+ * Create pastel effect - soft, light, desaturated colors
+ * @param {number} intensity - Effect intensity from 0-100 (default: 100)
+ */
+declare const createPastelFilter: (intensity?: number) => PIXI.ColorMatrixFilter;
+/**
+ * Create pixelize effect - classic pixelation/mosaic look
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ * @param {Object} params - Custom params: { horizontalCount, verticalCount }
+ */
+declare const createPixelizeFilter: (intensity?: number, params?: any) => PixiFilters.PixelateFilter;
+/**
+ * Create radial pixel effect - pixelation with zoom blur center
+ * Combines pixelation with radial/zoom blur for a unique expanding pixel effect
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ * @param {Object} params - Custom params: { radiusPerRow, sizePerRow }
+ */
+declare const createRadialPixelFilter: (intensity?: number, params?: any) => (PixiFilters.PixelateFilter | PixiFilters.ZoomBlurFilter)[];
+/**
+ * Create cross cut effect - cross-hatch artistic rendering
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ * @param {Object} params - Custom params: { horizontalOffset, horizontalCuts, verticalOffset, variation }
+ */
+declare const createCrossCutFilter: (intensity?: number, params?: any) => (PixiFilters.AdjustmentFilter | PixiFilters.CrossHatchFilter)[];
+/**
+ * Create liquid effect - wavy distortion like looking through water
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ */
+declare const createLiquidFilter: (intensity?: number, params?: any) => (PixiFilters.BulgePinchFilter | PixiFilters.TwistFilter)[];
+/**
+ * Create outliner effect - edge detection with outline rendering
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ */
+declare const createOutlinerFilter: (intensity?: number, params?: any) => (PixiFilters.AdjustmentFilter | PixiFilters.OutlineFilter)[];
+/**
+ * Create dot pattern effect - halftone/dotted pattern overlay
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ */
+declare const createDotPatternFilter: (intensity?: number, params?: any) => PixiFilters.DotFilter | (PixiFilters.KawaseBlurFilter | PixiFilters.DotFilter)[];
+/**
+ * Create CRT effect - retro TV scanlines with screen curvature
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ * @param {Object} params - Custom params: { lineWidth, curvature, lineContrast }
+ */
+declare const createCRTFilter: (intensity?: number, params?: any) => PixiFilters.CRTFilter;
+/**
+ * Create posterize effect - reduces color palette for pop art style
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ */
+declare const createPosterizeFilter: (intensity?: number, params?: any) => (PIXI.ColorMatrixFilter | PixiFilters.AdjustmentFilter)[];
+/**
+ * Create TV glitch effect - digital distortion with RGB split and scanlines
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ */
+declare const createTVGlitchFilter: (intensity?: number, params?: any) => (PixiFilters.AdjustmentFilter | PixiFilters.GlitchFilter | PixiFilters.RGBSplitFilter)[];
+/**
+ * Create half tone effect - classic print/newspaper dots pattern
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ */
+declare const createHalfToneFilter: (intensity?: number, params?: any) => (PixiFilters.AdjustmentFilter | PixiFilters.DotFilter)[];
+/**
+ * Create ASCII effect - converts image to ASCII character representation
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ * @param {Object} params - Custom params: { charSize }
+ */
+declare const createASCIIFilter: (intensity?: number, params?: any) => PixiFilters.AsciiFilter;
+/**
+ * Create emboss effect - raised/sunken relief texture
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ * @param {Object} params - Custom params: { strength }
+ */
+declare const createEmbossFilter: (intensity?: number, params?: any) => PixiFilters.EmbossFilter;
+/**
+ * Create linocut effect - high contrast B&W with crosshatch lines (woodcut print style)
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ * @param {Object} params - Custom params: { scaleOfPattern }
+ */
+declare const createLinocutFilter: (intensity?: number, params?: any) => (PixiFilters.AdjustmentFilter | PixiFilters.HslAdjustmentFilter | PixiFilters.CrossHatchFilter)[];
+/**
+ * Create shifter effect - RGB channel separation/chromatic aberration
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ * @param {Object} params - Custom params: { distance, shiftDirection }
+ */
+declare const createShifterFilter: (intensity?: number, params?: any) => PixiFilters.RGBSplitFilter;
+/**
+ * Create mirror effect - vertical/horizontal reflection
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ * @param {Object} params - Custom params: { mirroredSide }
+ */
+declare const createMirrorFilter: (intensity?: number, params?: any) => PixiFilters.ReflectionFilter;
+/**
+ * Create glow effect - soft luminous glow around bright areas
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ * @param {Object} params - Custom params: { intensity, darkening, bloom }
+ */
+declare const createGlowFilter: (intensity?: number, params?: any) => PixiFilters.GlowFilter | (PixiFilters.AdjustmentFilter | PixiFilters.GlowFilter)[];
+/**
+ * Create vignette effect - darkened edges for focus on center
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ */
+declare const createVignetteEffectFilter: (intensity?: number) => PixiFilters.OldFilmFilter;
+/**
+ * Create tilt shift effect - miniature/diorama effect with selective focus
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ * @param {Object} params - Custom params: { intensity, position }
+ */
+declare const createTiltShiftFilter: (intensity?: number, params?: any) => PixiFilters.TiltShiftFilter;
+/**
+ * Create extrude blur effect - radial/zoom blur from center
+ * Creates speed/motion effect
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ * @param {Object} params - Custom params: { intensity }
+ */
+declare const createExtrudeBlurFilter: (intensity?: number, params?: any) => PixiFilters.ZoomBlurFilter;
+/**
+ * Create sharpie effect - enhanced edge sharpening for crisp details
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ */
+declare const createSharpieFilter: (intensity?: number) => PixiFilters.ConvolutionFilter;
+/**
+ * Create recolor effect - hue shift/colorize effect
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ */
+declare const createRecolorFilter: (intensity?: number) => PixiFilters.HslAdjustmentFilter;
+/**
+ * Create green screen effect - chroma key for green removal
+ * Note: This is a simplified implementation. Real chroma keying requires
+ * custom shaders for precise color range selection and edge blending.
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ */
+declare const createGreenScreenFilter: (intensity?: number) => PIXI.ColorMatrixFilter;
+/**
+ * Create godray effect - volumetric light rays (sun beams)
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ * @param {Object} params - Custom params: { intensity, angle, lacunarity }
+ */
+declare const createGodrayFilter: (intensity?: number, params?: any) => PixiFilters.GodrayFilter;
+/**
+ * Create motion blur effect - directional blur for speed/movement
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ * @param {Object} params - Custom params: { velocityX, velocityY }
+ */
+declare const createMotionBlurFilter: (intensity?: number, params?: any) => PixiFilters.MotionBlurFilter;
+/**
+ * Create advanced bloom effect - HDR bloom with threshold control
+ * @param {number} intensity - Effect intensity from 0-100 (default: 50)
+ * @param {Object} params - Custom params: { bloomStrength, threshold, bloomBlur }
+ */
+declare const createAdvancedBloomFilter: (intensity?: number, params?: any) => PixiFilters.AdvancedBloomFilter;
+/**
+ * Create retro halftone effect — comic book / Ben-Day dots / CMYK print look
+ * Composes multiple Pixi filters to simulate a vintage halftone print process:
+ * - High contrast + saturation for posterized comic colors
+ * - Dot screen for halftone pattern
+ * - RGB split for registration offset (CMYK misregistration)
+ * - Optional crosshatch raster lines
+ * - Paper grain texture
+ *
+ * @param {number} intensity - Overall effect intensity (0-100, default: 50)
+ * @param {Object} params - Custom params: { dots, contrast, offset, texture, rasterize, primaryColor, accentColor }
+ */
+declare const createRetroHalfToneFilter: (intensity?: number, params?: any) => any[];
+/**
+ * Get effect filter based on effect type
+ * @param {string} effect - Effect type from Effects enum
+ * @param {number|string} neonColor - Color for neon effect (hex number or hex string)
+ * @param {number} effectIntensity - Intensity for all effects (0-100, default: 100)
+ * @param {Object} effectParams - Custom per-effect parameters (optional)
+ */
+export declare const getEffectFilter: (effect: any, neonColor?: null, effectIntensity?: number, effectParams?: any) => any[] | PIXI.ColorMatrixFilter | PixiFilters.AdjustmentFilter | PixiFilters.HslAdjustmentFilter | PixiFilters.ConvolutionFilter | PixiFilters.OldFilmFilter | import('../filters/animated-vfx').AnimatedVfxFilter | PixiFilters.AdvancedBloomFilter | PixiFilters.GlowFilter | PixiFilters.PixelateFilter | PixiFilters.ZoomBlurFilter | PixiFilters.DotFilter | PixiFilters.CRTFilter | PixiFilters.RGBSplitFilter | PixiFilters.ReflectionFilter | PixiFilters.AsciiFilter | PixiFilters.EmbossFilter | PixiFilters.TiltShiftFilter | PixiFilters.GodrayFilter | PixiFilters.MotionBlurFilter | null;
+/**
+ * Effects hook for preset visual effects
+ * Returns the appropriate filter(s) based on effect type
+ *
+ * @param {Object} props - Effect properties
+ * @param {string} props.effect - Effect type from Effects enum (default: Effects.Normal)
+ * @param {number|string} props.neonColor - Color for neon effect (hex number or hex string)
+ * @param {number} props.effectIntensity - Intensity for all effects (0-100, default: 100)
+ * @param {Object} props.effectParams - Custom per-effect parameters (optional)
+ * @param {number} props.neonGlowIntensity - Deprecated: use effectIntensity instead
+ */
+export declare const withEffectsHook: (props?: any) => {
+    effectFilter: any[] | PIXI.ColorMatrixFilter | PixiFilters.AdjustmentFilter | PixiFilters.HslAdjustmentFilter | PixiFilters.ConvolutionFilter | PixiFilters.OldFilmFilter | import('../filters/animated-vfx').AnimatedVfxFilter | PixiFilters.AdvancedBloomFilter | PixiFilters.GlowFilter | PixiFilters.PixelateFilter | PixiFilters.ZoomBlurFilter | PixiFilters.DotFilter | PixiFilters.CRTFilter | PixiFilters.RGBSplitFilter | PixiFilters.ReflectionFilter | PixiFilters.AsciiFilter | PixiFilters.EmbossFilter | PixiFilters.TiltShiftFilter | PixiFilters.GodrayFilter | PixiFilters.MotionBlurFilter | null;
+    blackAndWhiteFilter: any[] | PIXI.ColorMatrixFilter | PixiFilters.AdjustmentFilter | PixiFilters.HslAdjustmentFilter | PixiFilters.ConvolutionFilter | PixiFilters.OldFilmFilter | import('../filters/animated-vfx').AnimatedVfxFilter | PixiFilters.AdvancedBloomFilter | PixiFilters.GlowFilter | PixiFilters.PixelateFilter | PixiFilters.ZoomBlurFilter | PixiFilters.DotFilter | PixiFilters.CRTFilter | PixiFilters.RGBSplitFilter | PixiFilters.ReflectionFilter | PixiFilters.AsciiFilter | PixiFilters.EmbossFilter | PixiFilters.TiltShiftFilter | PixiFilters.GodrayFilter | PixiFilters.MotionBlurFilter | null;
+    sepiaFilter: any[] | PIXI.ColorMatrixFilter | PixiFilters.AdjustmentFilter | PixiFilters.HslAdjustmentFilter | PixiFilters.ConvolutionFilter | PixiFilters.OldFilmFilter | import('../filters/animated-vfx').AnimatedVfxFilter | PixiFilters.AdvancedBloomFilter | PixiFilters.GlowFilter | PixiFilters.PixelateFilter | PixiFilters.ZoomBlurFilter | PixiFilters.DotFilter | PixiFilters.CRTFilter | PixiFilters.RGBSplitFilter | PixiFilters.ReflectionFilter | PixiFilters.AsciiFilter | PixiFilters.EmbossFilter | PixiFilters.TiltShiftFilter | PixiFilters.GodrayFilter | PixiFilters.MotionBlurFilter | null;
+    retroVintageFilter: any[] | PIXI.ColorMatrixFilter | PixiFilters.AdjustmentFilter | PixiFilters.HslAdjustmentFilter | PixiFilters.ConvolutionFilter | PixiFilters.OldFilmFilter | import('../filters/animated-vfx').AnimatedVfxFilter | PixiFilters.AdvancedBloomFilter | PixiFilters.GlowFilter | PixiFilters.PixelateFilter | PixiFilters.ZoomBlurFilter | PixiFilters.DotFilter | PixiFilters.CRTFilter | PixiFilters.RGBSplitFilter | PixiFilters.ReflectionFilter | PixiFilters.AsciiFilter | PixiFilters.EmbossFilter | PixiFilters.TiltShiftFilter | PixiFilters.GodrayFilter | PixiFilters.MotionBlurFilter | null;
+    nightVisionFilter: any[] | PIXI.ColorMatrixFilter | PixiFilters.AdjustmentFilter | PixiFilters.HslAdjustmentFilter | PixiFilters.ConvolutionFilter | PixiFilters.OldFilmFilter | import('../filters/animated-vfx').AnimatedVfxFilter | PixiFilters.AdvancedBloomFilter | PixiFilters.GlowFilter | PixiFilters.PixelateFilter | PixiFilters.ZoomBlurFilter | PixiFilters.DotFilter | PixiFilters.CRTFilter | PixiFilters.RGBSplitFilter | PixiFilters.ReflectionFilter | PixiFilters.AsciiFilter | PixiFilters.EmbossFilter | PixiFilters.TiltShiftFilter | PixiFilters.GodrayFilter | PixiFilters.MotionBlurFilter | null;
+    cyanFilter: any[] | PIXI.ColorMatrixFilter | PixiFilters.AdjustmentFilter | PixiFilters.HslAdjustmentFilter | PixiFilters.ConvolutionFilter | PixiFilters.OldFilmFilter | import('../filters/animated-vfx').AnimatedVfxFilter | PixiFilters.AdvancedBloomFilter | PixiFilters.GlowFilter | PixiFilters.PixelateFilter | PixiFilters.ZoomBlurFilter | PixiFilters.DotFilter | PixiFilters.CRTFilter | PixiFilters.RGBSplitFilter | PixiFilters.ReflectionFilter | PixiFilters.AsciiFilter | PixiFilters.EmbossFilter | PixiFilters.TiltShiftFilter | PixiFilters.GodrayFilter | PixiFilters.MotionBlurFilter | null;
+    neonFilter: any[] | PIXI.ColorMatrixFilter | PixiFilters.AdjustmentFilter | PixiFilters.HslAdjustmentFilter | PixiFilters.ConvolutionFilter | PixiFilters.OldFilmFilter | import('../filters/animated-vfx').AnimatedVfxFilter | PixiFilters.AdvancedBloomFilter | PixiFilters.GlowFilter | PixiFilters.PixelateFilter | PixiFilters.ZoomBlurFilter | PixiFilters.DotFilter | PixiFilters.CRTFilter | PixiFilters.RGBSplitFilter | PixiFilters.ReflectionFilter | PixiFilters.AsciiFilter | PixiFilters.EmbossFilter | PixiFilters.TiltShiftFilter | PixiFilters.GodrayFilter | PixiFilters.MotionBlurFilter | null;
+};
+export declare const useEffects: (props?: any) => {
+    effectFilter: any[] | PIXI.ColorMatrixFilter | PixiFilters.AdjustmentFilter | PixiFilters.HslAdjustmentFilter | PixiFilters.ConvolutionFilter | PixiFilters.OldFilmFilter | import('../filters/animated-vfx').AnimatedVfxFilter | PixiFilters.AdvancedBloomFilter | PixiFilters.GlowFilter | PixiFilters.PixelateFilter | PixiFilters.ZoomBlurFilter | PixiFilters.DotFilter | PixiFilters.CRTFilter | PixiFilters.RGBSplitFilter | PixiFilters.ReflectionFilter | PixiFilters.AsciiFilter | PixiFilters.EmbossFilter | PixiFilters.TiltShiftFilter | PixiFilters.GodrayFilter | PixiFilters.MotionBlurFilter | null;
+    blackAndWhiteFilter: any[] | PIXI.ColorMatrixFilter | PixiFilters.AdjustmentFilter | PixiFilters.HslAdjustmentFilter | PixiFilters.ConvolutionFilter | PixiFilters.OldFilmFilter | import('../filters/animated-vfx').AnimatedVfxFilter | PixiFilters.AdvancedBloomFilter | PixiFilters.GlowFilter | PixiFilters.PixelateFilter | PixiFilters.ZoomBlurFilter | PixiFilters.DotFilter | PixiFilters.CRTFilter | PixiFilters.RGBSplitFilter | PixiFilters.ReflectionFilter | PixiFilters.AsciiFilter | PixiFilters.EmbossFilter | PixiFilters.TiltShiftFilter | PixiFilters.GodrayFilter | PixiFilters.MotionBlurFilter | null;
+    sepiaFilter: any[] | PIXI.ColorMatrixFilter | PixiFilters.AdjustmentFilter | PixiFilters.HslAdjustmentFilter | PixiFilters.ConvolutionFilter | PixiFilters.OldFilmFilter | import('../filters/animated-vfx').AnimatedVfxFilter | PixiFilters.AdvancedBloomFilter | PixiFilters.GlowFilter | PixiFilters.PixelateFilter | PixiFilters.ZoomBlurFilter | PixiFilters.DotFilter | PixiFilters.CRTFilter | PixiFilters.RGBSplitFilter | PixiFilters.ReflectionFilter | PixiFilters.AsciiFilter | PixiFilters.EmbossFilter | PixiFilters.TiltShiftFilter | PixiFilters.GodrayFilter | PixiFilters.MotionBlurFilter | null;
+    retroVintageFilter: any[] | PIXI.ColorMatrixFilter | PixiFilters.AdjustmentFilter | PixiFilters.HslAdjustmentFilter | PixiFilters.ConvolutionFilter | PixiFilters.OldFilmFilter | import('../filters/animated-vfx').AnimatedVfxFilter | PixiFilters.AdvancedBloomFilter | PixiFilters.GlowFilter | PixiFilters.PixelateFilter | PixiFilters.ZoomBlurFilter | PixiFilters.DotFilter | PixiFilters.CRTFilter | PixiFilters.RGBSplitFilter | PixiFilters.ReflectionFilter | PixiFilters.AsciiFilter | PixiFilters.EmbossFilter | PixiFilters.TiltShiftFilter | PixiFilters.GodrayFilter | PixiFilters.MotionBlurFilter | null;
+    nightVisionFilter: any[] | PIXI.ColorMatrixFilter | PixiFilters.AdjustmentFilter | PixiFilters.HslAdjustmentFilter | PixiFilters.ConvolutionFilter | PixiFilters.OldFilmFilter | import('../filters/animated-vfx').AnimatedVfxFilter | PixiFilters.AdvancedBloomFilter | PixiFilters.GlowFilter | PixiFilters.PixelateFilter | PixiFilters.ZoomBlurFilter | PixiFilters.DotFilter | PixiFilters.CRTFilter | PixiFilters.RGBSplitFilter | PixiFilters.ReflectionFilter | PixiFilters.AsciiFilter | PixiFilters.EmbossFilter | PixiFilters.TiltShiftFilter | PixiFilters.GodrayFilter | PixiFilters.MotionBlurFilter | null;
+    cyanFilter: any[] | PIXI.ColorMatrixFilter | PixiFilters.AdjustmentFilter | PixiFilters.HslAdjustmentFilter | PixiFilters.ConvolutionFilter | PixiFilters.OldFilmFilter | import('../filters/animated-vfx').AnimatedVfxFilter | PixiFilters.AdvancedBloomFilter | PixiFilters.GlowFilter | PixiFilters.PixelateFilter | PixiFilters.ZoomBlurFilter | PixiFilters.DotFilter | PixiFilters.CRTFilter | PixiFilters.RGBSplitFilter | PixiFilters.ReflectionFilter | PixiFilters.AsciiFilter | PixiFilters.EmbossFilter | PixiFilters.TiltShiftFilter | PixiFilters.GodrayFilter | PixiFilters.MotionBlurFilter | null;
+    neonFilter: any[] | PIXI.ColorMatrixFilter | PixiFilters.AdjustmentFilter | PixiFilters.HslAdjustmentFilter | PixiFilters.ConvolutionFilter | PixiFilters.OldFilmFilter | import('../filters/animated-vfx').AnimatedVfxFilter | PixiFilters.AdvancedBloomFilter | PixiFilters.GlowFilter | PixiFilters.PixelateFilter | PixiFilters.ZoomBlurFilter | PixiFilters.DotFilter | PixiFilters.CRTFilter | PixiFilters.RGBSplitFilter | PixiFilters.ReflectionFilter | PixiFilters.AsciiFilter | PixiFilters.EmbossFilter | PixiFilters.TiltShiftFilter | PixiFilters.GodrayFilter | PixiFilters.MotionBlurFilter | null;
+};
+export { createBlackAndWhiteFilter, createSepiaFilter, createRetroVintageFilter, createNightVisionFilter, createNeonFilter, createCyanFilter, createWarmFilter, createCoolFilter, createVividFilter, createFadeFilter, createOldFilmFilter, createPolaroidFilter, createSeventiesFilter, createCinematicFilter, createDramaticFilter, createMoodyFilter, createFilmNoirFilter, createSoftFocusFilter, createDreamyFilter, createDarkMoodFilter, createHDRFilter, createPopFilter, createPastelFilter, createPixelizeFilter, createRadialPixelFilter, createCrossCutFilter, createLiquidFilter, createOutlinerFilter, createDotPatternFilter, createCRTFilter, createPosterizeFilter, createTVGlitchFilter, createHalfToneFilter, createLinocutFilter, createShifterFilter, createMirrorFilter, createASCIIFilter, createEmbossFilter, createGlowFilter, createVignetteEffectFilter, createTiltShiftFilter, createExtrudeBlurFilter, createSharpieFilter, createRecolorFilter, createGreenScreenFilter, createGodrayFilter, createMotionBlurFilter, createAdvancedBloomFilter, createRetroHalfToneFilter, };

package/dist/hooks/withFiltersHook.d.ts

@@ -1,39 +1,105 @@
-import { Effects } from '../types/Effects';
-import * as PIXI from "pixi.js";
-import * as PixiFilters from "pixi-filters";
-export interface FiltersProps {
-    contrast?: number;
-    saturation?: number;
-    brightness?: number;
-    alpha?: number;
-    red?: number;
-    blue?: number;
-    gamma?: number;
-    green?: number;
-    blurRadius?: number;
-    temperature?: number;
-    hue?: number;
-    sharpness?: number;
-    vignette?: number;
-    noise?: number;
-    outline?: number;
-    outlineColor?: number;
-    effect?: Effects;
-}
-export declare const withFiltersHook: (props: FiltersProps) => {
-    adjustmentFilter: PixiFilters.AdjustmentFilter;
-    blurFilter: PixiFilters.KawaseBlurFilter;
-    hslFilter: PixiFilters.HslAdjustmentFilter;
-    sharpnessFilter: PixiFilters.ConvolutionFilter;
-    temperatureFilter: PIXI.ColorMatrixFilter;
-    vignetteFilter: PixiFilters.OldFilmFilter;
-    noiseFilter: PIXI.NoiseFilter;
-    effectFilter: PIXI.ColorMatrixFilter | PixiFilters.HslAdjustmentFilter | PixiFilters.OldFilmFilter | (PIXI.ColorMatrixFilter | PixiFilters.GlowFilter)[] | null;
-    blackAndWhiteFilter: PixiFilters.HslAdjustmentFilter;
-    sepiaFilter: PIXI.ColorMatrixFilter;
-    retroVintageFilter: PIXI.ColorMatrixFilter;
-    nightVisionFilter: PixiFilters.GlowFilter;
-    nightVisionColorMatrix: PIXI.ColorMatrixFilter;
-    cyanFilter: PIXI.ColorMatrixFilter;
-    normalFilter: PIXI.ColorMatrixFilter;
+import { EdgeFeatherFilter } from '../filters/edge-feather/EdgeFeatherFilter';
+import * as PIXI from 'pixi.js';
+import * as PixiFilters from 'pixi-filters';
+/**
+ * withFiltersHook - Handles color correction and adjustment filters ONLY
+ *
+ * This hook is responsible for creating adjustment filters like:
+ * - Basic: Brightness, Contrast, Saturation
+ * - Color channels: Red, Green, Blue
+ * - Advanced color: Temperature, Tint, Hue
+ * - Tonal: Highlights, Shadows, Exposure, Vibrance
+ * - Effects: Sharpness, Blur, Vignette, Noise
+ *
+ * For preset visual effects (Warm, Cool, Cinematic, Neon, etc.),
+ * use withEffectsHook instead.
+ */
+/**
+ * Normalize value from -100 to 100 range to 0 to 2 range (for multiplier filters)
+ */
+export declare const normalizeMultiplier: (value: any) => number;
+/**
+ * Normalize value from -100 to 100 range to -1 to 1 range
+ */
+export declare const normalizeRange: (value: any) => number;
+/**
+ * Clamp value between min and max
+ */
+export declare const clamp: (value: any, min: any, max: any) => number;
+/**
+ * Create adjustment filter for brightness, contrast, saturation, and color channels
+ */
+export declare const createAdjustmentFilter: ({ brightness, contrast, saturation, red, green, blue, gamma, alpha, }: {
+    brightness: any;
+    contrast: any;
+    saturation: any;
+    red: any;
+    green: any;
+    blue: any;
+    gamma: any;
+    alpha: any;
+}) => PixiFilters.AdjustmentFilter | null;
+/**
+ * Create exposure filter (logarithmic brightness)
+ */
+export declare const createExposureFilter: (exposure: any) => PixiFilters.AdjustmentFilter | null;
+/**
+ * Create combined temperature and tint filter
+ * More efficient than separate filters since it uses one color matrix
+ */
+export declare const createTemperatureTintFilter: (temperature: any, tint: any) => PIXI.ColorMatrixFilter | null;
+/**
+ * Create tonal filter for highlights and shadows
+ */
+export declare const createTonalFilter: (highlights: any, shadows: any) => PIXI.ColorMatrixFilter | null;
+/**
+ * Create vibrance filter (smart saturation)
+ */
+export declare const createVibranceFilter: (vibrance: any) => PixiFilters.AdjustmentFilter | null;
+/**
+ * Create hue rotation filter using HslAdjustmentFilter
+ * Input: -180 to 180 degrees (from control panel)
+ */
+export declare const createHueFilter: (hue: any) => PixiFilters.HslAdjustmentFilter | null;
+/**
+ * Create sharpness filter
+ */
+export declare const createSharpnessFilter: (sharpness: any) => PixiFilters.ConvolutionFilter | null;
+/**
+ * Create blur filter
+ */
+export declare const createBlurFilter: (blurRadius: any) => PixiFilters.KawaseBlurFilter | null;
+/**
+ * Create vignette filter (as adjustment, not preset effect)
+ */
+export declare const createVignetteFilter: (vignette: any) => PixiFilters.OldFilmFilter | null;
+/**
+ * Create noise/grain filter
+ */
+export declare const createNoiseFilter: (noise: any) => PIXI.NoiseFilter | null;
+/**
+ * Create edge-feather filter — fades the element's alpha to 0 near its own
+ * rectangular edges so blend modes / composites melt into the backdrop
+ * instead of showing a hard rectangle cutoff.
+ * Input: 0-100 slider value → 0-1 feather fraction.
+ */
+export declare const createEdgeFeatherFilter: (edgeFeather: any) => EdgeFeatherFilter | null;
+/**
+ * Filters hook for color adjustments only
+ * Returns an object with all adjustment filter instances (or null if not needed)
+ *
+ * For preset effects (Warm, Cool, Cinematic, etc.), use withEffectsHook instead.
+ */
+export declare const withFiltersHook: (props?: {}) => {
+    adjustmentFilter: PixiFilters.AdjustmentFilter | null;
+    exposureFilter: PixiFilters.AdjustmentFilter | null;
+    temperatureTintFilter: PIXI.ColorMatrixFilter | null;
+    tonalFilter: PIXI.ColorMatrixFilter | null;
+    vibranceFilter: PixiFilters.AdjustmentFilter | null;
+    hslFilter: PixiFilters.HslAdjustmentFilter | null;
+    sharpnessFilter: PixiFilters.ConvolutionFilter | null;
+    blurFilter: PixiFilters.KawaseBlurFilter | null;
+    vignetteFilter: PixiFilters.OldFilmFilter | null;
+    noiseFilter: PIXI.NoiseFilter | null;
+    edgeFeatherFilter: EdgeFeatherFilter | null;
 };