reacthub-pixitweenjs 0.3.0-alpha.5 → 0.3.1

package/dist/providers/AudioContextProvider.d.ts

@@ -9,4 +9,4 @@ export declare const WebAudioContext: React.Context<WebAudioContextType>;
 export type AudioContextProviderProps = {
     children: React.ReactNode;
 };
-export declare const AudioContextProvider: ({ children, }: AudioContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AudioContextProvider: ({ children, }: AudioContextProviderProps) => React.JSX.Element;

package/dist/types/aep/composition.d.ts

@@ -3,8 +3,10 @@ import { AepLayer } from './layer';
 import { AepAssetMap } from './asset';
 import { AepPostFx } from './postFx';
 import { AepThemeMap } from './theme';
-export declare const AEP_SCHEMA_VERSION = "1.9.0";
+import { AepTransition } from './transition';
+export declare const AEP_SCHEMA_VERSION = "1.10.0";
 export declare const AEP_SCHEMA_MAJOR = 1;
+export declare const TRANSITIONS_MIN_VERSION = "1.10.0";
 declare const aepFontSchema: z.ZodObject<{
     family: z.ZodString;
     src: z.ZodOptional<z.ZodString>;
@@ -76,6 +78,7 @@ export interface AepCompositionJson {
     precomps?: Record<string, AepCompositionJson>;
     postFx?: AepPostFx[];
     theme?: AepThemeMap;
+    transitions?: AepTransition[];
     meta?: Record<string, unknown>;
 }
 export declare const aepCompositionSchema: z.ZodType<AepCompositionJson>;

package/dist/types/aep/index.d.ts

@@ -9,6 +9,7 @@ export * from './light';
 export * from './text-animator';
 export * from './text-runs';
 export * from './theme';
+export * from './transition';
 export * from './layer';
 export * from './composition';
 export * from './parse';

package/dist/types/aep/transition.d.ts

@@ -0,0 +1,107 @@
+import { z } from 'zod';
+import { GlTransitionParams } from '../glTransition';
+export declare const aepTransitionSchema: z.ZodEffects<z.ZodObject<{
+    id: z.ZodString;
+    kind: z.ZodEnum<["element", "scene"]>;
+    name: z.ZodString;
+    from: z.ZodUnion<[z.ZodString, z.ZodArray<z.ZodString, "many">]>;
+    to: z.ZodUnion<[z.ZodString, z.ZodArray<z.ZodString, "many">]>;
+    startFrame: z.ZodNumber;
+    durationFrames: z.ZodNumber;
+    ease: z.ZodOptional<z.ZodUnion<[z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber, z.ZodNumber], null>, z.ZodString]>>;
+    params: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<[z.ZodNumber, z.ZodBoolean, z.ZodArray<z.ZodNumber, "many">]>>>;
+    region: z.ZodOptional<z.ZodObject<{
+        x: z.ZodNumber;
+        y: z.ZodNumber;
+        width: z.ZodNumber;
+        height: z.ZodNumber;
+    }, "strict", z.ZodTypeAny, {
+        x: number;
+        y: number;
+        height: number;
+        width: number;
+    }, {
+        x: number;
+        y: number;
+        height: number;
+        width: number;
+    }>>;
+    includeShared: z.ZodOptional<z.ZodBoolean>;
+}, "strict", z.ZodTypeAny, {
+    name: string;
+    id: string;
+    kind: "scene" | "element";
+    from: string | string[];
+    to: string | string[];
+    startFrame: number;
+    durationFrames: number;
+    ease?: string | [number, number, number, number] | undefined;
+    params?: Record<string, number | boolean | number[]> | undefined;
+    region?: {
+        x: number;
+        y: number;
+        height: number;
+        width: number;
+    } | undefined;
+    includeShared?: boolean | undefined;
+}, {
+    name: string;
+    id: string;
+    kind: "scene" | "element";
+    from: string | string[];
+    to: string | string[];
+    startFrame: number;
+    durationFrames: number;
+    ease?: string | [number, number, number, number] | undefined;
+    params?: Record<string, number | boolean | number[]> | undefined;
+    region?: {
+        x: number;
+        y: number;
+        height: number;
+        width: number;
+    } | undefined;
+    includeShared?: boolean | undefined;
+}>, {
+    name: string;
+    id: string;
+    kind: "scene" | "element";
+    from: string | string[];
+    to: string | string[];
+    startFrame: number;
+    durationFrames: number;
+    ease?: string | [number, number, number, number] | undefined;
+    params?: Record<string, number | boolean | number[]> | undefined;
+    region?: {
+        x: number;
+        y: number;
+        height: number;
+        width: number;
+    } | undefined;
+    includeShared?: boolean | undefined;
+}, {
+    name: string;
+    id: string;
+    kind: "scene" | "element";
+    from: string | string[];
+    to: string | string[];
+    startFrame: number;
+    durationFrames: number;
+    ease?: string | [number, number, number, number] | undefined;
+    params?: Record<string, number | boolean | number[]> | undefined;
+    region?: {
+        x: number;
+        y: number;
+        height: number;
+        width: number;
+    } | undefined;
+    includeShared?: boolean | undefined;
+}>;
+export type AepTransition = z.infer<typeof aepTransitionSchema>;
+export interface AepTransitionOverride {
+    name?: string;
+    params?: GlTransitionParams;
+    durationFrames?: number;
+    disabled?: boolean;
+}
+export type AepTransitionOverrideMap = Record<string, AepTransitionOverride>;
+export declare const transitionLayerIds: (value: AepTransition["from"] | AepTransition["to"]) => string[];

package/dist/types/glTransition.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+import type * as PIXI from "pixi.js";
+export type GlTransitionParam = number | boolean | number[];
+export type GlTransitionParams = Record<string, GlTransitionParam>;
+export interface GlTransitionConfig {
+    type: string;
+    name: string;
+    duration: number;
+    ease: string;
+    params: GlTransitionParams;
+}
+export interface TransitionTiming {
+    start: number;
+    end: number;
+    duration: number;
+}
+/** The part of a transition every pipeline supplies: identity, shader and timing. */
+export interface TransitionPairBase {
+    pairId: string;
+    config: GlTransitionConfig;
+    timing: TransitionTiming;
+}
+export interface ElementTransitionPair extends TransitionPairBase {
+    fromElementId: string;
+    toElementId: string;
+}
+export interface SceneTransitionPair extends TransitionPairBase {
+    fromSceneId: string;
+    toSceneId: string;
+}
+export type TransitionPair = ElementTransitionPair | SceneTransitionPair;
+export type ContainerRefValue = React.RefObject<PIXI.Container | null> | PIXI.Container | null;
+export type ContainerRefsMap = React.MutableRefObject<Record<string, ContainerRefValue>> | null | undefined;

package/dist/types/index.d.ts

@@ -4,5 +4,6 @@ export * from './BlendModes';
 export * from './OverlayTypes';
 export * from './transformation';
 export * from './MaskTypes';
+export * from './glTransition';
 export * from './CropTypes';
 export * from './aep';

package/dist/utils/ContextBridge.d.ts

@@ -3,5 +3,5 @@ declare const ContextBridge: <T>({ children, Context, render, }: {
     children: React.ReactNode;
     Context: React.Context<T>;
     render: (children: React.ReactNode) => React.JSX.Element;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default ContextBridge;

package/dist/utils/glTransitions/buildFragment.d.ts

@@ -0,0 +1,14 @@
+import { GlTransitionParam, GlTransitionParams } from '../../types/glTransition';
+export declare const VERTEX = "in vec2 aPosition;\nin vec2 aUV;\nout vec2 vTextureCoord;\n\nuniform mat3 uProjectionMatrix;\nuniform mat3 uWorldTransformMatrix;\nuniform mat3 uTransformMatrix;\n\nvoid main(void) {\n  mat3 mvp = uProjectionMatrix * uWorldTransformMatrix * uTransformMatrix;\n  gl_Position = vec4((mvp * vec3(aPosition, 1.0)).xy, 0.0, 1.0);\n  vTextureCoord = aUV;\n}\n";
+export declare const FALLBACK_FRAGMENT = "precision highp float;\nin vec2 vTextureCoord;\nout vec4 finalColor;\nuniform sampler2D uFromTexture;\nuniform sampler2D uToTexture;\nuniform float progress;\nvoid main(void) {\n  finalColor = mix(texture(uFromTexture, vTextureCoord), texture(uToTexture, vTextureCoord), progress);\n}\n";
+export declare const extractExistingUniforms: (glsl: string) => Set<string>;
+export declare const extractUniformTypes: (glsl: string) => Map<string, string>;
+export interface UniformDef {
+    value: number | Float32Array | Int32Array;
+    type: string;
+}
+export declare const uniformFromGlslType: (glslType: string, value: GlTransitionParam) => UniformDef | null;
+export declare const glslDecl: (key: string, value: GlTransitionParam) => string;
+export declare const stripInParamQualifier: (glsl: string) => string;
+export declare const buildFragment: (rawTransitionGLSL: string, allParams: GlTransitionParams) => string;
+export declare const uniformEntry: (value: GlTransitionParam) => UniformDef;

package/dist/utils/glTransitions/capture.d.ts

@@ -0,0 +1,26 @@
+import { Container, Geometry, Renderer, RenderTexture } from 'pixi.js';
+export interface TransitionLayer {
+    container: Container;
+    zIndex: number;
+}
+export interface TransitionRegion {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface MutableContainerRef {
+    current: Container | null;
+}
+/** gl-transitions shaders are GLSL, so only the WebGL renderer can run them. */
+export declare const isWebGLRenderer: (renderer: Pick<Renderer, "type"> | null | undefined) => boolean;
+/** Default cap on capture size; larger regions render at reduced resolution. */
+export declare const DEFAULT_MAX_REGION_PIXELS: number;
+/** Render-texture resolution (<= 1) that keeps a region within `maxPixels`. */
+export declare const regionResolution: (region: Pick<TransitionRegion, "width" | "height">, maxPixels?: number) => number;
+export declare const isPlaceholderSprite: (container: Container) => boolean;
+export declare const withForcedVisible: (container: Container) => (() => void);
+export declare const renderLayersIntoRT: (renderer: Renderer, tempContainerRef: MutableContainerRef, layers: TransitionLayer[], renderTexture: RenderTexture, offsetX?: number, offsetY?: number) => void;
+export declare const makeFullScreenQuad: () => Geometry;
+export declare const getContainerRegion: (container: Container) => TransitionRegion;
+export declare const unionRegion: (regions: Array<TransitionRegion | null | undefined>) => TransitionRegion | null;

package/dist/utils/glTransitions/catalog.d.ts

@@ -0,0 +1,124 @@
+/**
+ * GL Transition types based on gl-transitions library
+ * @see https://github.com/gl-transitions/gl-transitions/tree/master/transitions
+ */
+export declare const Transitions: {
+    readonly NONE: "none";
+    readonly FADE: "fade";
+    readonly DISSOLVE: "dissolve";
+    readonly WIPE: "wipe";
+    readonly WIPE_LEFT: "wipeLeft";
+    readonly WIPE_RIGHT: "wipeRight";
+    readonly WIPE_UP: "wipeUp";
+    readonly WIPE_DOWN: "wipeDown";
+    readonly DIRECTIONAL: "directional";
+    readonly DIRECTIONAL_EASING: "directional-easing";
+    readonly DIRECTIONAL_SCALED: "directionalScaled";
+    readonly DIRECTIONAL_WARP: "directionalwarp";
+    readonly DIRECTIONAL_WIPE: "directionalwipe";
+    readonly LEFT_RIGHT: "leftRight";
+    readonly TOP_BOTTOM: "topBottom";
+    readonly CROSS_ZOOM: "crossZoom";
+    readonly SIMPLE_ZOOM: "simpleZoom";
+    readonly SIMPLE_ZOOM_OUT: "simpleZoomOut";
+    readonly ZOOM_IN_CIRCLES: "zoomInCircles";
+    readonly ZOOM_LEFT_WIPE: "zoomLeftWipe";
+    readonly ZOOM_RIGHT_WIPE: "zoomRigthWipe";
+    readonly SCALE_IN: "scale-in";
+    readonly CIRCLE: "circle";
+    readonly CIRCLE_OPEN: "circleopen";
+    readonly CIRCLE_CROP: "circleCrop";
+    readonly RECTANGLE: "rectangle";
+    readonly RECTANGLE_CROP: "rectangleCrop";
+    readonly HEART: "heart";
+    readonly HEXAGONALIZE: "hexagonalize";
+    readonly POLKA_DOTS_CURTAIN: "polkaDotsCurtain";
+    readonly RANDOM_SQUARES: "randomsquares";
+    readonly SQUARES_WIRE: "squareswire";
+    readonly ANGULAR: "angular";
+    readonly CUBE: "cube";
+    readonly ROTATE_SCALE_FADE: "rotate_scale_fade";
+    readonly ROTATE_SCALE_VANISH: "rotateScaleVanish";
+    readonly ROTATE_TRANSITION: "rotateTransition";
+    readonly BOOK_FLIP: "bookFlip";
+    readonly PAGE_CURL: "pageCurl";
+    readonly INVERTED_PAGE_CURL: "invertedPageCurl";
+    readonly BOW_TIE_HORIZONTAL: "bowTieHorizontal";
+    readonly BOW_TIE_VERTICAL: "bowTieVertical";
+    readonly BOW_TIE_WITH_PARAMETER: "bowTieWithParameter";
+    readonly HORIZONTAL_OPEN: "horizontalOpen";
+    readonly HORIZONTAL_CLOSE: "horizontalClose";
+    readonly VERTICAL_OPEN: "verticalOpen";
+    readonly VERTICAL_CLOSE: "verticalClose";
+    readonly LINEAR_BLUR: "linearBlur";
+    readonly DREAMY: "dreamy";
+    readonly DREAMY_ZOOM: "dreamyZoom";
+    readonly SWIRL: "swirl";
+    readonly RIPPLE: "ripple";
+    readonly WIND: "wind";
+    readonly WATER_DROP: "waterDrop";
+    readonly DISPLACEMENT: "displacement";
+    readonly SQUEEZE: "squeeze";
+    readonly GLITCH_DISPLACE: "glitchDisplace";
+    readonly GLITCH_MEMORIES: "glitchMemories";
+    readonly TV_STATIC: "tvStatic";
+    readonly STATIC_FADE: "staticFade";
+    readonly STATIC_WIPE: "static_wipe";
+    readonly PARAMETRIC_GLITCH: "parametric_glitch";
+    readonly BURN: "burn";
+    readonly FILM_BURN: "filmBurn";
+    readonly UNDULATING_BURN_OUT: "undulatingBurnOut";
+    readonly DOOM_SCREEN_TRANSITION: "doomScreenTransition";
+    readonly OVEREXPOSURE: "overexposure";
+    readonly FADE_COLOR: "fadecolor";
+    readonly FADE_GRAYSCALE: "fadegrayscale";
+    readonly COLOR_PHASE: "colorphase";
+    readonly COLOUR_DISTANCE: "colourDistance";
+    readonly MULTIPLY_BLEND: "multiply_blend";
+    readonly GRID_FLIP: "gridFlip";
+    readonly MOSAIC: "mosaic";
+    readonly MOSAIC_TRANSITION: "mosaic_transition";
+    readonly PIXELIZE: "pixelize";
+    readonly CROSSHATCH: "crosshatch";
+    readonly WINDOW_BLINDS: "windowblinds";
+    readonly WINDOW_SLICE: "windowslice";
+    readonly MORPH: "morph";
+    readonly SWAP: "swap";
+    readonly CROSSWARP: "crosswarp";
+    readonly POLAR_FUNCTION: "polar_function";
+    readonly COORD_FROM_IN: "coord-from-in";
+    readonly KALEIDOSCOPE: "kaleidoscope";
+    readonly POWER_KALEIDO: "powerKaleido";
+    readonly PINWHEEL: "pinwheel";
+    readonly FLYEYE: "flyeye";
+    readonly STEREO_VIEWER: "stereoViewer";
+    readonly PERLIN: "perlin";
+    readonly RANDOM_NOISEX: "randomNoisex";
+    readonly TANGENT_MOTION_BLUR: "tangentMotionBlur";
+    readonly LUMA: "luma";
+    readonly LUMINANCE_MELT: "luminance_melt";
+    readonly BOUNCE: "bounce";
+    readonly BUTTERFLY_WAVE_SCRAWLER: "butterflyWaveScrawler";
+    readonly CRAZY_PARAMETRIC_FUN: "crazyParametricFun";
+    readonly CANNABIS_LEAF: "cannabisleaf";
+    readonly RADIAL: "radial";
+    readonly ROLLS: "rolls";
+    readonly SLIDES: "slides";
+    readonly DOORWAY: "doorway";
+    readonly EDGE_TRANSITION: "edgeTransition";
+    readonly X_AXIS_TRANSLATION: "x_axis_translation";
+    readonly SIMPLE_FLIP: "simpleFlip";
+    readonly HSV_FADE: "hsvfade";
+    readonly FOLD: "fold";
+    readonly BLOCK_DISSOLVE: "blockDissolve";
+    readonly ADVANCED_MOSAIC: "advancedMosaic";
+    readonly DEFOCUS_BLUR: "defocusBlur";
+    readonly PUZZLE_RIGHT: "puzzleRight";
+    readonly TILES_WAVE: "tilesWave";
+    readonly STAR_WIPE: "starWipe";
+    readonly CHESSBOARD: "chessboard";
+    readonly BURN_EFFECT: "burn0";
+    readonly FRAGMENT: "fragment";
+    readonly ZOOM_IN_OUT: "zoomInOut";
+};
+export type TransitionKey = keyof typeof Transitions;

package/dist/utils/glTransitions/createGLTransitionShader.d.ts

@@ -0,0 +1,20 @@
+import { Shader, RenderTexture, TextureSource } from 'pixi.js';
+import { GlTransitionParams } from '../../types/glTransition';
+export interface CreateGLTransitionShaderOptions {
+    width?: number;
+    height?: number;
+    params?: GlTransitionParams;
+}
+type BindableTexture = RenderTexture | {
+    source?: TextureSource;
+} | null | undefined;
+export interface GLTransitionShader {
+    shader: Shader;
+    resolvedName: string | null;
+    setProgress: (progress: number) => void;
+    setTextures: (fromTexture: BindableTexture, toTexture: BindableTexture) => void;
+    clearTextures: () => void;
+    destroy: () => void;
+}
+export declare const createGLTransitionShader: (transitionName: string, options?: CreateGLTransitionShaderOptions) => GLTransitionShader;
+export {};

package/dist/utils/glTransitions/index.d.ts

@@ -0,0 +1,8 @@
+export { Transitions } from './catalog';
+export type { TransitionKey } from './catalog';
+export { getTransitionShader, transitionExists, getAvailableTransitions, getTransitionInfo, listGlTransitionNames, } from './resolve';
+export { createGLTransitionShader } from './createGLTransitionShader';
+export type { CreateGLTransitionShaderOptions, GLTransitionShader, } from './createGLTransitionShader';
+export type { Transition as GlTransition } from 'gl-transitions';
+export type { TransitionRegion } from './capture';
+export { DEFAULT_MAX_REGION_PIXELS } from './capture';

package/dist/utils/glTransitions/nameMap.d.ts

@@ -0,0 +1 @@
+export declare const TRANSITION_NAME_MAP: Record<string, string>;

package/dist/utils/glTransitions/resolve.d.ts

@@ -0,0 +1,9 @@
+import { Transition as GlTransition } from 'gl-transitions';
+export declare const getTransitionShader: (transitionName: string | null | undefined) => GlTransition | null;
+export declare const transitionExists: (transitionName: string | null | undefined) => boolean;
+export declare const getAvailableTransitions: () => string[];
+export declare const getTransitionInfo: (transitionName: string | null | undefined) => GlTransition | null;
+export declare const listGlTransitionNames: () => string[];
+export declare const warnUnknownTransitionOnce: (name: string) => void;
+/** Test helper that resets warning deduplication without changing lookup behavior. */
+export declare const _clearUnknownTransitionWarnings: () => void;

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 export { isExternalUrl } from './isExternalUrl';
+export * from './glTransitions';
 export { loadSpriteTexture, type LoadSpriteTextureOptions, } from './loadSpriteTexture';
 export { areSpritePropsEqual, SPRITE_REF_PROP_NAMES, } from './areSpritePropsEqual';
 export { resolveTextRuns, resolveTextRunsWithWarnings, } from './text/resolveTextRuns';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reacthub-pixitweenjs",
-  "version": "0.3.0-alpha.5",
+  "version": "0.3.1",
   "description": "reacthub-pixitweenjs is a library that provides a powerful combination of React, PixiJS, GSAP, and image manipulation capabilities in a timeline sequence. With this library, you can easily create stunning animations and interactive graphics for your React applications",
   "author": "khanzzirfan <reacthub.ai@gmail.com>",
   "type": "module",
@@ -32,7 +32,7 @@
     "url": "https://github.com/khanzzirfan/reacthub-pixitweenjs"
   },
   "homepage": "https://pixitweenjs.xyz",
-  "license": "SEE LICENSE IN LICENSE.md",
+  "license": "MIT",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -110,10 +110,14 @@
     "eslint": "^8.45.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.5",
     "eslint-plugin-storybook": "^10.4.0",
     "framer-motion": "^12.0.0",
+    "gl-transitions": "^1.67.0",
     "gsap": "^3.15.0",
     "jest": "^29.7.0",
     "jest-image-snapshot": "^6.4.0",
@@ -138,7 +142,7 @@
     "typescript-plugin-css-modules": "^5.0.1",
     "vite": "^7.0.0",
     "vite-plugin-dts": "^5.0.0",
-    "vite-plugin-environment": "^1.1.3",
+    "vite-plugin-environment": "1.1.3",
     "vitest": "^4.0.0"
   },
   "dependencies": {
@@ -154,6 +158,7 @@
     "@react-three/fiber": "^9.6.1",
     "@react-three/postprocessing": "^3.0.4",
     "audiomotion-analyzer": "^4.3.0",
+    "gl-transitions": "^1.67.0",
     "gsap": "^3.15.0",
     "lottie-web": "^5.10.2",
     "pixi-filters": "^6.1.5",