reacthub-pixitweenjs 0.2.109-alpha.7 → 0.3.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (215) hide show
  1. package/LICENSE +8 -16
  2. package/LICENSE.md +79 -239
  3. package/README.md +241 -103
  4. package/dist/components/AepComposition/Aep3DPostFx.d.ts +7 -0
  5. package/dist/components/AepComposition/Aep3DPrecompPlane.d.ts +9 -0
  6. package/dist/components/AepComposition/Aep3DScene.d.ts +14 -0
  7. package/dist/components/AepComposition/Aep3DShapeMesh.d.ts +13 -0
  8. package/dist/components/AepComposition/Aep3DTextMesh.d.ts +17 -0
  9. package/dist/components/AepComposition/AepAssetResolver.d.ts +13 -0
  10. package/dist/components/AepComposition/AepAudioLayer.d.ts +28 -0
  11. package/dist/components/AepComposition/AepComposition.d.ts +16 -0
  12. package/dist/components/AepComposition/AepLayerProvider.d.ts +30 -0
  13. package/dist/components/AepComposition/AepLayerRouter.d.ts +5 -0
  14. package/dist/components/AepComposition/AepMsdfTextMesh.d.ts +17 -0
  15. package/dist/components/AepComposition/AepPrecompRenderContext.d.ts +23 -0
  16. package/dist/components/AepComposition/AepPrecompRenderer.d.ts +8 -0
  17. package/dist/components/AepComposition/AepTextOverrideContext.d.ts +8 -0
  18. package/dist/components/AepComposition/AepThemeContext.d.ts +8 -0
  19. package/dist/components/AepComposition/composeTransform3D.d.ts +27 -0
  20. package/dist/components/AepComposition/index.d.ts +39 -0
  21. package/dist/components/AepComposition/matteSourceIds.d.ts +2 -0
  22. package/dist/components/AepComposition/msdfAtlasRegistry.d.ts +16 -0
  23. package/dist/components/AepComposition/pathToThreeShape.d.ts +4 -0
  24. package/dist/components/AepComposition/resolveParentChain.d.ts +3 -0
  25. package/dist/components/AepComposition/resolvePostFxList.d.ts +2 -0
  26. package/dist/components/AepComposition/shouldSplitText.d.ts +26 -0
  27. package/dist/components/AepComposition/threeTextureFromPixi.d.ts +8 -0
  28. package/dist/components/AepComposition/useAepLayerTransform.d.ts +18 -0
  29. package/dist/components/AepComposition/useAepLayerTransform3D.d.ts +8 -0
  30. package/dist/components/AepComposition/useMsdfAtlasRegistry.d.ts +6 -0
  31. package/dist/components/AepComposition/usePixiRenderTexture.d.ts +14 -0
  32. package/dist/components/AepComposition/useResolveAsset.d.ts +8 -0
  33. package/dist/components/AepMask/AepMaskContainer.d.ts +9 -0
  34. package/dist/components/AepMask/PixiTrackMatte.d.ts +10 -0
  35. package/dist/components/AepMask/drawAepMask.d.ts +3 -0
  36. package/dist/components/AepMask/index.d.ts +5 -0
  37. package/dist/components/PixiAudioSprite/HowlerAudioSprite.d.ts +5 -7
  38. package/dist/components/PixiAudioSprite/PixiAudioSprite.d.ts +6 -2
  39. package/dist/components/PixiAudioSprite/useAudioVisualizer.d.ts +2 -2
  40. package/dist/components/PixiAudioSprite/wave-config.d.ts +0 -1
  41. package/dist/components/PixiGifSprite/PixiGifGsapSync.d.ts +11 -10
  42. package/dist/components/PixiImageSprite/PixiImageSprite.d.ts +11 -2
  43. package/dist/components/PixiLottieSprite/PixiLottieSprite.d.ts +5 -2
  44. package/dist/components/PixiNullObject/PixiNullObject.d.ts +25 -0
  45. package/dist/components/PixiNullObject/index.d.ts +2 -0
  46. package/dist/components/PixiPreComp/PixiPreComp.d.ts +29 -0
  47. package/dist/components/PixiPreComp/index.d.ts +3 -0
  48. package/dist/components/PixiPreComp/validatePrecompDepth.d.ts +2 -0
  49. package/dist/components/PixiRemotionSprite/PixiRemotionGifSprite.d.ts +24 -0
  50. package/dist/components/PixiRemotionSprite/PixiRemotionImageSprite.d.ts +18 -0
  51. package/dist/components/PixiRemotionSprite/PixiRemotionSprite.d.ts +5 -2
  52. package/dist/components/PixiRemotionSprite/PixiRemotionVideoCanvaSprite.d.ts +20 -0
  53. package/dist/components/PixiRemotionSprite/index.d.ts +4 -0
  54. package/dist/components/PixiSVGSprite/PixiMorphSvgSprite.d.ts +35 -0
  55. package/dist/components/PixiSVGSprite/PixiSvgPathSprite.d.ts +11 -4
  56. package/dist/components/PixiSVGSprite/index.d.ts +1 -0
  57. package/dist/components/PixiShapeLayer/PixiShapeLayer.d.ts +43 -0
  58. package/dist/components/PixiShapeLayer/drawShape.d.ts +20 -0
  59. package/dist/components/PixiShapeLayer/index.d.ts +4 -0
  60. package/dist/components/PixiShapeLayer/samplePath.d.ts +5 -0
  61. package/dist/components/PixiTextSprite/PixiTextSplit.d.ts +26 -0
  62. package/dist/components/PixiTextSprite/PixiTextSprite.d.ts +17 -5
  63. package/dist/components/PixiTextSprite/index.d.ts +3 -0
  64. package/dist/components/PixiTextSprite/resolveTextSplitFills.d.ts +27 -0
  65. package/dist/components/PixiTextSprite/textAnimator.d.ts +22 -0
  66. package/dist/components/PixiThreeSprite/PixiThreeSprite.d.ts +14 -0
  67. package/dist/components/PixiThreeSprite/index.d.ts +2 -0
  68. package/dist/components/PixiUnifiedTransformer/PixiUnifiedTransformer.d.ts +20 -8
  69. package/dist/components/PixiVideoSprite/PixiVideoCanvasSync.d.ts +3 -1
  70. package/dist/components/PixiVideoSprite/PixiVideoSprite.d.ts +5 -2
  71. package/dist/components/index.d.ts +5 -0
  72. package/dist/events/Events.d.ts +0 -1
  73. package/dist/hocs/AbstractContainer.d.ts +3 -1
  74. package/dist/hocs/BorderMaskContainer.d.ts +28 -0
  75. package/dist/hocs/OverlayTilingSprite.d.ts +3 -3
  76. package/dist/hocs/drawMaskShape.d.ts +3 -0
  77. package/dist/hocs/index.d.ts +5 -0
  78. package/dist/hooks/aep/buildAudioLevelTimeline.d.ts +7 -0
  79. package/dist/hooks/aep/buildBezierPathTimeline.d.ts +13 -0
  80. package/dist/hooks/aep/buildColorValueTimeline.d.ts +24 -0
  81. package/dist/hooks/aep/buildLayerTimeline.d.ts +20 -0
  82. package/dist/hooks/aep/buildScalarValueTimeline.d.ts +6 -0
  83. package/dist/hooks/aep/buildVec2ValueTimeline.d.ts +17 -0
  84. package/dist/hooks/aep/easeCache.d.ts +3 -0
  85. package/dist/hooks/aep/effectRegistry.d.ts +5 -0
  86. package/dist/hooks/aep/effects/brightnessContrast.d.ts +2 -0
  87. package/dist/hooks/aep/effects/dropShadow.d.ts +2 -0
  88. package/dist/hooks/aep/effects/fastBoxBlur.d.ts +2 -0
  89. package/dist/hooks/aep/effects/gaussianBlur.d.ts +2 -0
  90. package/dist/hooks/aep/effects/glow.d.ts +2 -0
  91. package/dist/hooks/aep/effects/hueSaturation.d.ts +2 -0
  92. package/dist/hooks/aep/effects/index.d.ts +9 -0
  93. package/dist/hooks/aep/effects/levels.d.ts +2 -0
  94. package/dist/hooks/aep/effects/tint.d.ts +2 -0
  95. package/dist/hooks/aep/effects/types.d.ts +8 -0
  96. package/dist/hooks/aep/index.d.ts +22 -0
  97. package/dist/hooks/aep/interpolateBezierPath.d.ts +3 -0
  98. package/dist/hooks/aep/sampleAnimatable.d.ts +13 -0
  99. package/dist/hooks/aep/useAepBezierPathAnimator.d.ts +12 -0
  100. package/dist/hooks/aep/useAepColorAnimator.d.ts +11 -0
  101. package/dist/hooks/aep/useAepCurrentFrame.d.ts +1 -0
  102. package/dist/hooks/aep/useAepEffectKeyframes.d.ts +4 -0
  103. package/dist/hooks/aep/useAepEffects.d.ts +3 -0
  104. package/dist/hooks/aep/useAepKeyframes.d.ts +15 -0
  105. package/dist/hooks/aep/useAepTextLayout.d.ts +12 -0
  106. package/dist/hooks/aep/useAepValueAnimator.d.ts +2 -0
  107. package/dist/hooks/aep/useAepVec2Animator.d.ts +10 -0
  108. package/dist/hooks/aep/useTypefaceMetrics.d.ts +2 -0
  109. package/dist/hooks/index.d.ts +2 -0
  110. package/dist/hooks/useSpriteFilters.d.ts +39 -0
  111. package/dist/hooks/withFiltersHook.d.ts +1 -1
  112. package/dist/importers/aep/bodymovin-color-controls.d.ts +23 -0
  113. package/dist/importers/aep/bodymovin-color.d.ts +1 -0
  114. package/dist/importers/aep/bodymovin-keyframe.d.ts +42 -0
  115. package/dist/importers/aep/bodymovin-layer.d.ts +84 -0
  116. package/dist/importers/aep/bodymovin-transform.d.ts +12 -0
  117. package/dist/importers/aep/bodymovin.d.ts +7 -0
  118. package/dist/importers/aep/bodymovinCameras.d.ts +34 -0
  119. package/dist/importers/aep/bodymovinExtensions.d.ts +3 -0
  120. package/dist/importers/aep/bodymovinTextRuns.d.ts +13 -0
  121. package/dist/importers/aep/index.d.ts +7 -0
  122. package/dist/importers/aep/lottieLint.d.ts +23 -0
  123. package/dist/importers/aep/lottieLint.rules.d.ts +6 -0
  124. package/dist/index.d.ts +3 -0
  125. package/dist/index.es.js +60038 -29928
  126. package/dist/index.umd.js +4351 -1851
  127. package/dist/lib/pixi-essentials/bounds/AxisAlignedBounds.d.ts +121 -0
  128. package/dist/lib/pixi-essentials/bounds/OrientedBounds.d.ts +103 -0
  129. package/dist/lib/pixi-essentials/bounds/index.d.ts +2 -0
  130. package/dist/lib/pixi-essentials/index.d.ts +6 -0
  131. package/dist/lib/pixi-essentials/object-pool/AverageProvider.d.ts +28 -0
  132. package/dist/lib/pixi-essentials/object-pool/ObjectPool.d.ts +103 -0
  133. package/dist/lib/pixi-essentials/object-pool/ObjectPoolFactory.d.ts +40 -0
  134. package/dist/lib/pixi-essentials/object-pool/index.d.ts +2 -0
  135. package/dist/lib/pixi-essentials/react-bindings/Transformer.d.ts +74 -0
  136. package/dist/lib/pixi-essentials/react-bindings/index.d.ts +3 -0
  137. package/dist/lib/pixi-essentials/react-bindings/utils/applyEventProps.d.ts +13 -0
  138. package/dist/lib/pixi-essentials/transformer/Transformer.d.ts +728 -0
  139. package/dist/lib/pixi-essentials/transformer/TransformerHandle.d.ts +142 -0
  140. package/dist/lib/pixi-essentials/transformer/TransformerWireframe.d.ts +54 -0
  141. package/dist/lib/pixi-essentials/transformer/index.d.ts +5 -0
  142. package/dist/lib/pixi-essentials/transformer/utils/decomposeTransform.d.ts +11 -0
  143. package/dist/lib/pixi-essentials/transformer/utils/distanceToLine.d.ts +7 -0
  144. package/dist/lib/pixi-essentials/transformer/utils/multiplyTransform.d.ts +17 -0
  145. package/dist/lib/pixi-essentials/transformer/utils/skewTransform.d.ts +13 -0
  146. package/dist/types/BaseProps.d.ts +11 -3
  147. package/dist/types/MaskTypes.d.ts +10 -0
  148. package/dist/types/OverlayTypes.d.ts +9 -0
  149. package/dist/types/aep/asset.d.ts +43 -0
  150. package/dist/types/aep/camera.d.ts +778 -0
  151. package/dist/types/aep/composition.d.ts +82 -0
  152. package/dist/types/aep/effect.d.ts +137 -0
  153. package/dist/types/aep/index.d.ts +14 -0
  154. package/dist/types/aep/layer.d.ts +21579 -0
  155. package/dist/types/aep/light.d.ts +781 -0
  156. package/dist/types/aep/mask.d.ts +193 -0
  157. package/dist/types/aep/parse.d.ts +11 -0
  158. package/dist/types/aep/postFx.d.ts +107 -0
  159. package/dist/types/aep/text-animator.d.ts +687 -0
  160. package/dist/types/aep/text-runs.d.ts +234 -0
  161. package/dist/types/aep/theme.d.ts +72 -0
  162. package/dist/types/aep/transform.d.ts +285 -0
  163. package/dist/types/aep/transform3D.d.ts +171 -0
  164. package/dist/types/index.d.ts +3 -0
  165. package/dist/utils/AppStateProvider.d.ts +1 -0
  166. package/dist/utils/AppWrapper.d.ts +3 -0
  167. package/dist/utils/ContextBridge.d.ts +1 -1
  168. package/dist/utils/GsapAnims.d.ts +0 -1
  169. package/dist/utils/InteractionManager.d.ts +1 -10
  170. package/dist/utils/aeMath/zoomToFov.d.ts +1 -0
  171. package/dist/utils/areSpritePropsEqual.d.ts +8 -0
  172. package/dist/utils/index.d.ts +6 -0
  173. package/dist/utils/isExternalUrl.d.ts +1 -0
  174. package/dist/utils/loadSpriteTexture.d.ts +10 -0
  175. package/dist/utils/msdf/computeInstanceMatrix.d.ts +18 -0
  176. package/dist/utils/msdf/index.d.ts +4 -0
  177. package/dist/utils/msdf/loadMsdfAtlas.d.ts +9 -0
  178. package/dist/utils/msdf/msdfShader.d.ts +2 -0
  179. package/dist/utils/msdf/types.d.ts +49 -0
  180. package/dist/utils/text/resolveTextRuns.d.ts +8 -0
  181. package/dist/utils/textLayout/alignLines.d.ts +15 -0
  182. package/dist/utils/textLayout/applyVerticals.d.ts +14 -0
  183. package/dist/utils/textLayout/breakLines.d.ts +14 -0
  184. package/dist/utils/textLayout/canvasMetricsProvider.d.ts +6 -0
  185. package/dist/utils/textLayout/index.d.ts +7 -0
  186. package/dist/utils/textLayout/layoutText.d.ts +2 -0
  187. package/dist/utils/textLayout/metricsCache.d.ts +9 -0
  188. package/dist/utils/textLayout/pixiCanvasMetricsProvider.d.ts +6 -0
  189. package/dist/utils/textLayout/shapeRuns.d.ts +18 -0
  190. package/dist/utils/textLayout/typefaceMetricsProvider.d.ts +19 -0
  191. package/dist/utils/textLayout/types.d.ts +61 -0
  192. package/dist/utils/textLayout/unicode.d.ts +2 -0
  193. package/package.json +72 -47
  194. package/dist/assets/icon/transformericons/icons.d.ts +0 -8
  195. package/dist/components/PixiAudioSprite/PixiAudioSprite.stories.d.ts +0 -12
  196. package/dist/components/PixiGifSprite/PixiGifSprite.stories.d.ts +0 -163
  197. package/dist/components/PixiImageSprite/PixiImageSprite.stories.d.ts +0 -150
  198. package/dist/components/PixiLottieSprite/PixiLottieSprite.stories.d.ts +0 -159
  199. package/dist/components/PixiSVGSprite/PixiSvgPathSprite.stories.d.ts +0 -131
  200. package/dist/components/PixiSequence/PixiSequence.stories.d.ts +0 -33
  201. package/dist/components/PixiTextSprite/PixiTextSprite.stories.d.ts +0 -140
  202. package/dist/components/PixiVideoSprite/PixiVideoSprite.stories.d.ts +0 -146
  203. package/dist/favicon.svg +0 -41
  204. package/dist/hooks/withEffectsHook.d.ts +0 -5
  205. package/dist/pixitweenjs-logo-dark.svg +0 -98
  206. package/dist/pixitweenjs-logo.svg +0 -97
  207. package/dist/stories/Features/TestHowlerAudioFiles.d.ts +0 -2
  208. package/dist/stories/Features/TimelineAnimations.d.ts +0 -15
  209. package/dist/stories/Features/TimelineTest.d.ts +0 -15
  210. package/dist/stories/Features/TimelineTest.stories.d.ts +0 -23
  211. package/dist/stories/Features/TimelineTestAudios.d.ts +0 -15
  212. package/dist/stories/Features/TimelineTestWithVideos.d.ts +0 -15
  213. package/dist/stories/Features/TimelineWithGif.d.ts +0 -21
  214. package/dist/stories/Features/common.tests.d.ts +0 -411
  215. /package/dist/{.gitkeep → utils/pixiExtend.d.ts} +0 -0
package/README.md CHANGED
@@ -10,6 +10,13 @@
10
10
 
11
11
  **A powerful library for creating stunning animated, time-controlled canvas elements in React using PixiJS, GSAP, and more**
12
12
 
13
+ > **🚧 React 19 + Pixi v8 alpha**: `0.3.0-alpha` ships on React 19,
14
+ > Pixi v8, and `@pixi/react` v8. Install with
15
+ > `yarn add reacthub-pixitweenjs@alpha`. See
16
+ > [docs/MIGRATION-REACT19.md](docs/MIGRATION-REACT19.md) for the upgrade
17
+ > guide, known gaps, and bundle-size deltas. The stable `0.2.x` line
18
+ > remains on React 18 / Pixi v7.
19
+
13
20
  [![npm version](https://img.shields.io/npm/v/reacthub-pixitweenjs.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/reacthub-pixitweenjs)
14
21
  [![npm downloads](https://img.shields.io/npm/dm/reacthub-pixitweenjs.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/reacthub-pixitweenjs)
15
22
  [![license](https://img.shields.io/npm/l/reacthub-pixitweenjs.svg?style=for-the-badge)](LICENSE.md)
@@ -35,7 +42,7 @@
35
42
  ╚═══════════════════════════════════════════════════════════════════════════════╝
36
43
  </pre>
37
44
 
38
- **[📖 Documentation](https://pixitweenjs.xyz/)** • **[🎮 Live Demo](https://pixitweenjs.xyz/)** • **[💬 Issues](https://github.com/khanzzirfan/reacthub-pixitweenjs/issues)** • **[🤝 Contributing](Contribution.md)**
45
+ **[📖 Documentation](https://pixitweenjs.xyz/docs/introduction)** • **[🎮 Examples](https://pixitweenjs.xyz/docs/cookbook)** • **[💬 Issues](https://github.com/khanzzirfan/reacthub-pixitweenjs/issues)** • **[🤝 Contributing](Contribution.md)**
39
46
 
40
47
  </div>
41
48
 
@@ -68,75 +75,103 @@
68
75
 
69
76
  ### Installation
70
77
 
78
+ `reacthub-pixitweenjs@0.3.x` (React 19 + Pixi v8 + `@pixi/react` v8) is on
79
+ the `alpha` dist-tag. The `0.2.x` stable line stays on React 18 / Pixi v7.
80
+
71
81
  ```bash
72
- npm install reacthub-pixitweenjs
82
+ yarn add reacthub-pixitweenjs@alpha
83
+ # or
84
+ npm install reacthub-pixitweenjs@alpha
73
85
  ```
74
86
 
75
- or
87
+ ### Required Peer Dependencies
76
88
 
77
89
  ```bash
78
- yarn add reacthub-pixitweenjs
90
+ yarn add \
91
+ react@^19 \
92
+ react-dom@^19 \
93
+ pixi.js@^8.18 \
94
+ @pixi/react@^8 \
95
+ pixi-filters@^6 \
96
+ @pixi/sound@^6 \
97
+ gsap@^3.15 \
98
+ @gsap/react@^2.1 \
99
+ lottie-web@^5.10 \
100
+ audiomotion-analyzer@^4.3
79
101
  ```
80
102
 
81
- ### Required Dependencies
103
+ GIF support: native `pixi.js/gif` subpath — no separate package. SVG:
104
+ native `Graphics.svg()` — `pixi-svg` no longer needed.
82
105
 
83
- Make sure to install these peer dependencies:
106
+ ### Register Pixi intrinsics
84
107
 
85
- ```bash
86
- npm install \
87
- @pixi/gif@^2.1.0 \
88
- @pixi/react@~7.1.0 \
89
- @pixi/sound@^5.2.1 \
90
- pixi-filters@^5.2.1 \
91
- pixi-svg@^3.2.0 \
92
- pixi.js@^7.2.3 \
93
- gsap@3.11.5 \
94
- howler@^2.2.3 \
95
- lottie-web@^5.10.2 \
96
- react-custom-events@^1.1.1 \
97
- react@^18.2.0 \
98
- react-dom@^18.2.0
108
+ Pixi v8 + `@pixi/react` v8 use a JSX pragma. The library **self-registers**
109
+ the classes it uses when imported (`src/index.ts` imports
110
+ `./utils/pixiExtend`), so you don't need to call `extend()` yourself for any
111
+ class the library uses internally.
112
+
113
+ If you compose with additional Pixi classes in your own JSX (e.g.
114
+ `pixi-viewport`), register them once at the app entry point:
115
+
116
+ ```ts
117
+ // src/pixi-extend.ts
118
+ import { extend } from "@pixi/react";
119
+ import { Viewport } from "pixi-viewport";
120
+
121
+ extend({ Viewport });
99
122
  ```
100
123
 
101
124
  ### Basic Example
102
125
 
103
126
  ```tsx
104
127
  import React from "react";
105
- import { GsapPixieContextProvider } from "reacthub-pixitweenjs";
106
- import { PixiStage } from "reacthub-pixitweenjs";
107
- import { PixiSequence } from "reacthub-pixitweenjs";
108
- import { PixiImageSprite } from "reacthub-pixitweenjs";
128
+ import { Application } from "@pixi/react";
129
+ import {
130
+ GsapPixieContextProvider,
131
+ PixiSequence,
132
+ PixiSequenceWrapper,
133
+ PixiImageSprite,
134
+ } from "reacthub-pixitweenjs";
135
+ import "./pixi-extend";
109
136
 
110
137
  function MyAnimatedScene() {
111
138
  return (
112
139
  <GsapPixieContextProvider>
113
- <PixiStage
140
+ <Application
114
141
  width={1920}
115
142
  height={1080}
116
- options={{ backgroundColor: 0x2d2e3c }}
143
+ backgroundColor={0x2d2e3c}
144
+ resolution={2}
117
145
  >
118
- <PixiSequence startAt={0} endAt={10}>
119
- <PixiImageSprite
120
- uniqueId="hero-image"
121
- src="https://example.com/image.jpg"
122
- transformation={{
123
- x: 960,
124
- y: 540,
125
- width: 800,
126
- height: 600,
127
- anchor: 0.5,
128
- alpha: 1,
129
- }}
130
- startAt={0}
131
- endAt={10}
132
- />
133
- </PixiSequence>
134
- </PixiStage>
146
+ <PixiSequenceWrapper startAt={0} endAt={10}>
147
+ <PixiSequence startAt={0} endAt={10}>
148
+ <PixiImageSprite
149
+ uniqueId="hero-image"
150
+ src="https://example.com/image.jpg"
151
+ startAt={0}
152
+ endAt={10}
153
+ visible
154
+ transformation={{
155
+ x: 960,
156
+ y: 540,
157
+ width: 800,
158
+ height: 600,
159
+ anchor: 0.5,
160
+ alpha: 1,
161
+ }}
162
+ />
163
+ </PixiSequence>
164
+ </PixiSequenceWrapper>
165
+ </Application>
135
166
  </GsapPixieContextProvider>
136
167
  );
137
168
  }
138
169
  ```
139
170
 
171
+ > **Migrating from `0.2.x`?** See
172
+ > [docs/MIGRATION-REACT19.md](docs/MIGRATION-REACT19.md) for the
173
+ > breaking-change list, removed APIs, and bundle-size deltas.
174
+
140
175
  ---
141
176
 
142
177
  ## 🎯 **Core Components**
@@ -184,14 +219,30 @@ Seamlessly integrate video with GSAP timeline synchronization.
184
219
 
185
220
  ### 🎵 **PixiAudioSprite**
186
221
 
187
- Audio playback with real-time visualization support.
222
+ Audio playback with real-time spectrum visualization via
223
+ `audiomotion-analyzer`. Set `transformation.waveform` to one of the
224
+ `Waveforms` enum values (`EQUALIZER`, `ROUNDBARS`, `LED`,
225
+ `RADIAL_SPECTRUM`, `LUMI_BARS`) to render a visualizer canvas.
188
226
 
189
227
  ```tsx
190
228
  <PixiAudioSprite
229
+ uniqueId="bg-audio"
191
230
  src="path/to/audio.mp3"
192
231
  startAt={0}
193
232
  endAt={20}
194
- showWaveform={true}
233
+ audioStartAt={0}
234
+ audioEndAt={20}
235
+ mute={false}
236
+ speed={1}
237
+ visible
238
+ transformation={{
239
+ x: 400,
240
+ y: 300,
241
+ width: 480,
242
+ height: 200,
243
+ anchor: 0.5,
244
+ waveform: "equalizer",
245
+ }}
195
246
  />
196
247
  ```
197
248
 
@@ -221,15 +272,26 @@ Rich typography with custom fonts, colors, and effects.
221
272
 
222
273
  ### 🎨 **PixiSVGSprite**
223
274
 
224
- Vector graphics with full transformation support.
275
+ Vector graphics rendered via Pixi v8's native `Graphics.svg()`. Pass
276
+ either a raw `svg` string or a `path` for path-only rendering.
225
277
 
226
278
  ```tsx
227
279
  <PixiSVGSprite
228
- svgPath="M10,10 L100,10 L100,100 Z"
229
- fill={0xff5733}
230
- transformation={{ x: 200, y: 200, width: 100, height: 100, anchor: 0.5 }}
280
+ uniqueId="logo"
281
+ path="M10,10 L100,10 L100,100 Z"
231
282
  startAt={0}
232
283
  endAt={10}
284
+ visible
285
+ transformation={{
286
+ x: 200,
287
+ y: 200,
288
+ width: 100,
289
+ height: 100,
290
+ anchor: 0.5,
291
+ fill: "#ff5733",
292
+ stroke: "#000000",
293
+ strokeWidth: 2,
294
+ }}
233
295
  />
234
296
  ```
235
297
 
@@ -265,16 +327,30 @@ Time-based composition and sequencing.
265
327
  </PixiSequence>
266
328
  ```
267
329
 
268
- ### 🎛️ **PixiTransformer**
330
+ ### 🎛️ **PixiUnifiedTransformer**
269
331
 
270
- Interactive element manipulation with visual handles.
332
+ Interactive transformer overlay — drag, 4-corner resize, top-mid
333
+ rotate. Inline-rewritten for Pixi v8 (replaces the v7
334
+ `pixi-essentials/transformer` dep).
271
335
 
272
336
  ```tsx
273
- <PixiTransformer
274
- pixiTransformerRef={transformerRef}
275
- imageRef={imageRef}
276
- transformCommit={handleTransform}
277
- transformChange={handleChange}
337
+ const containerRefsMap = useRef<
338
+ Record<string, RefObject<PIXI.Container | null>>
339
+ >({});
340
+
341
+ <PixiImageSprite
342
+ uniqueId="hero"
343
+ onContainerRefReady={(id, ref) => {
344
+ containerRefsMap.current[id] = ref;
345
+ }}
346
+ // ...
347
+ />
348
+
349
+ <PixiUnifiedTransformer
350
+ selectedElementIds={["hero"]}
351
+ containerRefsMap={containerRefsMap.current}
352
+ mouseOverTransformerRef={mouseOverTransformerRef}
353
+ onTransformCommit={(id, transform) => saveTransform(id, transform)}
278
354
  />
279
355
  ```
280
356
 
@@ -308,50 +384,120 @@ Create complex animations with precise timing:
308
384
 
309
385
  ### 🎨 Color Correction & Effects
310
386
 
311
- Professional-grade image manipulation:
387
+ Driven by the shared `useSpriteFilters` hook (Pixi v8 + `pixi-filters` v6).
388
+ Ordered filter chain: temperature → sharpness → HSL → adjustment →
389
+ effect preset → blur → vignette → noise.
312
390
 
313
391
  ```tsx
314
392
  transformation={{
315
393
  colorCorrection: {
316
- temperature: 6500, // White balance
317
- contrast: 1.2, // Contrast adjustment
318
- saturation: 1.5, // Color saturation
319
- exposure: 0, // Brightness exposure
320
- hue: 0, // Hue shift
321
- blurRadius: 0, // Gaussian blur
322
- sharpness: 1, // Edge sharpness
323
- vignette: 0 // Vignette effect
394
+ temperature: 10, // -100 to +100 (warm/cool)
395
+ contrast: 1.2,
396
+ saturation: 1.5,
397
+ brightness: 1.1,
398
+ hue: 0, // degrees
399
+ sharpness: 0.3, // 0–1
400
+ blurRadius: 0, // Kawasaki blur strength
401
+ vignette: 0, // 0–1
402
+ noise: 0, // 0–1
403
+ red: 1, green: 1, blue: 1, alpha: 1, gamma: 1,
324
404
  },
325
- effect: {
326
- // Add particle effects, glows, etc.
327
- }
405
+ effect: "Sepia", // BlackAndWhite | Sepia | RetroVintage | NightVision | CYAN | Vignette | None
406
+ }}
407
+ ```
408
+
409
+ ### 🪟 Border + Mask
410
+
411
+ Every uplifted sprite supports an optional border stroke and a mask
412
+ shape (rounded corners, circle, heart, star, etc.) via
413
+ `BorderMaskContainer` — wire from `transformation`:
414
+
415
+ ```tsx
416
+ transformation={{
417
+ border: { width: 4, color: 0xff0055 },
418
+ roundedCorners: 24, // boolean OR scalar radius
419
+ maskShape: "circle", // none | horizontal | mirror | circle | rectangle | heart | stars
328
420
  }}
329
421
  ```
330
422
 
331
423
  ### 🔄 GSAP Animation Integration
332
424
 
333
- Leverage the full power of GSAP:
425
+ Use `useGSAP` from `@gsap/react`, capture the sprite's container ref
426
+ via `onSpriteRefReady`, and add tweens onto the master timeline so
427
+ play/pause/seek scrub them:
334
428
 
335
429
  ```tsx
336
- const { tl } = useContext(GsapPixieContext);
337
-
338
- // Access the master timeline
339
- tl.to(spriteRef, {
340
- x: 1000,
341
- y: 500,
342
- rotation: 360,
343
- duration: 5,
344
- });
430
+ import { useGSAP } from "@gsap/react";
431
+ import { GsapPixieContext } from "reacthub-pixitweenjs";
432
+
433
+ function AnimatedHero({ args }) {
434
+ const { tl } = useContext(GsapPixieContext);
435
+ const [target, setTarget] = useState<PIXI.Container | null>(null);
436
+
437
+ useGSAP(
438
+ () => {
439
+ if (!target || !tl?.current) return;
440
+ const tween = gsap.to(target, {
441
+ duration: 4,
442
+ ease: "sine.inOut",
443
+ motionPath: {
444
+ path: [
445
+ { x: 0, y: 0 },
446
+ { x: 120, y: -80 },
447
+ { x: 240, y: 60 },
448
+ { x: 0, y: 0 },
449
+ ],
450
+ curviness: 1.5,
451
+ },
452
+ repeat: 1,
453
+ yoyo: true,
454
+ });
455
+ tl.current.add(tween, args.startAt);
456
+ return () => {
457
+ tl.current?.remove(tween);
458
+ tween.kill();
459
+ };
460
+ },
461
+ { dependencies: [target, tl] },
462
+ );
463
+
464
+ return (
465
+ <PixiImageSprite
466
+ {...args}
467
+ onSpriteRefReady={(_id, ref) => setTarget(ref.current)}
468
+ />
469
+ );
470
+ }
345
471
  ```
346
472
 
347
473
  ---
348
474
 
349
475
  ## 📚 **Documentation & Resources**
350
476
 
351
- - **[📖 Complete Documentation](https://pixitweenjs.xyz/)** - Interactive Storybook docs
352
- - **[🎮 Live Playground](https://pixitweenjs.xyz/)** - Try it online
353
- - **[💡 Installation Guide](https://pixitweenjs.xyz/?path=/docs/getting-started-installation--docs)**
354
- - **[🎬 Examples](https://pixitweenjs.xyz/?path=/docs/components-imagesprite--docs)**
477
+ - **[📖 Complete Documentation](https://pixitweenjs.xyz/docs/introduction)** - The docs site
478
+ - **[🎮 Cookbook & Examples](https://pixitweenjs.xyz/docs/cookbook)** - Live, copy-paste recipes
479
+ - **[💡 Installation Guide](https://pixitweenjs.xyz/docs/installation)**
480
+ - **[🔒 License & Pricing](https://pixitweenjs.xyz/docs/license/overview)**
481
+
482
+ > Storybook is used as an **internal dev playground** for the library
483
+ > itself (`yarn storybook`). It is no longer the public documentation
484
+ > surface — the docs site at pixitweenjs.xyz is.
485
+
486
+ ### 🛠️ Local development
487
+
488
+ ```bash
489
+ git clone https://github.com/khanzzirfan/reacthub-pixitweenjs
490
+ cd reacthub-pixitweenjs
491
+ yarn
492
+ yarn docs:dev # docs site (Docusaurus) on port 3000
493
+ yarn docs:build # production build of the docs site
494
+ yarn storybook # internal Storybook playground (port 6006)
495
+ yarn test:render:frames # Remotion-based render snapshot tests
496
+ yarn build # library build (Vite)
497
+ ```
498
+
499
+ The docs site runs demos against the **library source** via a webpack
500
+ alias, so examples always match the current API — no rebuild needed.
355
501
 
356
502
  ---
357
503
 
@@ -363,31 +509,23 @@ We welcome contributions! Please read our [Contributing Guide](Contribution.md)
363
509
 
364
510
  ## 📄 **License**
365
511
 
366
- This library is licensed under the **Apache License 2.0** with additional terms. See [LICENSE.md](LICENSE.md) for complete terms.
367
-
368
- > **📋 Quick Reference:** Apache 2.0 is an open-source license that allows commercial use, modification, distribution, patent use, private use, and sublicensing. See the full license for all terms and additional restrictions.
369
-
370
- ### What You Can Do
371
-
372
- ✅ **Permitted:**
373
-
374
- - ✅ Commercial use in any project
375
- - ✅ Modify and adapt the code
376
- - ✅ Distribute and sublicense
377
- - ✅ Private and internal use
378
- - ✅ Patent grant included
379
- - ✅ Place warranty
512
+ PixiTweenJS is **source-available software** under the
513
+ **[PixiTweenJS License](LICENSE.md)** (not an OSI-approved open-source
514
+ license).
380
515
 
381
- ❌ **Additional Restrictions:**
516
+ It is **free** for:
382
517
 
383
- - ❌ Must include copyright notice
384
- - ❌ Cannot remove attribution
385
- - ❌ Must include license file
386
- - ❌ Commercial deployments should notify author
518
+ - individuals and freelancers,
519
+ - non-profits / not-for-profits,
520
+ - organizations with annual revenue or turnover **under €1M**.
387
521
 
388
- ### Commercial Use
522
+ Organizations with annual revenue or turnover **€1M or more** must purchase a
523
+ **Company License** for commercial use.
389
524
 
390
- Apache 2.0 allows commercial use. However, for large-scale enterprise deployments or white-label products, we recommend contacting **reacthub.ai@gmail.com** to discuss licensing options and potential support arrangements.
525
+ See [License overview](https://pixitweenjs.xyz/docs/license/overview),
526
+ [Pricing](https://pixitweenjs.xyz/docs/license/pricing), and the
527
+ [FAQ](https://pixitweenjs.xyz/docs/license/faq). For licensing inquiries:
528
+ **reacthub.ai@gmail.com**.
391
529
 
392
530
  ---
393
531
 
@@ -0,0 +1,7 @@
1
+ import { AepPostFx } from '../../types/aep';
2
+ import * as React from "react";
3
+ export interface Aep3DPostFxProps {
4
+ passes: AepPostFx[] | undefined;
5
+ currentFrame: number;
6
+ }
7
+ export declare const Aep3DPostFx: React.FC<Aep3DPostFxProps>;
@@ -0,0 +1,9 @@
1
+ import { AepLayer } from '../../types/aep';
2
+ import * as React from "react";
3
+ export interface Aep3DPrecompPlaneProps {
4
+ layer: AepLayer & {
5
+ kind: "precomp";
6
+ };
7
+ zOrder: number;
8
+ }
9
+ export declare const Aep3DPrecompPlane: React.FC<Aep3DPrecompPlaneProps>;
@@ -0,0 +1,14 @@
1
+ import { AepCompositionJson, AepThemeMap } from '../../types/aep';
2
+ import * as React from "react";
3
+ export interface Aep3DSceneProps {
4
+ comp: AepCompositionJson;
5
+ currentFrame: number;
6
+ width: number;
7
+ height: number;
8
+ background?: string;
9
+ /** When true, never mount the Three Canvas — useful for screenshot debugging. */
10
+ disabled?: boolean;
11
+ /** aep-29: runtime theme map. Merged over `comp.theme`. */
12
+ theme?: AepThemeMap;
13
+ }
14
+ export declare const Aep3DScene: React.FC<Aep3DSceneProps>;
@@ -0,0 +1,13 @@
1
+ import { AepExtrusion, AepShapePath, AepThemableColor } from '../../types/aep';
2
+ import * as React from "react";
3
+ export interface Aep3DShapeMeshProps {
4
+ path: AepShapePath;
5
+ fill?: AepThemableColor;
6
+ extrusion: AepExtrusion;
7
+ currentFrame: number;
8
+ position: [number, number, number];
9
+ rotation: [number, number, number];
10
+ scale: [number, number, number];
11
+ opacity: number;
12
+ }
13
+ export declare const Aep3DShapeMesh: React.FC<Aep3DShapeMeshProps>;
@@ -0,0 +1,17 @@
1
+ import { AepLayer, AepExtrusion } from '../../types/aep';
2
+ import * as React from "react";
3
+ type AepTextLayer = Extract<AepLayer, {
4
+ kind: "text";
5
+ }>;
6
+ export interface Aep3DTextMeshProps {
7
+ layer: AepTextLayer;
8
+ extrusion?: AepExtrusion;
9
+ currentFrame: number;
10
+ fontUrl: string;
11
+ position: [number, number, number];
12
+ rotation: [number, number, number];
13
+ scale: [number, number, number];
14
+ opacity: number;
15
+ }
16
+ export declare const Aep3DTextMesh: React.FC<Aep3DTextMeshProps>;
17
+ export {};
@@ -0,0 +1,13 @@
1
+ import { AepAssetMap } from '../../types/aep';
2
+ import * as React from "react";
3
+ export interface AepResolvedAsset {
4
+ url: string;
5
+ mime?: string;
6
+ }
7
+ export type AepAssetResolver = (assetId: string, asset: AepAssetMap[string] | undefined) => Promise<AepResolvedAsset> | AepResolvedAsset;
8
+ export declare function defaultAssetResolver(assetId: string, asset: AepAssetMap[string] | undefined): AepResolvedAsset;
9
+ export declare const AepAssetResolverProvider: React.FC<{
10
+ resolver: AepAssetResolver;
11
+ children: React.ReactNode;
12
+ }>;
13
+ export declare function useAepAssetResolver(): AepAssetResolver;
@@ -0,0 +1,28 @@
1
+ import { AepAnimatable } from '../../types/aep';
2
+ import * as React from "react";
3
+ export interface AepAudioLayerProps {
4
+ uniqueId: string;
5
+ src: string;
6
+ startAt: number;
7
+ endAt: number;
8
+ inPointFrames: number;
9
+ level?: AepAnimatable<number>;
10
+ pan?: AepAnimatable<number>;
11
+ muted?: boolean;
12
+ visible?: boolean;
13
+ transformation: {
14
+ x: number;
15
+ y: number;
16
+ width: number;
17
+ height: number;
18
+ anchor: number | {
19
+ x: number;
20
+ y: number;
21
+ };
22
+ rotation?: number;
23
+ alpha?: number;
24
+ scale?: number | [number, number];
25
+ };
26
+ onContainerRefReady?: (uniqueId: string, ref: React.MutableRefObject<unknown>) => void;
27
+ }
28
+ export declare const AepAudioLayer: React.FC<AepAudioLayerProps>;
@@ -0,0 +1,16 @@
1
+ import { AepCompositionJson, AepThemeMap } from '../../types/aep';
2
+ import { AepTextOverrideMap } from './AepTextOverrideContext';
3
+ import { AepAssetOverrideMap } from './AepLayerProvider';
4
+ import { AepAssetResolver } from './AepAssetResolver';
5
+ import * as React from "react";
6
+ export interface AepCompositionProps {
7
+ src: string | unknown;
8
+ assetMap?: AepAssetOverrideMap;
9
+ assetResolver?: AepAssetResolver;
10
+ currentFrame?: number;
11
+ onReady?: (comp: AepCompositionJson) => void;
12
+ onError?: (err: unknown) => void;
13
+ theme?: AepThemeMap;
14
+ textOverrides?: AepTextOverrideMap;
15
+ }
16
+ export declare const AepComposition: React.FC<AepCompositionProps>;
@@ -0,0 +1,30 @@
1
+ import { AepAsset, AepAssetMap, AepCompositionJson, AepLayer } from '../../types/aep';
2
+ import * as React from "react";
3
+ export type AepAssetOverride = AepAsset | {
4
+ src: string;
5
+ };
6
+ export type AepAssetOverrideMap = Record<string, AepAssetOverride>;
7
+ export interface AepLayerContextValue {
8
+ fps: number;
9
+ durationInFrames: number;
10
+ width: number;
11
+ height: number;
12
+ assets: AepAssetMap;
13
+ layersById: ReadonlyMap<string, AepLayer>;
14
+ precomps: Record<string, AepCompositionJson>;
15
+ framesToSeconds: (frames: number) => number;
16
+ currentFrame: number;
17
+ }
18
+ export declare const AepLayerProvider: React.FC<{
19
+ value: AepLayerContextValue;
20
+ children: React.ReactNode;
21
+ }>;
22
+ export declare function useAepLayerContext(): AepLayerContextValue;
23
+ export declare function useAepLayerContextOptional(): AepLayerContextValue | null;
24
+ export declare const AepRecursionDepthProvider: React.FC<{
25
+ depth: number;
26
+ children: React.ReactNode;
27
+ }>;
28
+ export declare function useAepRecursionDepth(): number;
29
+ export declare const AEP_MAX_PRECOMP_DEPTH = 8;
30
+ export declare function mergeAssetMaps(base: AepAssetMap, overrides?: AepAssetOverrideMap): AepAssetMap;
@@ -0,0 +1,5 @@
1
+ import { AepLayer } from '../../types/aep';
2
+ import * as React from "react";
3
+ export declare const AepLayerRouter: React.FC<{
4
+ layer: AepLayer;
5
+ }>;
@@ -0,0 +1,17 @@
1
+ import { AepLayer } from '../../types/aep';
2
+ import { MsdfAtlas } from '../../utils/msdf';
3
+ import * as React from "react";
4
+ type AepTextLayer = Extract<AepLayer, {
5
+ kind: "text";
6
+ }>;
7
+ export interface AepMsdfTextMeshProps {
8
+ layer: AepTextLayer;
9
+ atlas: MsdfAtlas;
10
+ currentFrame: number;
11
+ position: [number, number, number];
12
+ rotation: [number, number, number];
13
+ scale: [number, number, number];
14
+ opacity: number;
15
+ }
16
+ export declare const AepMsdfTextMesh: React.FC<AepMsdfTextMeshProps>;
17
+ export {};
@@ -0,0 +1,23 @@
1
+ import * as React from "react";
2
+ import * as THREE from "three";
3
+ import type * as PIXI from "pixi.js";
4
+ interface PrecompTextureEntry {
5
+ canvas: HTMLCanvasElement | null;
6
+ texture: THREE.Texture | null;
7
+ width: number;
8
+ height: number;
9
+ rev: number;
10
+ }
11
+ interface PrecompRenderStore {
12
+ entries: Map<string, PrecompTextureEntry>;
13
+ subscribers: Set<() => void>;
14
+ }
15
+ export declare const AepPrecompRenderProvider: React.FC<{
16
+ children: React.ReactNode;
17
+ }>;
18
+ export declare function useAepPrecompStore(): PrecompRenderStore | null;
19
+ export declare function registerPrecompTexture(store: PrecompRenderStore | null, layerId: string, width: number, height: number): PrecompTextureEntry | null;
20
+ export declare function unregisterPrecompTexture(store: PrecompRenderStore | null, layerId: string): void;
21
+ export declare function writePrecompFrame(store: PrecompRenderStore | null, layerId: string, app: PIXI.Application, rt: PIXI.RenderTexture): void;
22
+ export declare function usePrecompTexture(layerId: string): PrecompTextureEntry | null;
23
+ export {};