visualfries 0.1.106 → 0.1.108
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/dist/animations/builders/WordHighlighterAnimationBuilder.js +5 -0
- package/dist/components/hooks/MediaHook.js +1 -1
- package/dist/components/hooks/PixiDisplayObjectHook.js +2 -0
- package/dist/components/hooks/PixiSplitScreenDisplayObjectHook.js +2 -0
- package/dist/components/hooks/PixiVideoTextureHook.js +16 -13
- package/dist/examples/01_basic_text.json +89 -0
- package/dist/examples/02_animated_text.json +110 -0
- package/dist/examples/03_video_background.json +94 -0
- package/dist/examples/04_real_subtitles.json +116 -0
- package/dist/examples/animated-shapes.json +148 -0
- package/dist/examples/gradient-background.json +105 -0
- package/dist/examples/karaoke-subtitles.json +97 -0
- package/package.json +1 -1
|
@@ -110,6 +110,11 @@ export class WordHighlighterAnimationBuilder {
|
|
|
110
110
|
};
|
|
111
111
|
}
|
|
112
112
|
static createBackgroundElement(target) {
|
|
113
|
+
// Clean up any existing highlighter-bg element from previous builds
|
|
114
|
+
const existingBg = target.querySelector('#highlighter-bg');
|
|
115
|
+
if (existingBg) {
|
|
116
|
+
existingBg.remove();
|
|
117
|
+
}
|
|
113
118
|
const bgHighlighter = document.createElement('div');
|
|
114
119
|
bgHighlighter.id = 'highlighter-bg';
|
|
115
120
|
bgHighlighter.style.position = 'absolute';
|
|
@@ -2,7 +2,7 @@ import { MediaManager } from '../../managers/MediaManager.js';
|
|
|
2
2
|
import { z } from 'zod';
|
|
3
3
|
import { StateManager } from '../../managers/StateManager.svelte.js';
|
|
4
4
|
export class MediaHook {
|
|
5
|
-
types = ['setup', 'update', 'destroy'
|
|
5
|
+
types = ['setup', 'update', 'destroy'];
|
|
6
6
|
priority = 1;
|
|
7
7
|
#context;
|
|
8
8
|
#mediaElement;
|
|
@@ -53,6 +53,8 @@ export class PixiDisplayObjectHook {
|
|
|
53
53
|
async #handleUpdate() {
|
|
54
54
|
const isActive = this.#context.isActive;
|
|
55
55
|
if (this.#displayObject) {
|
|
56
|
+
// Always re-assert the resource in case the context was cleared or updated
|
|
57
|
+
this.#context.setResource('pixiRenderObject', this.#displayObject);
|
|
56
58
|
// Only mark dirty if visibility actually changed
|
|
57
59
|
if (this.#displayObject.visible !== isActive) {
|
|
58
60
|
this.#displayObject.visible = isActive;
|
|
@@ -172,6 +172,8 @@ export class PixiSplitScreenDisplayObjectHook {
|
|
|
172
172
|
this.#drawBlurredBackground();
|
|
173
173
|
}
|
|
174
174
|
if (this.#displayObject) {
|
|
175
|
+
// Always re-assert the resource in case the context was cleared or updated
|
|
176
|
+
this.#context.setResource('pixiRenderObject', this.#displayObject);
|
|
175
177
|
if (this.#displayObject.visible != isActive) {
|
|
176
178
|
this.#displayObject.visible = isActive;
|
|
177
179
|
}
|
|
@@ -9,6 +9,7 @@ export class PixiVideoTextureHook {
|
|
|
9
9
|
priority = 1;
|
|
10
10
|
#context;
|
|
11
11
|
#videoTexture;
|
|
12
|
+
#videoElement;
|
|
12
13
|
componentElement;
|
|
13
14
|
#handlers = {
|
|
14
15
|
update: this.#handleUpdate.bind(this),
|
|
@@ -16,27 +17,29 @@ export class PixiVideoTextureHook {
|
|
|
16
17
|
'refresh:content': this.#handleRefreshContent.bind(this)
|
|
17
18
|
};
|
|
18
19
|
async #handleUpdate() {
|
|
19
|
-
if (this.#videoTexture) {
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
20
|
const media = this.#context.getResource('videoElement');
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
// If element changed or texture is missing, recreate it
|
|
22
|
+
if (media && (media !== this.#videoElement || !this.#videoTexture)) {
|
|
23
|
+
await this.#handleDestroy();
|
|
24
|
+
const res = new PIXI.VideoResource(media, {
|
|
25
|
+
autoPlay: false,
|
|
26
|
+
updateFPS: 30
|
|
27
|
+
});
|
|
28
|
+
const baseTexture = new PIXI.BaseTexture(res);
|
|
29
|
+
this.#videoTexture = new PIXI.Texture(baseTexture);
|
|
30
|
+
this.#videoElement = media;
|
|
31
|
+
}
|
|
32
|
+
// Always re-assert the resource in case the context was cleared or updated
|
|
33
|
+
if (this.#videoTexture) {
|
|
34
|
+
this.#context.setResource('pixiTexture', this.#videoTexture);
|
|
26
35
|
}
|
|
27
|
-
const res = new PIXI.VideoResource(media, {
|
|
28
|
-
autoPlay: false,
|
|
29
|
-
updateFPS: 30
|
|
30
|
-
});
|
|
31
|
-
const baseTexture = new PIXI.BaseTexture(res);
|
|
32
|
-
this.#videoTexture = new PIXI.Texture(baseTexture);
|
|
33
|
-
this.#context.setResource('pixiTexture', this.#videoTexture);
|
|
34
36
|
}
|
|
35
37
|
async #handleDestroy() {
|
|
36
38
|
if (this.#videoTexture) {
|
|
37
39
|
// Destroy the texture and its base texture to free GPU memory
|
|
38
40
|
this.#videoTexture.destroy(true);
|
|
39
41
|
this.#videoTexture = undefined;
|
|
42
|
+
this.#videoElement = undefined;
|
|
40
43
|
this.#context.removeResource('pixiTexture');
|
|
41
44
|
}
|
|
42
45
|
}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "01_basic_text",
|
|
3
|
+
"version": "2.0",
|
|
4
|
+
"name": "01. Basic Text",
|
|
5
|
+
"settings": {
|
|
6
|
+
"width": 1080,
|
|
7
|
+
"height": 1920,
|
|
8
|
+
"duration": 5,
|
|
9
|
+
"fps": 30,
|
|
10
|
+
"backgroundColor": "#000000"
|
|
11
|
+
},
|
|
12
|
+
"assets": [],
|
|
13
|
+
"layers": [
|
|
14
|
+
{
|
|
15
|
+
"id": "layer-bg",
|
|
16
|
+
"name": "Background Layer",
|
|
17
|
+
"order": 0,
|
|
18
|
+
"visible": true,
|
|
19
|
+
"muted": false,
|
|
20
|
+
"components": [
|
|
21
|
+
{
|
|
22
|
+
"id": "bg-shape",
|
|
23
|
+
"name": "Black Rectangle",
|
|
24
|
+
"type": "SHAPE",
|
|
25
|
+
"timeline": { "startAt": 0, "endAt": 5 },
|
|
26
|
+
"visible": true,
|
|
27
|
+
"order": 0,
|
|
28
|
+
"shape": { "type": "rectangle" },
|
|
29
|
+
"appearance": {
|
|
30
|
+
"x": 0,
|
|
31
|
+
"y": 0,
|
|
32
|
+
"width": 1080,
|
|
33
|
+
"height": 1920,
|
|
34
|
+
"opacity": 1,
|
|
35
|
+
"rotation": 0,
|
|
36
|
+
"scaleX": 1,
|
|
37
|
+
"scaleY": 1,
|
|
38
|
+
"background": "#000000"
|
|
39
|
+
},
|
|
40
|
+
"animations": { "enabled": true, "list": [] },
|
|
41
|
+
"effects": { "enabled": true, "map": {} }
|
|
42
|
+
}
|
|
43
|
+
]
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"id": "layer-text",
|
|
47
|
+
"name": "Text Layer",
|
|
48
|
+
"order": 1,
|
|
49
|
+
"visible": true,
|
|
50
|
+
"muted": false,
|
|
51
|
+
"components": [
|
|
52
|
+
{
|
|
53
|
+
"id": "center-text",
|
|
54
|
+
"name": "Center Text",
|
|
55
|
+
"type": "TEXT",
|
|
56
|
+
"text": "VISUALFRIES",
|
|
57
|
+
"timeline": { "startAt": 0, "endAt": 5 },
|
|
58
|
+
"visible": true,
|
|
59
|
+
"order": 0,
|
|
60
|
+
"appearance": {
|
|
61
|
+
"x": 0,
|
|
62
|
+
"y": 860,
|
|
63
|
+
"width": 1080,
|
|
64
|
+
"height": 200,
|
|
65
|
+
"opacity": 1,
|
|
66
|
+
"rotation": 0,
|
|
67
|
+
"scaleX": 1,
|
|
68
|
+
"scaleY": 1,
|
|
69
|
+
"horizontalAlign": "center",
|
|
70
|
+
"verticalAlign": "center",
|
|
71
|
+
"text": {
|
|
72
|
+
"fontFamily": "Inter",
|
|
73
|
+
"fontSize": 140,
|
|
74
|
+
"fontWeight": "900",
|
|
75
|
+
"lineHeight": { "value": 1, "unit": "em" },
|
|
76
|
+
"color": "#ffffff",
|
|
77
|
+
"textAlign": "center",
|
|
78
|
+
"textTransform": "uppercase"
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
"animations": { "enabled": true, "list": [] },
|
|
82
|
+
"effects": { "enabled": true, "map": {} }
|
|
83
|
+
}
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
],
|
|
87
|
+
"transitions": [],
|
|
88
|
+
"audioTracks": []
|
|
89
|
+
}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "02_animated_text",
|
|
3
|
+
"version": "2.0",
|
|
4
|
+
"name": "02. Animated Text",
|
|
5
|
+
"settings": {
|
|
6
|
+
"width": 1080,
|
|
7
|
+
"height": 1920,
|
|
8
|
+
"duration": 5,
|
|
9
|
+
"fps": 30,
|
|
10
|
+
"backgroundColor": "#000000"
|
|
11
|
+
},
|
|
12
|
+
"assets": [],
|
|
13
|
+
"layers": [
|
|
14
|
+
{
|
|
15
|
+
"id": "layer-bg",
|
|
16
|
+
"name": "Background Layer",
|
|
17
|
+
"order": 0,
|
|
18
|
+
"visible": true,
|
|
19
|
+
"muted": false,
|
|
20
|
+
"components": [
|
|
21
|
+
{
|
|
22
|
+
"id": "bg-shape",
|
|
23
|
+
"name": "Black Rectangle",
|
|
24
|
+
"type": "SHAPE",
|
|
25
|
+
"timeline": { "startAt": 0, "endAt": 5 },
|
|
26
|
+
"visible": true,
|
|
27
|
+
"order": 0,
|
|
28
|
+
"shape": { "type": "rectangle" },
|
|
29
|
+
"appearance": {
|
|
30
|
+
"x": 0,
|
|
31
|
+
"y": 0,
|
|
32
|
+
"width": 1080,
|
|
33
|
+
"height": 1920,
|
|
34
|
+
"opacity": 1,
|
|
35
|
+
"rotation": 0,
|
|
36
|
+
"scaleX": 1,
|
|
37
|
+
"scaleY": 1,
|
|
38
|
+
"background": "#000000"
|
|
39
|
+
},
|
|
40
|
+
"animations": { "enabled": true, "list": [] },
|
|
41
|
+
"effects": { "enabled": true, "map": {} }
|
|
42
|
+
}
|
|
43
|
+
]
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"id": "layer-text",
|
|
47
|
+
"name": "Text Layer",
|
|
48
|
+
"order": 1,
|
|
49
|
+
"visible": true,
|
|
50
|
+
"muted": false,
|
|
51
|
+
"components": [
|
|
52
|
+
{
|
|
53
|
+
"id": "animated-text",
|
|
54
|
+
"name": "Animated Text",
|
|
55
|
+
"type": "TEXT",
|
|
56
|
+
"text": "ANIMATION",
|
|
57
|
+
"timeline": { "startAt": 0, "endAt": 5 },
|
|
58
|
+
"visible": true,
|
|
59
|
+
"order": 0,
|
|
60
|
+
"appearance": {
|
|
61
|
+
"x": 0,
|
|
62
|
+
"y": 860,
|
|
63
|
+
"width": 1080,
|
|
64
|
+
"height": 200,
|
|
65
|
+
"opacity": 1,
|
|
66
|
+
"rotation": 0,
|
|
67
|
+
"scaleX": 1,
|
|
68
|
+
"scaleY": 1,
|
|
69
|
+
"horizontalAlign": "center",
|
|
70
|
+
"verticalAlign": "center",
|
|
71
|
+
"text": {
|
|
72
|
+
"fontFamily": "Inter",
|
|
73
|
+
"fontSize": 140,
|
|
74
|
+
"fontWeight": "900",
|
|
75
|
+
"lineHeight": { "value": 1, "unit": "em" },
|
|
76
|
+
"color": "#ffffff",
|
|
77
|
+
"textAlign": "center",
|
|
78
|
+
"textTransform": "uppercase"
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
"animations": {
|
|
82
|
+
"enabled": true,
|
|
83
|
+
"list": [
|
|
84
|
+
{
|
|
85
|
+
"id": "intro-anim",
|
|
86
|
+
"name": "Scale & Fade",
|
|
87
|
+
"animation": {
|
|
88
|
+
"id": "intro-reveal",
|
|
89
|
+
"timeline": [
|
|
90
|
+
{
|
|
91
|
+
"tweens": [
|
|
92
|
+
{
|
|
93
|
+
"method": "from",
|
|
94
|
+
"vars": { "duration": 1, "scale": 0, "opacity": 0, "ease": "back.out(1.7)" }
|
|
95
|
+
}
|
|
96
|
+
]
|
|
97
|
+
}
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
]
|
|
102
|
+
},
|
|
103
|
+
"effects": { "enabled": true, "map": {} }
|
|
104
|
+
}
|
|
105
|
+
]
|
|
106
|
+
}
|
|
107
|
+
],
|
|
108
|
+
"transitions": [],
|
|
109
|
+
"audioTracks": []
|
|
110
|
+
}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "03_video_background",
|
|
3
|
+
"version": "2.0",
|
|
4
|
+
"name": "03. Video Background",
|
|
5
|
+
"settings": {
|
|
6
|
+
"width": 1080,
|
|
7
|
+
"height": 1920,
|
|
8
|
+
"duration": 5,
|
|
9
|
+
"fps": 30,
|
|
10
|
+
"backgroundColor": "#000000"
|
|
11
|
+
},
|
|
12
|
+
"assets": [],
|
|
13
|
+
"layers": [
|
|
14
|
+
{
|
|
15
|
+
"id": "layer-video",
|
|
16
|
+
"name": "Video Layer",
|
|
17
|
+
"order": 0,
|
|
18
|
+
"visible": true,
|
|
19
|
+
"muted": true,
|
|
20
|
+
"components": [
|
|
21
|
+
{
|
|
22
|
+
"id": "bunny-video",
|
|
23
|
+
"name": "Background Video",
|
|
24
|
+
"type": "VIDEO",
|
|
25
|
+
"timeline": { "startAt": 0, "endAt": 5 },
|
|
26
|
+
"visible": true,
|
|
27
|
+
"order": 0,
|
|
28
|
+
"source": {
|
|
29
|
+
"url": "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
|
|
30
|
+
"startAt": 0,
|
|
31
|
+
"endAt": 5
|
|
32
|
+
},
|
|
33
|
+
"appearance": {
|
|
34
|
+
"x": 0,
|
|
35
|
+
"y": 0,
|
|
36
|
+
"width": 1080,
|
|
37
|
+
"height": 1920,
|
|
38
|
+
"opacity": 1,
|
|
39
|
+
"rotation": 0,
|
|
40
|
+
"scaleX": 1,
|
|
41
|
+
"scaleY": 1
|
|
42
|
+
},
|
|
43
|
+
"volume": 0,
|
|
44
|
+
"muted": true,
|
|
45
|
+
"animations": { "enabled": true, "list": [] },
|
|
46
|
+
"effects": { "enabled": true, "map": {} }
|
|
47
|
+
}
|
|
48
|
+
]
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"id": "layer-overlay",
|
|
52
|
+
"name": "Overlay Layer",
|
|
53
|
+
"order": 1,
|
|
54
|
+
"visible": true,
|
|
55
|
+
"muted": false,
|
|
56
|
+
"components": [
|
|
57
|
+
{
|
|
58
|
+
"id": "overlay-text",
|
|
59
|
+
"name": "Overlay Text",
|
|
60
|
+
"type": "TEXT",
|
|
61
|
+
"text": "VIDEO BG",
|
|
62
|
+
"timeline": { "startAt": 0, "endAt": 5 },
|
|
63
|
+
"visible": true,
|
|
64
|
+
"order": 0,
|
|
65
|
+
"appearance": {
|
|
66
|
+
"x": 0,
|
|
67
|
+
"y": 860,
|
|
68
|
+
"width": 1080,
|
|
69
|
+
"height": 200,
|
|
70
|
+
"opacity": 1,
|
|
71
|
+
"rotation": 0,
|
|
72
|
+
"scaleX": 1,
|
|
73
|
+
"scaleY": 1,
|
|
74
|
+
"horizontalAlign": "center",
|
|
75
|
+
"verticalAlign": "center",
|
|
76
|
+
"text": {
|
|
77
|
+
"fontFamily": "Inter",
|
|
78
|
+
"fontSize": 140,
|
|
79
|
+
"fontWeight": "900",
|
|
80
|
+
"lineHeight": { "value": 1, "unit": "em" },
|
|
81
|
+
"color": "#ffffff",
|
|
82
|
+
"textAlign": "center",
|
|
83
|
+
"textTransform": "uppercase"
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
"animations": { "enabled": true, "list": [] },
|
|
87
|
+
"effects": { "enabled": true, "map": {} }
|
|
88
|
+
}
|
|
89
|
+
]
|
|
90
|
+
}
|
|
91
|
+
],
|
|
92
|
+
"transitions": [],
|
|
93
|
+
"audioTracks": []
|
|
94
|
+
}
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "04_real_subtitles",
|
|
3
|
+
"version": "2.0",
|
|
4
|
+
"name": "04. Real Subtitles",
|
|
5
|
+
"settings": {
|
|
6
|
+
"width": 1080,
|
|
7
|
+
"height": 1920,
|
|
8
|
+
"duration": 5,
|
|
9
|
+
"fps": 30,
|
|
10
|
+
"backgroundColor": "#000000"
|
|
11
|
+
},
|
|
12
|
+
"assets": [
|
|
13
|
+
{
|
|
14
|
+
"id": "bunny-asset",
|
|
15
|
+
"type": "VIDEO",
|
|
16
|
+
"url": "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
|
|
17
|
+
}
|
|
18
|
+
],
|
|
19
|
+
"layers": [
|
|
20
|
+
{
|
|
21
|
+
"id": "layer-video",
|
|
22
|
+
"name": "Video Layer",
|
|
23
|
+
"order": 0,
|
|
24
|
+
"visible": true,
|
|
25
|
+
"muted": true,
|
|
26
|
+
"components": [
|
|
27
|
+
{
|
|
28
|
+
"id": "bunny-video",
|
|
29
|
+
"name": "Background Video",
|
|
30
|
+
"type": "VIDEO",
|
|
31
|
+
"timeline": { "startAt": 0, "endAt": 5 },
|
|
32
|
+
"visible": true,
|
|
33
|
+
"order": 0,
|
|
34
|
+
"source": {
|
|
35
|
+
"assetId": "bunny-asset",
|
|
36
|
+
"url": "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
|
|
37
|
+
"startAt": 0,
|
|
38
|
+
"endAt": 5
|
|
39
|
+
},
|
|
40
|
+
"appearance": {
|
|
41
|
+
"x": 0,
|
|
42
|
+
"y": 0,
|
|
43
|
+
"width": 1080,
|
|
44
|
+
"height": 1920,
|
|
45
|
+
"opacity": 1,
|
|
46
|
+
"rotation": 0,
|
|
47
|
+
"scaleX": 1,
|
|
48
|
+
"scaleY": 1
|
|
49
|
+
},
|
|
50
|
+
"volume": 0,
|
|
51
|
+
"muted": true,
|
|
52
|
+
"animations": { "enabled": true, "list": [] },
|
|
53
|
+
"effects": { "enabled": true, "map": {} }
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"id": "layer-subtitles",
|
|
59
|
+
"name": "Subtitle Layer",
|
|
60
|
+
"order": 1,
|
|
61
|
+
"visible": true,
|
|
62
|
+
"muted": false,
|
|
63
|
+
"components": [
|
|
64
|
+
{
|
|
65
|
+
"id": "real-subtitles",
|
|
66
|
+
"name": "Real Subtitles",
|
|
67
|
+
"type": "SUBTITLES",
|
|
68
|
+
"timeline": { "startAt": 0, "endAt": 5 },
|
|
69
|
+
"visible": true,
|
|
70
|
+
"order": 0,
|
|
71
|
+
"source": {
|
|
72
|
+
"assetId": "bunny-asset",
|
|
73
|
+
"startAt": 0,
|
|
74
|
+
"endAt": 5
|
|
75
|
+
},
|
|
76
|
+
"appearance": {
|
|
77
|
+
"x": 0,
|
|
78
|
+
"y": 1400,
|
|
79
|
+
"width": 1080,
|
|
80
|
+
"height": 300,
|
|
81
|
+
"opacity": 1,
|
|
82
|
+
"rotation": 0,
|
|
83
|
+
"scaleX": 1,
|
|
84
|
+
"scaleY": 1,
|
|
85
|
+
"text": {
|
|
86
|
+
"fontFamily": "Inter",
|
|
87
|
+
"fontSize": 80,
|
|
88
|
+
"fontWeight": "900",
|
|
89
|
+
"color": "#ffffff",
|
|
90
|
+
"textAlign": "center",
|
|
91
|
+
"textTransform": "uppercase",
|
|
92
|
+
"activeWord": {
|
|
93
|
+
"enabled": true,
|
|
94
|
+
"color": "#ffd700",
|
|
95
|
+
"scale": 1.3
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
"animations": {
|
|
100
|
+
"enabled": true,
|
|
101
|
+
"list": [
|
|
102
|
+
{
|
|
103
|
+
"id": "words-anim",
|
|
104
|
+
"name": "Words Highlight",
|
|
105
|
+
"animation": "cf-words-highlight"
|
|
106
|
+
}
|
|
107
|
+
]
|
|
108
|
+
},
|
|
109
|
+
"effects": { "enabled": true, "map": {} }
|
|
110
|
+
}
|
|
111
|
+
]
|
|
112
|
+
}
|
|
113
|
+
],
|
|
114
|
+
"transitions": [],
|
|
115
|
+
"audioTracks": []
|
|
116
|
+
}
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "animated-shapes-example",
|
|
3
|
+
"version": "2.0",
|
|
4
|
+
"name": "Animated Shapes",
|
|
5
|
+
"settings": {
|
|
6
|
+
"width": 1080,
|
|
7
|
+
"height": 1920,
|
|
8
|
+
"duration": 3,
|
|
9
|
+
"fps": 30,
|
|
10
|
+
"backgroundColor": "#0a0a0a"
|
|
11
|
+
},
|
|
12
|
+
"assets": [],
|
|
13
|
+
"layers": [
|
|
14
|
+
{
|
|
15
|
+
"id": "layer-main",
|
|
16
|
+
"name": "Main Layer",
|
|
17
|
+
"order": 0,
|
|
18
|
+
"visible": true,
|
|
19
|
+
"muted": false,
|
|
20
|
+
"components": [
|
|
21
|
+
{
|
|
22
|
+
"id": "bg",
|
|
23
|
+
"name": "Background",
|
|
24
|
+
"type": "SHAPE",
|
|
25
|
+
"timeline": { "startAt": 0, "endAt": 3 },
|
|
26
|
+
"visible": true,
|
|
27
|
+
"order": 0,
|
|
28
|
+
"shape": { "type": "rectangle" },
|
|
29
|
+
"appearance": {
|
|
30
|
+
"x": 0,
|
|
31
|
+
"y": 0,
|
|
32
|
+
"width": 1080,
|
|
33
|
+
"height": 1920,
|
|
34
|
+
"opacity": 1,
|
|
35
|
+
"rotation": 0,
|
|
36
|
+
"scaleX": 1,
|
|
37
|
+
"scaleY": 1,
|
|
38
|
+
"color": "#0a0a0a"
|
|
39
|
+
},
|
|
40
|
+
"animations": { "enabled": true, "list": [] },
|
|
41
|
+
"effects": { "enabled": true, "map": {} }
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"id": "circle-1",
|
|
45
|
+
"name": "Circle",
|
|
46
|
+
"type": "SHAPE",
|
|
47
|
+
"timeline": { "startAt": 0, "endAt": 3 },
|
|
48
|
+
"visible": true,
|
|
49
|
+
"order": 1,
|
|
50
|
+
"shape": { "type": "circle" },
|
|
51
|
+
"appearance": {
|
|
52
|
+
"x": 290,
|
|
53
|
+
"y": 710,
|
|
54
|
+
"width": 500,
|
|
55
|
+
"height": 500,
|
|
56
|
+
"opacity": 1,
|
|
57
|
+
"rotation": 0,
|
|
58
|
+
"scaleX": 1,
|
|
59
|
+
"scaleY": 1,
|
|
60
|
+
"background": {
|
|
61
|
+
"colors": ["#f472b6", "#a855f7"],
|
|
62
|
+
"angle": 45
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
"animations": {
|
|
66
|
+
"enabled": true,
|
|
67
|
+
"list": [
|
|
68
|
+
{
|
|
69
|
+
"id": "circle-scale",
|
|
70
|
+
"name": "Pulse",
|
|
71
|
+
"animation": {
|
|
72
|
+
"id": "pulse",
|
|
73
|
+
"timeline": [
|
|
74
|
+
{
|
|
75
|
+
"tweens": [
|
|
76
|
+
{
|
|
77
|
+
"method": "from",
|
|
78
|
+
"vars": { "duration": 0.5, "scale": 0 }
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"method": "to",
|
|
82
|
+
"vars": { "duration": 0.5, "scale": 1.1 }
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"method": "to",
|
|
86
|
+
"vars": { "duration": 0.3, "scale": 1 }
|
|
87
|
+
}
|
|
88
|
+
]
|
|
89
|
+
}
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
]
|
|
94
|
+
},
|
|
95
|
+
"effects": { "enabled": true, "map": {} }
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"id": "star-1",
|
|
99
|
+
"name": "Star",
|
|
100
|
+
"type": "SHAPE",
|
|
101
|
+
"timeline": { "startAt": 0.5, "endAt": 3 },
|
|
102
|
+
"visible": true,
|
|
103
|
+
"order": 2,
|
|
104
|
+
"shape": { "type": "star" },
|
|
105
|
+
"appearance": {
|
|
106
|
+
"x": 640,
|
|
107
|
+
"y": 300,
|
|
108
|
+
"width": 300,
|
|
109
|
+
"height": 300,
|
|
110
|
+
"opacity": 1,
|
|
111
|
+
"rotation": 0,
|
|
112
|
+
"scaleX": 1,
|
|
113
|
+
"scaleY": 1,
|
|
114
|
+
"background": {
|
|
115
|
+
"colors": ["#fbbf24", "#f59e0b"],
|
|
116
|
+
"angle": 90
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
"animations": {
|
|
120
|
+
"enabled": true,
|
|
121
|
+
"list": [
|
|
122
|
+
{
|
|
123
|
+
"id": "star-spin",
|
|
124
|
+
"name": "Spin",
|
|
125
|
+
"animation": {
|
|
126
|
+
"id": "spin",
|
|
127
|
+
"timeline": [
|
|
128
|
+
{
|
|
129
|
+
"tweens": [
|
|
130
|
+
{
|
|
131
|
+
"method": "from",
|
|
132
|
+
"vars": { "duration": 0.6, "rotation": 180, "scale": 0 }
|
|
133
|
+
}
|
|
134
|
+
]
|
|
135
|
+
}
|
|
136
|
+
]
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
]
|
|
140
|
+
},
|
|
141
|
+
"effects": { "enabled": true, "map": {} }
|
|
142
|
+
}
|
|
143
|
+
]
|
|
144
|
+
}
|
|
145
|
+
],
|
|
146
|
+
"transitions": [],
|
|
147
|
+
"audioTracks": []
|
|
148
|
+
}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "gradient-background-example",
|
|
3
|
+
"version": "2.0",
|
|
4
|
+
"name": "Gradient Background",
|
|
5
|
+
"settings": {
|
|
6
|
+
"width": 1080,
|
|
7
|
+
"height": 1920,
|
|
8
|
+
"duration": 5,
|
|
9
|
+
"fps": 30,
|
|
10
|
+
"backgroundColor": "#000000"
|
|
11
|
+
},
|
|
12
|
+
"assets": [],
|
|
13
|
+
"layers": [
|
|
14
|
+
{
|
|
15
|
+
"id": "layer-main",
|
|
16
|
+
"name": "Main Layer",
|
|
17
|
+
"order": 0,
|
|
18
|
+
"visible": true,
|
|
19
|
+
"muted": false,
|
|
20
|
+
"components": [
|
|
21
|
+
{
|
|
22
|
+
"id": "bg-gradient",
|
|
23
|
+
"name": "Background Gradient",
|
|
24
|
+
"type": "SHAPE",
|
|
25
|
+
"timeline": { "startAt": 0, "endAt": 5 },
|
|
26
|
+
"visible": true,
|
|
27
|
+
"order": 0,
|
|
28
|
+
"shape": { "type": "rectangle" },
|
|
29
|
+
"appearance": {
|
|
30
|
+
"x": 0,
|
|
31
|
+
"y": 0,
|
|
32
|
+
"width": 1080,
|
|
33
|
+
"height": 1920,
|
|
34
|
+
"opacity": 1,
|
|
35
|
+
"rotation": 0,
|
|
36
|
+
"scaleX": 1,
|
|
37
|
+
"scaleY": 1,
|
|
38
|
+
"background": {
|
|
39
|
+
"colors": ["#667eea", "#764ba2"],
|
|
40
|
+
"angle": 135
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
"animations": { "enabled": true, "list": [] },
|
|
44
|
+
"effects": { "enabled": true, "map": {} }
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"id": "title-text",
|
|
48
|
+
"name": "Title",
|
|
49
|
+
"type": "TEXT",
|
|
50
|
+
"text": "Hello World",
|
|
51
|
+
"timeline": { "startAt": 0, "endAt": 5 },
|
|
52
|
+
"visible": true,
|
|
53
|
+
"order": 1,
|
|
54
|
+
"appearance": {
|
|
55
|
+
"x": 0,
|
|
56
|
+
"y": 800,
|
|
57
|
+
"width": 1080,
|
|
58
|
+
"height": 300,
|
|
59
|
+
"opacity": 1,
|
|
60
|
+
"rotation": 0,
|
|
61
|
+
"scaleX": 1,
|
|
62
|
+
"scaleY": 1,
|
|
63
|
+
"horizontalAlign": "center",
|
|
64
|
+
"verticalAlign": "center",
|
|
65
|
+
"text": {
|
|
66
|
+
"fontFamily": "Inter",
|
|
67
|
+
"fontSize": 120,
|
|
68
|
+
"fontWeight": "900",
|
|
69
|
+
"lineHeight": { "value": 1.1, "unit": "em" },
|
|
70
|
+
"letterSpacing": { "value": -0.02, "unit": "em" },
|
|
71
|
+
"color": "#ffffff",
|
|
72
|
+
"textAlign": "center",
|
|
73
|
+
"textTransform": "uppercase"
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
"animations": {
|
|
77
|
+
"enabled": true,
|
|
78
|
+
"list": [
|
|
79
|
+
{
|
|
80
|
+
"id": "title-scale",
|
|
81
|
+
"name": "Scale In",
|
|
82
|
+
"animation": {
|
|
83
|
+
"id": "scale-in",
|
|
84
|
+
"timeline": [
|
|
85
|
+
{
|
|
86
|
+
"tweens": [
|
|
87
|
+
{
|
|
88
|
+
"method": "from",
|
|
89
|
+
"vars": { "duration": 0.6, "scale": 0.5, "opacity": 0 }
|
|
90
|
+
}
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
|
+
]
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
]
|
|
97
|
+
},
|
|
98
|
+
"effects": { "enabled": true, "map": {} }
|
|
99
|
+
}
|
|
100
|
+
]
|
|
101
|
+
}
|
|
102
|
+
],
|
|
103
|
+
"transitions": [],
|
|
104
|
+
"audioTracks": []
|
|
105
|
+
}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "karaoke-subtitles-example",
|
|
3
|
+
"version": "2.0",
|
|
4
|
+
"name": "Karaoke Subtitles",
|
|
5
|
+
"settings": {
|
|
6
|
+
"width": 1080,
|
|
7
|
+
"height": 1920,
|
|
8
|
+
"duration": 4,
|
|
9
|
+
"fps": 30,
|
|
10
|
+
"backgroundColor": "#1a1a2e"
|
|
11
|
+
},
|
|
12
|
+
"assets": [],
|
|
13
|
+
"layers": [
|
|
14
|
+
{
|
|
15
|
+
"id": "layer-main",
|
|
16
|
+
"name": "Main Layer",
|
|
17
|
+
"order": 0,
|
|
18
|
+
"visible": true,
|
|
19
|
+
"muted": false,
|
|
20
|
+
"components": [
|
|
21
|
+
{
|
|
22
|
+
"id": "bg",
|
|
23
|
+
"name": "Background",
|
|
24
|
+
"type": "SHAPE",
|
|
25
|
+
"timeline": { "startAt": 0, "endAt": 4 },
|
|
26
|
+
"visible": true,
|
|
27
|
+
"order": 0,
|
|
28
|
+
"shape": { "type": "rectangle" },
|
|
29
|
+
"appearance": {
|
|
30
|
+
"x": 0,
|
|
31
|
+
"y": 0,
|
|
32
|
+
"width": 1080,
|
|
33
|
+
"height": 1920,
|
|
34
|
+
"opacity": 1,
|
|
35
|
+
"rotation": 0,
|
|
36
|
+
"scaleX": 1,
|
|
37
|
+
"scaleY": 1,
|
|
38
|
+
"background": {
|
|
39
|
+
"colors": ["#0f0f23", "#1a1a3e"],
|
|
40
|
+
"angle": 180
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
"animations": { "enabled": true, "list": [] },
|
|
44
|
+
"effects": { "enabled": true, "map": {} }
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"id": "subtitle-karaoke",
|
|
48
|
+
"name": "Karaoke Text",
|
|
49
|
+
"type": "TEXT",
|
|
50
|
+
"text": "Create stunning videos",
|
|
51
|
+
"timeline": { "startAt": 0, "endAt": 4 },
|
|
52
|
+
"visible": true,
|
|
53
|
+
"order": 1,
|
|
54
|
+
"appearance": {
|
|
55
|
+
"x": 0,
|
|
56
|
+
"y": 850,
|
|
57
|
+
"width": 1080,
|
|
58
|
+
"height": 200,
|
|
59
|
+
"opacity": 1,
|
|
60
|
+
"rotation": 0,
|
|
61
|
+
"scaleX": 1,
|
|
62
|
+
"scaleY": 1,
|
|
63
|
+
"horizontalAlign": "center",
|
|
64
|
+
"verticalAlign": "center",
|
|
65
|
+
"text": {
|
|
66
|
+
"fontFamily": "Montserrat",
|
|
67
|
+
"fontSize": 90,
|
|
68
|
+
"fontWeight": "900",
|
|
69
|
+
"lineHeight": { "value": 1.2, "unit": "em" },
|
|
70
|
+
"color": "rgba(255,255,255,0.4)",
|
|
71
|
+
"textAlign": "center",
|
|
72
|
+
"textTransform": "uppercase",
|
|
73
|
+
"activeWord": {
|
|
74
|
+
"enabled": true,
|
|
75
|
+
"color": "#ffd700",
|
|
76
|
+
"scale": 1.3
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
"animations": {
|
|
81
|
+
"enabled": true,
|
|
82
|
+
"list": [
|
|
83
|
+
{
|
|
84
|
+
"id": "words-anim",
|
|
85
|
+
"name": "Words Highlight",
|
|
86
|
+
"animation": "cf-words-highlight"
|
|
87
|
+
}
|
|
88
|
+
]
|
|
89
|
+
},
|
|
90
|
+
"effects": { "enabled": true, "map": {} }
|
|
91
|
+
}
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
],
|
|
95
|
+
"transitions": [],
|
|
96
|
+
"audioTracks": []
|
|
97
|
+
}
|