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.
- package/LICENSE +8 -16
- package/LICENSE.md +79 -239
- package/README.md +247 -103
- package/dist/components/AepComposition/Aep3DPostFx.d.ts +7 -0
- package/dist/components/AepComposition/Aep3DPrecompPlane.d.ts +9 -0
- package/dist/components/AepComposition/Aep3DScene.d.ts +14 -0
- package/dist/components/AepComposition/Aep3DShapeMesh.d.ts +13 -0
- package/dist/components/AepComposition/Aep3DTextMesh.d.ts +17 -0
- package/dist/components/AepComposition/AepAssetResolver.d.ts +13 -0
- package/dist/components/AepComposition/AepAudioLayer.d.ts +28 -0
- package/dist/components/AepComposition/AepComposition.d.ts +16 -0
- package/dist/components/AepComposition/AepLayerProvider.d.ts +30 -0
- package/dist/components/AepComposition/AepLayerRouter.d.ts +5 -0
- package/dist/components/AepComposition/AepMsdfTextMesh.d.ts +17 -0
- package/dist/components/AepComposition/AepPrecompRenderContext.d.ts +23 -0
- package/dist/components/AepComposition/AepPrecompRenderer.d.ts +8 -0
- package/dist/components/AepComposition/AepTextOverrideContext.d.ts +8 -0
- package/dist/components/AepComposition/AepThemeContext.d.ts +8 -0
- package/dist/components/AepComposition/composeTransform3D.d.ts +27 -0
- package/dist/components/AepComposition/index.d.ts +39 -0
- package/dist/components/AepComposition/matteSourceIds.d.ts +2 -0
- package/dist/components/AepComposition/msdfAtlasRegistry.d.ts +16 -0
- package/dist/components/AepComposition/pathToThreeShape.d.ts +4 -0
- package/dist/components/AepComposition/resolveParentChain.d.ts +3 -0
- package/dist/components/AepComposition/resolvePostFxList.d.ts +2 -0
- package/dist/components/AepComposition/shouldSplitText.d.ts +26 -0
- package/dist/components/AepComposition/threeTextureFromPixi.d.ts +8 -0
- package/dist/components/AepComposition/useAepLayerTransform.d.ts +18 -0
- package/dist/components/AepComposition/useAepLayerTransform3D.d.ts +8 -0
- package/dist/components/AepComposition/useMsdfAtlasRegistry.d.ts +6 -0
- package/dist/components/AepComposition/usePixiRenderTexture.d.ts +14 -0
- package/dist/components/AepComposition/useResolveAsset.d.ts +8 -0
- package/dist/components/AepMask/AepMaskContainer.d.ts +9 -0
- package/dist/components/AepMask/PixiTrackMatte.d.ts +10 -0
- package/dist/components/AepMask/drawAepMask.d.ts +3 -0
- package/dist/components/AepMask/index.d.ts +5 -0
- package/dist/components/PixiAudioSprite/HowlerAudioSprite.d.ts +5 -7
- package/dist/components/PixiAudioSprite/PixiAudioSprite.d.ts +9 -2
- package/dist/components/PixiAudioSprite/useAudioVisualizer.d.ts +2 -2
- package/dist/components/PixiAudioSprite/wave-config.d.ts +0 -1
- package/dist/components/PixiGifSprite/PixiGifGsapSync.d.ts +14 -10
- package/dist/components/PixiImageSprite/PixiImageSprite.d.ts +14 -1
- package/dist/components/PixiLottieSprite/PixiLottieSprite.d.ts +8 -2
- package/dist/components/PixiNullObject/PixiNullObject.d.ts +25 -0
- package/dist/components/PixiNullObject/index.d.ts +2 -0
- package/dist/components/PixiPreComp/PixiPreComp.d.ts +29 -0
- package/dist/components/PixiPreComp/index.d.ts +3 -0
- package/dist/components/PixiPreComp/validatePrecompDepth.d.ts +2 -0
- package/dist/components/PixiRemotionSprite/PixiRemotionGifSprite.d.ts +24 -0
- package/dist/components/PixiRemotionSprite/PixiRemotionImageSprite.d.ts +18 -0
- package/dist/components/PixiRemotionSprite/PixiRemotionSprite.d.ts +5 -2
- package/dist/components/PixiRemotionSprite/PixiRemotionVideoCanvaSprite.d.ts +20 -0
- package/dist/components/PixiRemotionSprite/index.d.ts +4 -0
- package/dist/components/PixiSVGSprite/PixiMorphSvgSprite.d.ts +35 -0
- package/dist/components/PixiSVGSprite/PixiSvgPathSprite.d.ts +14 -4
- package/dist/components/PixiSVGSprite/index.d.ts +1 -0
- package/dist/components/PixiShapeLayer/PixiShapeLayer.d.ts +43 -0
- package/dist/components/PixiShapeLayer/drawShape.d.ts +20 -0
- package/dist/components/PixiShapeLayer/index.d.ts +4 -0
- package/dist/components/PixiShapeLayer/samplePath.d.ts +5 -0
- package/dist/components/PixiTextSprite/PixiTextSplit.d.ts +26 -0
- package/dist/components/PixiTextSprite/PixiTextSprite.d.ts +20 -5
- package/dist/components/PixiTextSprite/index.d.ts +3 -0
- package/dist/components/PixiTextSprite/resolveTextSplitFills.d.ts +27 -0
- package/dist/components/PixiTextSprite/textAnimator.d.ts +22 -0
- package/dist/components/PixiThreeSprite/PixiThreeSprite.d.ts +14 -0
- package/dist/components/PixiThreeSprite/index.d.ts +2 -0
- package/dist/components/PixiUnifiedTransformer/PixiUnifiedTransformer.d.ts +38 -0
- package/dist/components/PixiUnifiedTransformer/index.d.ts +1 -0
- package/dist/components/PixiVideoSprite/PixiVideoCanvasSync.d.ts +3 -1
- package/dist/components/PixiVideoSprite/PixiVideoSprite.d.ts +8 -2
- package/dist/components/index.d.ts +6 -0
- package/dist/events/Events.d.ts +0 -1
- package/dist/hocs/AbstractContainer.d.ts +19 -1
- package/dist/hocs/BorderMaskContainer.d.ts +28 -0
- package/dist/hocs/OverlayTilingSprite.d.ts +3 -3
- package/dist/hocs/drawMaskShape.d.ts +3 -0
- package/dist/hocs/index.d.ts +5 -0
- package/dist/hooks/aep/buildAudioLevelTimeline.d.ts +7 -0
- package/dist/hooks/aep/buildBezierPathTimeline.d.ts +13 -0
- package/dist/hooks/aep/buildColorValueTimeline.d.ts +24 -0
- package/dist/hooks/aep/buildLayerTimeline.d.ts +20 -0
- package/dist/hooks/aep/buildScalarValueTimeline.d.ts +6 -0
- package/dist/hooks/aep/buildVec2ValueTimeline.d.ts +17 -0
- package/dist/hooks/aep/easeCache.d.ts +3 -0
- package/dist/hooks/aep/effectRegistry.d.ts +5 -0
- package/dist/hooks/aep/effects/brightnessContrast.d.ts +2 -0
- package/dist/hooks/aep/effects/dropShadow.d.ts +2 -0
- package/dist/hooks/aep/effects/fastBoxBlur.d.ts +2 -0
- package/dist/hooks/aep/effects/gaussianBlur.d.ts +2 -0
- package/dist/hooks/aep/effects/glow.d.ts +2 -0
- package/dist/hooks/aep/effects/hueSaturation.d.ts +2 -0
- package/dist/hooks/aep/effects/index.d.ts +9 -0
- package/dist/hooks/aep/effects/levels.d.ts +2 -0
- package/dist/hooks/aep/effects/tint.d.ts +2 -0
- package/dist/hooks/aep/effects/types.d.ts +8 -0
- package/dist/hooks/aep/index.d.ts +22 -0
- package/dist/hooks/aep/interpolateBezierPath.d.ts +3 -0
- package/dist/hooks/aep/sampleAnimatable.d.ts +13 -0
- package/dist/hooks/aep/useAepBezierPathAnimator.d.ts +12 -0
- package/dist/hooks/aep/useAepColorAnimator.d.ts +11 -0
- package/dist/hooks/aep/useAepCurrentFrame.d.ts +1 -0
- package/dist/hooks/aep/useAepEffectKeyframes.d.ts +4 -0
- package/dist/hooks/aep/useAepEffects.d.ts +3 -0
- package/dist/hooks/aep/useAepKeyframes.d.ts +15 -0
- package/dist/hooks/aep/useAepTextLayout.d.ts +12 -0
- package/dist/hooks/aep/useAepValueAnimator.d.ts +2 -0
- package/dist/hooks/aep/useAepVec2Animator.d.ts +10 -0
- package/dist/hooks/aep/useTypefaceMetrics.d.ts +2 -0
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/useSpriteFilters.d.ts +39 -0
- package/dist/hooks/withFiltersHook.d.ts +1 -1
- package/dist/importers/aep/bodymovin-color-controls.d.ts +23 -0
- package/dist/importers/aep/bodymovin-color.d.ts +1 -0
- package/dist/importers/aep/bodymovin-keyframe.d.ts +42 -0
- package/dist/importers/aep/bodymovin-layer.d.ts +84 -0
- package/dist/importers/aep/bodymovin-transform.d.ts +12 -0
- package/dist/importers/aep/bodymovin.d.ts +7 -0
- package/dist/importers/aep/bodymovinCameras.d.ts +34 -0
- package/dist/importers/aep/bodymovinExtensions.d.ts +3 -0
- package/dist/importers/aep/bodymovinTextRuns.d.ts +13 -0
- package/dist/importers/aep/index.d.ts +7 -0
- package/dist/importers/aep/lottieLint.d.ts +23 -0
- package/dist/importers/aep/lottieLint.rules.d.ts +6 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.es.js +59996 -31176
- package/dist/index.umd.js +4351 -1851
- package/dist/lib/pixi-essentials/bounds/AxisAlignedBounds.d.ts +121 -0
- package/dist/lib/pixi-essentials/bounds/OrientedBounds.d.ts +103 -0
- package/dist/lib/pixi-essentials/bounds/index.d.ts +2 -0
- package/dist/lib/pixi-essentials/index.d.ts +6 -0
- package/dist/lib/pixi-essentials/object-pool/AverageProvider.d.ts +28 -0
- package/dist/lib/pixi-essentials/object-pool/ObjectPool.d.ts +103 -0
- package/dist/lib/pixi-essentials/object-pool/ObjectPoolFactory.d.ts +40 -0
- package/dist/lib/pixi-essentials/object-pool/index.d.ts +2 -0
- package/dist/lib/pixi-essentials/react-bindings/Transformer.d.ts +74 -0
- package/dist/lib/pixi-essentials/react-bindings/index.d.ts +3 -0
- package/dist/lib/pixi-essentials/react-bindings/utils/applyEventProps.d.ts +13 -0
- package/dist/lib/pixi-essentials/transformer/Transformer.d.ts +728 -0
- package/dist/lib/pixi-essentials/transformer/TransformerHandle.d.ts +142 -0
- package/dist/lib/pixi-essentials/transformer/TransformerWireframe.d.ts +54 -0
- package/dist/lib/pixi-essentials/transformer/index.d.ts +5 -0
- package/dist/lib/pixi-essentials/transformer/utils/decomposeTransform.d.ts +11 -0
- package/dist/lib/pixi-essentials/transformer/utils/distanceToLine.d.ts +7 -0
- package/dist/lib/pixi-essentials/transformer/utils/multiplyTransform.d.ts +17 -0
- package/dist/lib/pixi-essentials/transformer/utils/skewTransform.d.ts +13 -0
- package/dist/types/BaseProps.d.ts +11 -3
- package/dist/types/MaskTypes.d.ts +10 -0
- package/dist/types/OverlayTypes.d.ts +9 -0
- package/dist/types/aep/asset.d.ts +43 -0
- package/dist/types/aep/camera.d.ts +778 -0
- package/dist/types/aep/composition.d.ts +82 -0
- package/dist/types/aep/effect.d.ts +137 -0
- package/dist/types/aep/index.d.ts +14 -0
- package/dist/types/aep/layer.d.ts +21579 -0
- package/dist/types/aep/light.d.ts +781 -0
- package/dist/types/aep/mask.d.ts +193 -0
- package/dist/types/aep/parse.d.ts +11 -0
- package/dist/types/aep/postFx.d.ts +107 -0
- package/dist/types/aep/text-animator.d.ts +687 -0
- package/dist/types/aep/text-runs.d.ts +234 -0
- package/dist/types/aep/theme.d.ts +72 -0
- package/dist/types/aep/transform.d.ts +285 -0
- package/dist/types/aep/transform3D.d.ts +171 -0
- package/dist/types/index.d.ts +3 -0
- package/dist/utils/AppStateProvider.d.ts +1 -0
- package/dist/utils/AppWrapper.d.ts +3 -0
- package/dist/utils/ContextBridge.d.ts +1 -1
- package/dist/utils/GsapAnims.d.ts +0 -1
- package/dist/utils/InteractionManager.d.ts +1 -10
- package/dist/utils/aeMath/zoomToFov.d.ts +1 -0
- package/dist/utils/areSpritePropsEqual.d.ts +8 -0
- package/dist/utils/index.d.ts +6 -0
- package/dist/utils/isExternalUrl.d.ts +1 -0
- package/dist/utils/loadSpriteTexture.d.ts +10 -0
- package/dist/utils/msdf/computeInstanceMatrix.d.ts +18 -0
- package/dist/utils/msdf/index.d.ts +4 -0
- package/dist/utils/msdf/loadMsdfAtlas.d.ts +9 -0
- package/dist/utils/msdf/msdfShader.d.ts +2 -0
- package/dist/utils/msdf/types.d.ts +49 -0
- package/dist/utils/text/resolveTextRuns.d.ts +8 -0
- package/dist/utils/textLayout/alignLines.d.ts +15 -0
- package/dist/utils/textLayout/applyVerticals.d.ts +14 -0
- package/dist/utils/textLayout/breakLines.d.ts +14 -0
- package/dist/utils/textLayout/canvasMetricsProvider.d.ts +6 -0
- package/dist/utils/textLayout/index.d.ts +7 -0
- package/dist/utils/textLayout/layoutText.d.ts +2 -0
- package/dist/utils/textLayout/metricsCache.d.ts +9 -0
- package/dist/utils/textLayout/pixiCanvasMetricsProvider.d.ts +6 -0
- package/dist/utils/textLayout/shapeRuns.d.ts +18 -0
- package/dist/utils/textLayout/typefaceMetricsProvider.d.ts +19 -0
- package/dist/utils/textLayout/types.d.ts +61 -0
- package/dist/utils/textLayout/unicode.d.ts +2 -0
- package/package.json +77 -45
- package/dist/components/PixiAudioSprite/PixiAudioSprite.stories.d.ts +0 -105
- package/dist/components/PixiGifSprite/PixiGifSprite.stories.d.ts +0 -153
- package/dist/components/PixiImageSprite/PixiImageSprite.stories.d.ts +0 -136
- package/dist/components/PixiLottieSprite/PixiLottieSprite.stories.d.ts +0 -149
- package/dist/components/PixiSVGSprite/PixiSvgPathSprite.stories.d.ts +0 -121
- package/dist/components/PixiSequence/PixiSequence.stories.d.ts +0 -33
- package/dist/components/PixiTextSprite/PixiTextSprite.stories.d.ts +0 -130
- package/dist/components/PixiTransformer/MenuIcons.d.ts +0 -40
- package/dist/components/PixiTransformer/MenuUtils.d.ts +0 -2
- package/dist/components/PixiTransformer/PixiColorPicker.d.ts +0 -14
- package/dist/components/PixiTransformer/PixiDropdownMenu.d.ts +0 -15
- package/dist/components/PixiTransformer/PixiMenuText.d.ts +0 -2
- package/dist/components/PixiTransformer/PixiTransformer.d.ts +0 -20
- package/dist/components/PixiTransformer/PixiTransformerMenu.d.ts +0 -9
- package/dist/components/PixiTransformer/Transformer.d.ts +0 -39
- package/dist/components/PixiTransformer/applyEventProps.d.ts +0 -10
- package/dist/components/PixiTransformer/index.d.ts +0 -1
- package/dist/components/PixiVideoSprite/PixiVideoSprite.stories.d.ts +0 -136
- package/dist/hooks/withEffectsHook.d.ts +0 -5
- package/dist/stories/Features/TestHowlerAudioFiles.d.ts +0 -2
- package/dist/stories/Features/TimelineAnimations.d.ts +0 -15
- package/dist/stories/Features/TimelineTest.d.ts +0 -15
- package/dist/stories/Features/TimelineTest.stories.d.ts +0 -22
- package/dist/stories/Features/TimelineTestAudios.d.ts +0 -15
- package/dist/stories/Features/TimelineTestWithVideos.d.ts +0 -15
- package/dist/stories/Features/TimelineWithGif.d.ts +0 -21
- package/dist/stories/Features/common.tests.d.ts +0 -411
- /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
|
[](https://www.npmjs.com/package/reacthub-pixitweenjs)
|
|
8
21
|
[](https://www.npmjs.com/package/reacthub-pixitweenjs)
|
|
9
22
|
[](LICENSE.md)
|
|
@@ -29,7 +42,7 @@
|
|
|
29
42
|
╚═══════════════════════════════════════════════════════════════════════════════╝
|
|
30
43
|
</pre>
|
|
31
44
|
|
|
32
|
-
**[📖 Documentation](https://pixitweenjs.xyz/)** • **[🎮
|
|
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
|
-
|
|
82
|
+
yarn add reacthub-pixitweenjs@alpha
|
|
83
|
+
# or
|
|
84
|
+
npm install reacthub-pixitweenjs@alpha
|
|
67
85
|
```
|
|
68
86
|
|
|
69
|
-
|
|
87
|
+
### Required Peer Dependencies
|
|
70
88
|
|
|
71
89
|
```bash
|
|
72
|
-
yarn add
|
|
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
|
-
|
|
103
|
+
GIF support: native `pixi.js/gif` subpath — no separate package. SVG:
|
|
104
|
+
native `Graphics.svg()` — `pixi-svg` no longer needed.
|
|
76
105
|
|
|
77
|
-
|
|
106
|
+
### Register Pixi intrinsics
|
|
78
107
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
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 {
|
|
100
|
-
import {
|
|
101
|
-
|
|
102
|
-
|
|
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
|
-
<
|
|
140
|
+
<Application
|
|
108
141
|
width={1920}
|
|
109
142
|
height={1080}
|
|
110
|
-
|
|
143
|
+
backgroundColor={0x2d2e3c}
|
|
144
|
+
resolution={2}
|
|
111
145
|
>
|
|
112
|
-
<
|
|
113
|
-
<
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
223
|
-
|
|
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
|
-
### 🎛️ **
|
|
330
|
+
### 🎛️ **PixiUnifiedTransformer**
|
|
263
331
|
|
|
264
|
-
Interactive
|
|
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
|
-
<
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
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
|
-
|
|
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:
|
|
311
|
-
contrast: 1.2,
|
|
312
|
-
saturation: 1.5,
|
|
313
|
-
|
|
314
|
-
hue: 0,
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
vignette: 0 //
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
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/)** -
|
|
346
|
-
- **[🎮
|
|
347
|
-
- **[💡 Installation Guide](https://pixitweenjs.xyz
|
|
348
|
-
- **[
|
|
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
|
-
|
|
361
|
-
|
|
362
|
-
|
|
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
|
-
|
|
516
|
+
It is **free** for:
|
|
376
517
|
|
|
377
|
-
-
|
|
378
|
-
-
|
|
379
|
-
-
|
|
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
|
-
|
|
522
|
+
Organizations with annual revenue or turnover **€1M or more** must purchase a
|
|
523
|
+
**Company License** for commercial use.
|
|
383
524
|
|
|
384
|
-
|
|
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,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,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 {};
|