reacthub-pixitweenjs 0.2.107-alpha.11 → 0.2.107-alpha.110

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Chroma Software Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -16,19 +16,16 @@ Make sure you install the devDependencies in your project.
 
 ```js
 npm install
-    "@pixi-essentials/react-bindings": "2.0.0",
-    "@pixi-essentials/transformer": "2.5.6",
-    "@pixi/assets": "6.5.9",
-    "@pixi/basis": "6.5.9",
-    "@pixi/filter-adjustment": "5.1.1",
-    "@pixi/gif": "1.1.3",
-    "@pixi/interaction": "6.5.9",
-    "@pixi/picture": "^3.0.3",
-    "@pixi/react": "7.0.0",
-    "@pixi/sound": "^4.3.1",
-    "pixi-filters": "5.1.1",
-    "pixi-svg": "3.2.0",
-    "pixi.js": "6.5.9",
+    "@pixi/gif": "^2.1.0",
+    "@pixi/react": "~7.1.0",
+    "@pixi/sound": "^5.2.1",
+    "pixi-filters": "^5.2.1",
+    "pixi-svg": "^3.2.0",
+    "pixi.js": "^7.2.3",
+    "gsap": "3.11.5",
+    "howler": "^2.2.3",
+    "lottie-web": "^5.10.2",
+    "react-custom-events": "^1.1.1",
 ```
 
 ## Description
@@ -37,4 +34,28 @@ PixiTweenJs is designed to help you build animated time-controlled canvas elemen
 
 ## Usage
 
-Visit the [storybook](https://64b9d71094fa7aed0c7291cf-vaocdrptkv.chromatic.com/)
+Visit the [storybook](https://pixitweenjs.xyz/)
+
+## Documentation
+
+## License
+
+This library is licensed under the MIT License. See the LICENSE.md file for details.
+
+Note: This library comes with restrictions. You are not allowed to copy, modify, or sell this library or any derivative work on behalf of the original author. Usage is permitted only under the terms specified in the license.
+
+For example:
+
+- Allowed: Use in personal and non-commercial projects.
+- Not Allowed: Copying, modification, or commercial use without explicit permission.
+
+## Contributing
+
+Want to contribute to pixitweenjs? Our [contributing guide](Contribution.md) has you covered.
+
+## See also
+
+- [editly](https://github.com/mifi/editly) - Declarative video API I also created earlier
+- [remotion](https://github.com/remotion-dev/remotion) - Great inspiration
+
+Made with ❤️ in 🇦🇺

package/dist/components/PixiAudioSprite/PixiAudioSprite.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
-type PixiAudioSpriteProps = {
+import { PixiBaseSpriteProps, ForwardedRefResponse } from "../../types/BaseProps";
+export interface PixiAudioSpriteProps extends PixiBaseSpriteProps {
     uniqueId: string;
     src: string;
     startAt: number;
@@ -9,6 +10,6 @@ type PixiAudioSpriteProps = {
     mute: boolean;
     speed: number;
     visible: boolean;
-};
-declare const PixiAudioSprite: React.FC<PixiAudioSpriteProps>;
+}
+declare const PixiAudioSprite: React.ForwardRefExoticComponent<PixiAudioSpriteProps & React.RefAttributes<ForwardedRefResponse | null>>;
 export default PixiAudioSprite;

package/dist/components/PixiAudioSprite/PixiAudioSprite.stories.d.ts

@@ -1,18 +1,9 @@
 /// <reference types="react" />
 import type { StoryObj } from "@storybook/react";
+import { Waveforms } from "../../types/Effects";
 declare const meta: {
     title: string;
-    component: import("react").FC<{
-        uniqueId: string;
-        src: string;
-        startAt: number;
-        endAt: number;
-        audioStartAt: number;
-        audioEndAt: number;
-        mute: boolean;
-        speed: number;
-        visible: boolean;
-    }>;
+    component: import("react").ForwardRefExoticComponent<import("./PixiAudioSprite").PixiAudioSpriteProps & import("react").RefAttributes<import("../..").ForwardedRefResponse | null>>;
     decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
     tags: string[];
     argTypes: {
@@ -52,11 +43,63 @@ declare const meta: {
             control: string;
             description: string;
         };
+        transformation: {
+            control: string;
+            description: string;
+            x: {
+                control: string;
+                description: string;
+            };
+            y: {
+                control: string;
+                description: string;
+            };
+            width: {
+                control: string;
+                description: string;
+            };
+            height: {
+                control: string;
+                description: string;
+            };
+            anchor: {
+                control: string;
+                description: string;
+            };
+            rotation: {
+                control: string;
+                description: string;
+            };
+            alpha: {
+                control: string;
+                min: number;
+                max: number;
+                description: string;
+            };
+            scale: {
+                control: string;
+                description: string;
+            };
+            tint: {
+                control: string;
+                description: string;
+            };
+            blendMode: {
+                control: string;
+                description: string;
+            };
+            waveform: {
+                type: string;
+                options: Waveforms[];
+                description: string;
+            };
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Normal: Story;
+export declare const Visualization: Story;
 export declare const Speech: Story;
-export declare const Customized: Story;
+export declare const Muted: Story;
 export declare const SplitPosition: Story;

package/dist/components/PixiAudioSprite/useAudioVisualizer.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import AudioMotionAnalyzer from "audiomotion-analyzer";
+import { PixiBaseSpriteProps } from "../../types/BaseProps";
+export type AudioVisualizerProps = Partial<PixiBaseSpriteProps> & {
+    uniqueId: string;
+    src: string;
+    muted?: boolean;
+    volume?: number;
+    loop?: boolean;
+    playbackRate?: number;
+    visible?: boolean;
+};
+declare const useAudioVisualizer: (audioProps: AudioVisualizerProps) => {
+    audioMotionRef: React.MutableRefObject<AudioMotionAnalyzer | undefined>;
+    blobUrl: string;
+    canvasRef: React.MutableRefObject<HTMLDivElement | undefined>;
+};
+export default useAudioVisualizer;

package/dist/components/PixiAudioSprite/wave-config.d.ts

@@ -0,0 +1,4 @@
+import { Waveforms } from "../../types/Effects";
+import { Options, ConstructorOptions } from "audiomotion-analyzer";
+export type WaveConfigOptions = Partial<ConstructorOptions & Options>;
+export declare const waveConfig: Record<Waveforms, WaveConfigOptions>;

package/dist/components/PixiGifSprite/PixiGifSprite.stories.d.ts

@@ -2,7 +2,7 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./PixiGifSprite").PixiGifSpriteProps & import("react").RefAttributes<import("../..").ForwardedRefResponse | null>>;
+    component: import("react").ForwardRefExoticComponent<import("./PixiGifGsapSync").PixiGifSpriteProps & import("react").RefAttributes<import("../../types").ForwardedRefResponse | null>>;
     decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
     tags: string[];
     argTypes: {
@@ -145,6 +145,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Normal: Story;
+export declare const Multiple: Story;
 export declare const FadeIn: Story;
 export declare const Filters: Story;
 export declare const SplitPosition: Story;

package/dist/components/PixiGifSprite/index.d.ts

@@ -1,2 +1,2 @@
-export { default as PixiGifSprite } from "./PixiGifSprite";
-export * from "./PixiGifSprite";
+export { default as PixiGifSprite } from "./PixiGifGsapSync";
+export * from "./PixiGifGsapSync";

package/dist/components/PixiImageSprite/PixiImageSprite.stories.d.ts

@@ -3,7 +3,7 @@ import type { StoryObj } from "@storybook/react";
 import { Effects } from "../../types/Effects";
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("../..").PixiBaseSpriteProps & import("react").RefAttributes<import("../..").ForwardedRefResponse | null>>;
+    component: import("react").ForwardRefExoticComponent<import("../../types").PixiBaseSpriteProps & import("react").RefAttributes<import("../../types").ForwardedRefResponse | null>>;
     decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
     tags: string[];
     argTypes: {
@@ -132,3 +132,5 @@ export declare const Filters: Story;
 export declare const FilterEffects: Story;
 export declare const Overlays: Story;
 export declare const PointerTests: Story;
+export declare const Animation: Story;
+export declare const PointerAnimation: Story;

package/dist/components/PixiLottieSprite/PixiLottieSprite.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { PixiBaseSpriteProps, ForwardedRefResponse } from "../../types/BaseProps";
+export interface PixiLottieSpriteProps extends PixiBaseSpriteProps {
+    uniqueId: string;
+    src: string;
+    startAt: number;
+    endAt: number;
+    frameStartAt: number;
+    frameEndAt: number;
+    locked: boolean;
+    loop: boolean;
+}
+declare const PixiLottieSprite: React.ForwardRefExoticComponent<PixiLottieSpriteProps & React.RefAttributes<ForwardedRefResponse | null>>;
+export default PixiLottieSprite;

package/dist/components/PixiLottieSprite/PixiLottieSprite.stories.d.ts

@@ -0,0 +1,149 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./PixiLottieSprite").PixiLottieSpriteProps & import("react").RefAttributes<import("../../types").ForwardedRefResponse | null>>;
+    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    tags: string[];
+    argTypes: {
+        uniqueId: {
+            control: string;
+            description: string;
+        };
+        src: {
+            control: string;
+            description: string;
+        };
+        transformation: {
+            control: string;
+            description: string;
+            x: {
+                control: string;
+                description: string;
+            };
+            y: {
+                control: string;
+                description: string;
+            };
+            width: {
+                control: string;
+                description: string;
+            };
+            height: {
+                control: string;
+                description: string;
+            };
+            anchor: {
+                control: string;
+                description: string;
+            };
+            rotation: {
+                control: string;
+                description: string;
+            };
+            alpha: {
+                control: string;
+                min: number;
+                max: number;
+                description: string;
+            };
+            scale: {
+                control: string;
+                description: string;
+            };
+            tint: {
+                control: string;
+                description: string;
+            };
+            blendMode: {
+                control: string;
+                description: string;
+            };
+            colorCorrection: {
+                control: string;
+                description: string;
+                brightness: {
+                    control: string;
+                    description: string;
+                };
+                contrast: {
+                    control: string;
+                    description: string;
+                };
+                saturation: {
+                    control: string;
+                    description: string;
+                };
+                alpha: {
+                    control: string;
+                    description: string;
+                };
+            };
+        };
+        applyTransformer: {
+            control: string;
+            description: string;
+        };
+        startAt: {
+            control: string;
+            description: string;
+        };
+        endAt: {
+            control: string;
+            description: string;
+        };
+        frameStartAt: {
+            control: string;
+            description: string;
+        };
+        frameEndAt: {
+            control: string;
+            description: string;
+        };
+        visible: {
+            control: string;
+            description: string;
+        };
+        onAnchorTransformationEnd: {
+            action: string;
+            description: string;
+        };
+        pointerdown: {
+            action: string;
+            description: string;
+        };
+        pointerup: {
+            action: string;
+            description: string;
+        };
+        mousedown: {
+            action: string;
+            description: string;
+        };
+        mouseup: {
+            action: string;
+            description: string;
+        };
+        pointerover: {
+            action: string;
+            description: string;
+        };
+        mouseover: {
+            action: string;
+            description: string;
+        };
+        mouseout: {
+            action: string;
+            description: string;
+        };
+        pointerout: {
+            action: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Normal: Story;
+export declare const Filter: Story;
+export declare const FadeIn: Story;

package/dist/components/PixiLottieSprite/index.d.ts

@@ -0,0 +1 @@
+export { default as PixiLottieSprite } from "./PixiLottieSprite";

package/dist/components/PixiRemotionSprite/PixiRemotionSprite.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as PIXI from "pixi.js";
+import { PixiBaseSpriteProps, ForwardedRefResponse } from "../../types/BaseProps";
+export interface CanvasImageProps {
+    getCanvas: () => PIXI.TextureSource | PIXI.TextureSource[];
+}
+export interface PixiRemotionSpriteProps extends PixiBaseSpriteProps {
+    uniqueId: string;
+    src: string;
+    frameStartAt: number;
+    frameEndAt: number;
+    mute: boolean;
+    locked: boolean;
+    pointerdown?: () => void;
+    pointerup?: () => void;
+    mousedown?: () => void;
+    mouseup?: () => void;
+    pointerover?: () => void;
+    mouseover?: () => void;
+    mouseout?: () => void;
+    applyTransformer?: boolean;
+    onAnchorTransformationEnd?: (endData: any) => void;
+    canvasImageRef?: CanvasImageProps;
+}
+declare const PixiRemotionSprite: React.ForwardRefExoticComponent<PixiRemotionSpriteProps & React.RefAttributes<ForwardedRefResponse | null>>;
+export default PixiRemotionSprite;

package/dist/components/PixiRemotionSprite/index.d.ts

@@ -0,0 +1 @@
+export { default as PixiRemotionSprite } from "./PixiRemotionSprite";

package/dist/components/PixiSVGSprite/PixiSvgPathSprite.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { PixiBaseSpriteProps, ForwardedRefResponse } from "../../types/BaseProps";
 import { Effects } from "../../types/Effects";
+import { Animations } from "../../types";
 export interface PixiSvgPathSpriteProps extends PixiBaseSpriteProps {
     uniqueId: string;
     path: string;
@@ -17,7 +18,7 @@ export interface PixiSvgPathSpriteProps extends PixiBaseSpriteProps {
         scale?: number | [number, number];
         tint?: number;
         blendMode?: number;
-        animation?: string;
+        animation?: Animations;
         hexColor?: string;
         fill?: string;
         fontWeight?: string;
@@ -44,6 +45,8 @@ export interface PixiSvgPathSpriteProps extends PixiBaseSpriteProps {
             blue?: number;
             alpha?: number;
             scaleInput?: number;
+            vignette?: number;
+            noise?: number;
         };
         effect?: Effects;
     };

package/dist/components/PixiSVGSprite/PixiSvgPathSprite.stories.d.ts

@@ -2,7 +2,7 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./PixiSvgPathSprite").PixiSvgPathSpriteProps & import("react").RefAttributes<import("../..").ForwardedRefResponse | null>>;
+    component: import("react").ForwardRefExoticComponent<import("./PixiSvgPathSprite").PixiSvgPathSpriteProps & import("react").RefAttributes<import("../../types").ForwardedRefResponse | null>>;
     decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
     tags: string[];
     argTypes: {

package/dist/components/PixiTextSprite/PixiTextSprite.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { PixiBaseSpriteProps, ForwardedRefResponse } from "../../types/BaseProps";
 import { Effects } from "../../types/Effects";
+import { Animations } from "../../types";
 export interface PixiTextSpriteProps extends PixiBaseSpriteProps {
     text: string;
     startAt: number;
@@ -17,7 +18,7 @@ export interface PixiTextSpriteProps extends PixiBaseSpriteProps {
         scale?: number | [number, number];
         tint?: number;
         blendMode?: number;
-        animation?: string;
+        animation?: Animations;
         fontWeight?: string;
         fontSize?: number;
         fontFamily?: string;
@@ -46,6 +47,7 @@ export interface PixiTextSpriteProps extends PixiBaseSpriteProps {
         align?: string;
         textBaseline?: string;
         trim?: boolean;
+        backgroundColor?: string;
         colorCorrection?: {
             enabled?: boolean;
             temperature?: number;

package/dist/components/PixiTextSprite/PixiTextSprite.stories.d.ts

@@ -2,7 +2,7 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./PixiTextSprite").PixiTextSpriteProps & import("react").RefAttributes<import("../..").ForwardedRefResponse | null>>;
+    component: import("react").ForwardRefExoticComponent<import("./PixiTextSprite").PixiTextSpriteProps & import("react").RefAttributes<import("../../types").ForwardedRefResponse | null>>;
     decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
     tags: string[];
     argTypes: {
@@ -127,3 +127,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Normal: Story;
 export declare const FadeIn: Story;
 export declare const Filters: Story;
+export declare const Draggable: Story;

package/dist/components/PixiVideoSprite/PixiVideoCanvasSync.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as PIXI from "pixi.js";
+import { PixiBaseSpriteProps, ForwardedRefResponse } from "../../types/BaseProps";
+export interface CanvasImageProps {
+    getCanvas: () => PIXI.TextureSource | PIXI.TextureSource[];
+}
+export interface PixiVideoSpriteProps extends PixiBaseSpriteProps {
+    uniqueId: string;
+    src: string;
+    frameStartAt: number;
+    frameEndAt: number;
+    mute: boolean;
+    locked: boolean;
+    pointerdown?: () => void;
+    pointerup?: () => void;
+    mousedown?: () => void;
+    mouseup?: () => void;
+    pointerover?: () => void;
+    mouseover?: () => void;
+    mouseout?: () => void;
+    applyTransformer?: boolean;
+    onAnchorTransformationEnd?: (endData: any) => void;
+    canvasImageRef?: CanvasImageProps;
+}
+declare const PixiVideoCanvasSyncSprite: React.ForwardRefExoticComponent<PixiVideoSpriteProps & React.RefAttributes<ForwardedRefResponse | null>>;
+export default PixiVideoCanvasSyncSprite;

package/dist/components/PixiVideoSprite/PixiVideoSprite.d.ts

@@ -16,6 +16,7 @@ export interface PixiVideoSpriteProps extends PixiBaseSpriteProps {
     mouseout?: () => void;
     applyTransformer?: boolean;
     onAnchorTransformationEnd?: (endData: any) => void;
+    fps?: number;
 }
 declare const PixiVideoSprite: React.ForwardRefExoticComponent<PixiVideoSpriteProps & React.RefAttributes<ForwardedRefResponse | null>>;
 export default PixiVideoSprite;

package/dist/components/PixiVideoSprite/PixiVideoSprite.stories.d.ts

@@ -2,7 +2,7 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./PixiVideoSprite").PixiVideoSpriteProps & import("react").RefAttributes<import("../..").ForwardedRefResponse | null>>;
+    component: import("react").ForwardRefExoticComponent<import("./PixiVideoSprite").PixiVideoSpriteProps & import("react").RefAttributes<import("../../types").ForwardedRefResponse | null>>;
     decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
     tags: string[];
     argTypes: {
@@ -120,6 +120,10 @@ declare const meta: {
             action: string;
             description: string;
         };
+        fps: {
+            control: string;
+            description: string;
+        };
     };
 };
 export default meta;
@@ -129,3 +133,4 @@ export declare const FadeIn: Story;
 export declare const Filters: Story;
 export declare const SplitPosition: Story;
 export declare const SplitStartPos: Story;
+export declare const VideoFps: Story;

package/dist/components/PixiVideoSprite/index.d.ts

@@ -1 +1,2 @@
 export { default as PixiVideoSprite } from "./PixiVideoSprite";
+export { default as PixiVideoCanvasSyncSprite } from "./PixiVideoCanvasSync";

package/dist/components/index.d.ts

@@ -6,3 +6,5 @@ export * from "./PixiTextSprite";
 export * from "./PixiVideoSprite";
 export * from "./PixiAnimatedSprite";
 export * from "./PixiSequence";
+export * from "./PixiRemotionSprite";
+export * from "./PixiLottieSprite";

package/dist/hocs/AbstractContainer.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { PixiBaseSpriteProps, ForwardedRefResponse } from "../types/BaseProps";
+import { PixiBaseSpriteProps, ForwardedRefResponse, containerScale } from "../types/BaseProps";
 interface AbstractContainerProps extends PixiBaseSpriteProps {
     ignoreTlForVideo?: boolean;
     isText?: boolean;
@@ -7,6 +7,8 @@ interface AbstractContainerProps extends PixiBaseSpriteProps {
     isGif?: boolean;
     onDoubleClick?: () => void;
     isTextEditMode?: boolean;
+    handleDragWordWrap?: (width: number, containerScale: containerScale) => void;
+    handleDragFontSize?: (width: number, fontSize: number, containerScale: containerScale) => void;
 }
 declare const AbstractContainer: React.ForwardRefExoticComponent<AbstractContainerProps & React.RefAttributes<ForwardedRefResponse | null>>;
 export default AbstractContainer;

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from "./useGsapEffect";

package/dist/hooks/useDebounce.d.ts

@@ -0,0 +1,2 @@
+declare function useDebounce(value: any, delay?: number): any;
+export default useDebounce;

package/dist/hooks/useDeepEffect.d.ts

@@ -0,0 +1,2 @@
+declare const useDeepEffect: (effectFunc: any, deps: any[]) => void;
+export default useDeepEffect;

package/dist/hooks/useGsapEffect.d.ts

@@ -1,3 +1,3 @@
-import { RefObject } from "react";
-import * as PIXI from "pixi.js";
-export declare function useGsapEffect(target: RefObject<PIXI.Container>, effect: string, vars: any): undefined;
+export declare function useGsapEffect(): {
+    updateEffect: any;
+};

package/dist/hooks/withEffectsHook.d.ts

@@ -1,4 +1,5 @@
 import * as PIXI from "pixi.js";
 export declare const withEffectsHooks: () => {
     nightVisionFilter: PIXI.Filter;
+    vignetteFilter: PIXI.Filter;
 };

package/dist/hooks/withFiltersHook.d.ts

@@ -13,6 +13,10 @@ export interface FiltersProps {
     temperature?: number;
     hue?: number;
     sharpness?: number;
+    vignette?: number;
+    noise?: number;
+    outline?: number;
+    outlineColor?: number;
 }
 export declare const withFiltersHook: (props: FiltersProps) => {
     adjustmentFilter: PixiFilters.AdjustmentFilter;
@@ -20,4 +24,6 @@ export declare const withFiltersHook: (props: FiltersProps) => {
     hueFilter: PIXI.ColorMatrixFilter;
     sharpnessFilter: PixiFilters.ConvolutionFilter;
     temperatureFilter: PIXI.Filter;
+    vignetteFilter: PixiFilters.OldFilmFilter;
+    noiseFilter: PIXI.NoiseFilter;
 };