visualfries 0.1.107 → 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.
@@ -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';
@@ -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
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "visualfries",
3
- "version": "0.1.107",
3
+ "version": "0.1.108",
4
4
  "license": "MIT",
5
5
  "author": "ContentFries",
6
6
  "repository": {