reacthub-pixitweenjs 0.2.109-alpha.5 → 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 (222) hide show
  1. package/LICENSE +8 -16
  2. package/LICENSE.md +79 -239
  3. package/README.md +247 -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 +9 -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 +14 -10
  42. package/dist/components/PixiImageSprite/PixiImageSprite.d.ts +14 -1
  43. package/dist/components/PixiLottieSprite/PixiLottieSprite.d.ts +8 -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 +14 -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 +20 -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 +38 -0
  69. package/dist/components/PixiUnifiedTransformer/index.d.ts +1 -0
  70. package/dist/components/PixiVideoSprite/PixiVideoCanvasSync.d.ts +3 -1
  71. package/dist/components/PixiVideoSprite/PixiVideoSprite.d.ts +8 -2
  72. package/dist/components/index.d.ts +6 -0
  73. package/dist/events/Events.d.ts +0 -1
  74. package/dist/hocs/AbstractContainer.d.ts +19 -1
  75. package/dist/hocs/BorderMaskContainer.d.ts +28 -0
  76. package/dist/hocs/OverlayTilingSprite.d.ts +3 -3
  77. package/dist/hocs/drawMaskShape.d.ts +3 -0
  78. package/dist/hocs/index.d.ts +5 -0
  79. package/dist/hooks/aep/buildAudioLevelTimeline.d.ts +7 -0
  80. package/dist/hooks/aep/buildBezierPathTimeline.d.ts +13 -0
  81. package/dist/hooks/aep/buildColorValueTimeline.d.ts +24 -0
  82. package/dist/hooks/aep/buildLayerTimeline.d.ts +20 -0
  83. package/dist/hooks/aep/buildScalarValueTimeline.d.ts +6 -0
  84. package/dist/hooks/aep/buildVec2ValueTimeline.d.ts +17 -0
  85. package/dist/hooks/aep/easeCache.d.ts +3 -0
  86. package/dist/hooks/aep/effectRegistry.d.ts +5 -0
  87. package/dist/hooks/aep/effects/brightnessContrast.d.ts +2 -0
  88. package/dist/hooks/aep/effects/dropShadow.d.ts +2 -0
  89. package/dist/hooks/aep/effects/fastBoxBlur.d.ts +2 -0
  90. package/dist/hooks/aep/effects/gaussianBlur.d.ts +2 -0
  91. package/dist/hooks/aep/effects/glow.d.ts +2 -0
  92. package/dist/hooks/aep/effects/hueSaturation.d.ts +2 -0
  93. package/dist/hooks/aep/effects/index.d.ts +9 -0
  94. package/dist/hooks/aep/effects/levels.d.ts +2 -0
  95. package/dist/hooks/aep/effects/tint.d.ts +2 -0
  96. package/dist/hooks/aep/effects/types.d.ts +8 -0
  97. package/dist/hooks/aep/index.d.ts +22 -0
  98. package/dist/hooks/aep/interpolateBezierPath.d.ts +3 -0
  99. package/dist/hooks/aep/sampleAnimatable.d.ts +13 -0
  100. package/dist/hooks/aep/useAepBezierPathAnimator.d.ts +12 -0
  101. package/dist/hooks/aep/useAepColorAnimator.d.ts +11 -0
  102. package/dist/hooks/aep/useAepCurrentFrame.d.ts +1 -0
  103. package/dist/hooks/aep/useAepEffectKeyframes.d.ts +4 -0
  104. package/dist/hooks/aep/useAepEffects.d.ts +3 -0
  105. package/dist/hooks/aep/useAepKeyframes.d.ts +15 -0
  106. package/dist/hooks/aep/useAepTextLayout.d.ts +12 -0
  107. package/dist/hooks/aep/useAepValueAnimator.d.ts +2 -0
  108. package/dist/hooks/aep/useAepVec2Animator.d.ts +10 -0
  109. package/dist/hooks/aep/useTypefaceMetrics.d.ts +2 -0
  110. package/dist/hooks/index.d.ts +2 -0
  111. package/dist/hooks/useSpriteFilters.d.ts +39 -0
  112. package/dist/hooks/withFiltersHook.d.ts +1 -1
  113. package/dist/importers/aep/bodymovin-color-controls.d.ts +23 -0
  114. package/dist/importers/aep/bodymovin-color.d.ts +1 -0
  115. package/dist/importers/aep/bodymovin-keyframe.d.ts +42 -0
  116. package/dist/importers/aep/bodymovin-layer.d.ts +84 -0
  117. package/dist/importers/aep/bodymovin-transform.d.ts +12 -0
  118. package/dist/importers/aep/bodymovin.d.ts +7 -0
  119. package/dist/importers/aep/bodymovinCameras.d.ts +34 -0
  120. package/dist/importers/aep/bodymovinExtensions.d.ts +3 -0
  121. package/dist/importers/aep/bodymovinTextRuns.d.ts +13 -0
  122. package/dist/importers/aep/index.d.ts +7 -0
  123. package/dist/importers/aep/lottieLint.d.ts +23 -0
  124. package/dist/importers/aep/lottieLint.rules.d.ts +6 -0
  125. package/dist/index.d.ts +3 -0
  126. package/dist/index.es.js +59996 -31176
  127. package/dist/index.umd.js +4351 -1851
  128. package/dist/lib/pixi-essentials/bounds/AxisAlignedBounds.d.ts +121 -0
  129. package/dist/lib/pixi-essentials/bounds/OrientedBounds.d.ts +103 -0
  130. package/dist/lib/pixi-essentials/bounds/index.d.ts +2 -0
  131. package/dist/lib/pixi-essentials/index.d.ts +6 -0
  132. package/dist/lib/pixi-essentials/object-pool/AverageProvider.d.ts +28 -0
  133. package/dist/lib/pixi-essentials/object-pool/ObjectPool.d.ts +103 -0
  134. package/dist/lib/pixi-essentials/object-pool/ObjectPoolFactory.d.ts +40 -0
  135. package/dist/lib/pixi-essentials/object-pool/index.d.ts +2 -0
  136. package/dist/lib/pixi-essentials/react-bindings/Transformer.d.ts +74 -0
  137. package/dist/lib/pixi-essentials/react-bindings/index.d.ts +3 -0
  138. package/dist/lib/pixi-essentials/react-bindings/utils/applyEventProps.d.ts +13 -0
  139. package/dist/lib/pixi-essentials/transformer/Transformer.d.ts +728 -0
  140. package/dist/lib/pixi-essentials/transformer/TransformerHandle.d.ts +142 -0
  141. package/dist/lib/pixi-essentials/transformer/TransformerWireframe.d.ts +54 -0
  142. package/dist/lib/pixi-essentials/transformer/index.d.ts +5 -0
  143. package/dist/lib/pixi-essentials/transformer/utils/decomposeTransform.d.ts +11 -0
  144. package/dist/lib/pixi-essentials/transformer/utils/distanceToLine.d.ts +7 -0
  145. package/dist/lib/pixi-essentials/transformer/utils/multiplyTransform.d.ts +17 -0
  146. package/dist/lib/pixi-essentials/transformer/utils/skewTransform.d.ts +13 -0
  147. package/dist/types/BaseProps.d.ts +11 -3
  148. package/dist/types/MaskTypes.d.ts +10 -0
  149. package/dist/types/OverlayTypes.d.ts +9 -0
  150. package/dist/types/aep/asset.d.ts +43 -0
  151. package/dist/types/aep/camera.d.ts +778 -0
  152. package/dist/types/aep/composition.d.ts +82 -0
  153. package/dist/types/aep/effect.d.ts +137 -0
  154. package/dist/types/aep/index.d.ts +14 -0
  155. package/dist/types/aep/layer.d.ts +21579 -0
  156. package/dist/types/aep/light.d.ts +781 -0
  157. package/dist/types/aep/mask.d.ts +193 -0
  158. package/dist/types/aep/parse.d.ts +11 -0
  159. package/dist/types/aep/postFx.d.ts +107 -0
  160. package/dist/types/aep/text-animator.d.ts +687 -0
  161. package/dist/types/aep/text-runs.d.ts +234 -0
  162. package/dist/types/aep/theme.d.ts +72 -0
  163. package/dist/types/aep/transform.d.ts +285 -0
  164. package/dist/types/aep/transform3D.d.ts +171 -0
  165. package/dist/types/index.d.ts +3 -0
  166. package/dist/utils/AppStateProvider.d.ts +1 -0
  167. package/dist/utils/AppWrapper.d.ts +3 -0
  168. package/dist/utils/ContextBridge.d.ts +1 -1
  169. package/dist/utils/GsapAnims.d.ts +0 -1
  170. package/dist/utils/InteractionManager.d.ts +1 -10
  171. package/dist/utils/aeMath/zoomToFov.d.ts +1 -0
  172. package/dist/utils/areSpritePropsEqual.d.ts +8 -0
  173. package/dist/utils/index.d.ts +6 -0
  174. package/dist/utils/isExternalUrl.d.ts +1 -0
  175. package/dist/utils/loadSpriteTexture.d.ts +10 -0
  176. package/dist/utils/msdf/computeInstanceMatrix.d.ts +18 -0
  177. package/dist/utils/msdf/index.d.ts +4 -0
  178. package/dist/utils/msdf/loadMsdfAtlas.d.ts +9 -0
  179. package/dist/utils/msdf/msdfShader.d.ts +2 -0
  180. package/dist/utils/msdf/types.d.ts +49 -0
  181. package/dist/utils/text/resolveTextRuns.d.ts +8 -0
  182. package/dist/utils/textLayout/alignLines.d.ts +15 -0
  183. package/dist/utils/textLayout/applyVerticals.d.ts +14 -0
  184. package/dist/utils/textLayout/breakLines.d.ts +14 -0
  185. package/dist/utils/textLayout/canvasMetricsProvider.d.ts +6 -0
  186. package/dist/utils/textLayout/index.d.ts +7 -0
  187. package/dist/utils/textLayout/layoutText.d.ts +2 -0
  188. package/dist/utils/textLayout/metricsCache.d.ts +9 -0
  189. package/dist/utils/textLayout/pixiCanvasMetricsProvider.d.ts +6 -0
  190. package/dist/utils/textLayout/shapeRuns.d.ts +18 -0
  191. package/dist/utils/textLayout/typefaceMetricsProvider.d.ts +19 -0
  192. package/dist/utils/textLayout/types.d.ts +61 -0
  193. package/dist/utils/textLayout/unicode.d.ts +2 -0
  194. package/package.json +77 -45
  195. package/dist/components/PixiAudioSprite/PixiAudioSprite.stories.d.ts +0 -105
  196. package/dist/components/PixiGifSprite/PixiGifSprite.stories.d.ts +0 -153
  197. package/dist/components/PixiImageSprite/PixiImageSprite.stories.d.ts +0 -136
  198. package/dist/components/PixiLottieSprite/PixiLottieSprite.stories.d.ts +0 -149
  199. package/dist/components/PixiSVGSprite/PixiSvgPathSprite.stories.d.ts +0 -121
  200. package/dist/components/PixiSequence/PixiSequence.stories.d.ts +0 -33
  201. package/dist/components/PixiTextSprite/PixiTextSprite.stories.d.ts +0 -130
  202. package/dist/components/PixiTransformer/MenuIcons.d.ts +0 -40
  203. package/dist/components/PixiTransformer/MenuUtils.d.ts +0 -2
  204. package/dist/components/PixiTransformer/PixiColorPicker.d.ts +0 -14
  205. package/dist/components/PixiTransformer/PixiDropdownMenu.d.ts +0 -15
  206. package/dist/components/PixiTransformer/PixiMenuText.d.ts +0 -2
  207. package/dist/components/PixiTransformer/PixiTransformer.d.ts +0 -20
  208. package/dist/components/PixiTransformer/PixiTransformerMenu.d.ts +0 -9
  209. package/dist/components/PixiTransformer/Transformer.d.ts +0 -39
  210. package/dist/components/PixiTransformer/applyEventProps.d.ts +0 -10
  211. package/dist/components/PixiTransformer/index.d.ts +0 -1
  212. package/dist/components/PixiVideoSprite/PixiVideoSprite.stories.d.ts +0 -136
  213. package/dist/hooks/withEffectsHook.d.ts +0 -5
  214. package/dist/stories/Features/TestHowlerAudioFiles.d.ts +0 -2
  215. package/dist/stories/Features/TimelineAnimations.d.ts +0 -15
  216. package/dist/stories/Features/TimelineTest.d.ts +0 -15
  217. package/dist/stories/Features/TimelineTest.stories.d.ts +0 -22
  218. package/dist/stories/Features/TimelineTestAudios.d.ts +0 -15
  219. package/dist/stories/Features/TimelineTestWithVideos.d.ts +0 -15
  220. package/dist/stories/Features/TimelineWithGif.d.ts +0 -21
  221. package/dist/stories/Features/common.tests.d.ts +0 -411
  222. /package/dist/{.gitkeep → utils/pixiExtend.d.ts} +0 -0
package/README.md CHANGED
@@ -1,9 +1,22 @@
1
1
  <div align="center">
2
2
 
3
+ <picture>
4
+ <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/khanzzirfan/reacthub-pixitweenjs/main/src/assets/svg/pixitweenjs-logo-dark.svg">
5
+ <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/khanzzirfan/reacthub-pixitweenjs/main/src/assets/svg/pixitweenjs-logo.svg">
6
+ <img src="https://raw.githubusercontent.com/khanzzirfan/reacthub-pixitweenjs/main/src/assets/svg/pixitweenjs-logo.svg" alt="PixiTweenJS Logo" width="500">
7
+ </picture>
8
+
3
9
  # ✨ Reacthub PixiTweenJS ✨
4
10
 
5
11
  **A powerful library for creating stunning animated, time-controlled canvas elements in React using PixiJS, GSAP, and more**
6
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
+
7
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)
8
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)
9
22
  [![license](https://img.shields.io/npm/l/reacthub-pixitweenjs.svg?style=for-the-badge)](LICENSE.md)
@@ -29,7 +42,7 @@
29
42
  ╚═══════════════════════════════════════════════════════════════════════════════╝
30
43
  </pre>
31
44
 
32
- **[📖 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)**
33
46
 
34
47
  </div>
35
48
 
@@ -62,75 +75,103 @@
62
75
 
63
76
  ### Installation
64
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
+
65
81
  ```bash
66
- npm install reacthub-pixitweenjs
82
+ yarn add reacthub-pixitweenjs@alpha
83
+ # or
84
+ npm install reacthub-pixitweenjs@alpha
67
85
  ```
68
86
 
69
- or
87
+ ### Required Peer Dependencies
70
88
 
71
89
  ```bash
72
- 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
73
101
  ```
74
102
 
75
- ### Required Dependencies
103
+ GIF support: native `pixi.js/gif` subpath — no separate package. SVG:
104
+ native `Graphics.svg()` — `pixi-svg` no longer needed.
76
105
 
77
- Make sure to install these peer dependencies:
106
+ ### Register Pixi intrinsics
78
107
 
79
- ```bash
80
- npm install \
81
- @pixi/gif@^2.1.0 \
82
- @pixi/react@~7.1.0 \
83
- @pixi/sound@^5.2.1 \
84
- pixi-filters@^5.2.1 \
85
- pixi-svg@^3.2.0 \
86
- pixi.js@^7.2.3 \
87
- gsap@3.11.5 \
88
- howler@^2.2.3 \
89
- lottie-web@^5.10.2 \
90
- react-custom-events@^1.1.1 \
91
- react@^18.2.0 \
92
- 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 });
93
122
  ```
94
123
 
95
124
  ### Basic Example
96
125
 
97
126
  ```tsx
98
127
  import React from "react";
99
- import { GsapPixieContextProvider } from "reacthub-pixitweenjs";
100
- import { PixiStage } from "reacthub-pixitweenjs";
101
- import { PixiSequence } from "reacthub-pixitweenjs";
102
- 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";
103
136
 
104
137
  function MyAnimatedScene() {
105
138
  return (
106
139
  <GsapPixieContextProvider>
107
- <PixiStage
140
+ <Application
108
141
  width={1920}
109
142
  height={1080}
110
- options={{ backgroundColor: 0x2d2e3c }}
143
+ backgroundColor={0x2d2e3c}
144
+ resolution={2}
111
145
  >
112
- <PixiSequence startAt={0} endAt={10}>
113
- <PixiImageSprite
114
- uniqueId="hero-image"
115
- src="https://example.com/image.jpg"
116
- transformation={{
117
- x: 960,
118
- y: 540,
119
- width: 800,
120
- height: 600,
121
- anchor: 0.5,
122
- alpha: 1,
123
- }}
124
- startAt={0}
125
- endAt={10}
126
- />
127
- </PixiSequence>
128
- </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>
129
166
  </GsapPixieContextProvider>
130
167
  );
131
168
  }
132
169
  ```
133
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
+
134
175
  ---
135
176
 
136
177
  ## 🎯 **Core Components**
@@ -178,14 +219,30 @@ Seamlessly integrate video with GSAP timeline synchronization.
178
219
 
179
220
  ### 🎵 **PixiAudioSprite**
180
221
 
181
- 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.
182
226
 
183
227
  ```tsx
184
228
  <PixiAudioSprite
229
+ uniqueId="bg-audio"
185
230
  src="path/to/audio.mp3"
186
231
  startAt={0}
187
232
  endAt={20}
188
- 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
+ }}
189
246
  />
190
247
  ```
191
248
 
@@ -215,15 +272,26 @@ Rich typography with custom fonts, colors, and effects.
215
272
 
216
273
  ### 🎨 **PixiSVGSprite**
217
274
 
218
- 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.
219
277
 
220
278
  ```tsx
221
279
  <PixiSVGSprite
222
- svgPath="M10,10 L100,10 L100,100 Z"
223
- fill={0xff5733}
224
- transformation={{ x: 200, y: 200, width: 100, height: 100, anchor: 0.5 }}
280
+ uniqueId="logo"
281
+ path="M10,10 L100,10 L100,100 Z"
225
282
  startAt={0}
226
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
+ }}
227
295
  />
228
296
  ```
229
297
 
@@ -259,16 +327,30 @@ Time-based composition and sequencing.
259
327
  </PixiSequence>
260
328
  ```
261
329
 
262
- ### 🎛️ **PixiTransformer**
330
+ ### 🎛️ **PixiUnifiedTransformer**
263
331
 
264
- 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).
265
335
 
266
336
  ```tsx
267
- <PixiTransformer
268
- pixiTransformerRef={transformerRef}
269
- imageRef={imageRef}
270
- transformCommit={handleTransform}
271
- 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)}
272
354
  />
273
355
  ```
274
356
 
@@ -302,50 +384,120 @@ Create complex animations with precise timing:
302
384
 
303
385
  ### 🎨 Color Correction & Effects
304
386
 
305
- 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.
306
390
 
307
391
  ```tsx
308
392
  transformation={{
309
393
  colorCorrection: {
310
- temperature: 6500, // White balance
311
- contrast: 1.2, // Contrast adjustment
312
- saturation: 1.5, // Color saturation
313
- exposure: 0, // Brightness exposure
314
- hue: 0, // Hue shift
315
- blurRadius: 0, // Gaussian blur
316
- sharpness: 1, // Edge sharpness
317
- 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,
318
404
  },
319
- effect: {
320
- // Add particle effects, glows, etc.
321
- }
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
322
420
  }}
323
421
  ```
324
422
 
325
423
  ### 🔄 GSAP Animation Integration
326
424
 
327
- 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:
328
428
 
329
429
  ```tsx
330
- const { tl } = useContext(GsapPixieContext);
331
-
332
- // Access the master timeline
333
- tl.to(spriteRef, {
334
- x: 1000,
335
- y: 500,
336
- rotation: 360,
337
- duration: 5,
338
- });
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
+ }
339
471
  ```
340
472
 
341
473
  ---
342
474
 
343
475
  ## 📚 **Documentation & Resources**
344
476
 
345
- - **[📖 Complete Documentation](https://pixitweenjs.xyz/)** - Interactive Storybook docs
346
- - **[🎮 Live Playground](https://pixitweenjs.xyz/)** - Try it online
347
- - **[💡 Installation Guide](https://pixitweenjs.xyz/?path=/docs/getting-started-installation--docs)**
348
- - **[🎬 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.
349
501
 
350
502
  ---
351
503
 
@@ -357,31 +509,23 @@ We welcome contributions! Please read our [Contributing Guide](Contribution.md)
357
509
 
358
510
  ## 📄 **License**
359
511
 
360
- This library is licensed under the **Apache License 2.0** with additional terms. See [LICENSE.md](LICENSE.md) for complete terms.
361
-
362
- > **📋 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.
363
-
364
- ### What You Can Do
365
-
366
- ✅ **Permitted:**
367
-
368
- - ✅ Commercial use in any project
369
- - ✅ Modify and adapt the code
370
- - ✅ Distribute and sublicense
371
- - ✅ Private and internal use
372
- - ✅ Patent grant included
373
- - ✅ Place warranty
512
+ PixiTweenJS is **source-available software** under the
513
+ **[PixiTweenJS License](LICENSE.md)** (not an OSI-approved open-source
514
+ license).
374
515
 
375
- ❌ **Additional Restrictions:**
516
+ It is **free** for:
376
517
 
377
- - ❌ Must include copyright notice
378
- - ❌ Cannot remove attribution
379
- - ❌ Must include license file
380
- - ❌ Commercial deployments should notify author
518
+ - individuals and freelancers,
519
+ - non-profits / not-for-profits,
520
+ - organizations with annual revenue or turnover **under €1M**.
381
521
 
382
- ### Commercial Use
522
+ Organizations with annual revenue or turnover **€1M or more** must purchase a
523
+ **Company License** for commercial use.
383
524
 
384
- 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**.
385
529
 
386
530
  ---
387
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 {};