@twick/visualizer 0.14.0 → 0.14.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 (68) hide show
  1. package/.eslintrc.json +20 -20
  2. package/README.md +113 -13
  3. package/package.json +14 -14
  4. package/package.json.bak +34 -0
  5. package/src/animations/blur.tsx +96 -60
  6. package/src/animations/breathe.tsx +95 -60
  7. package/src/animations/fade.tsx +173 -60
  8. package/src/animations/index.ts +12 -0
  9. package/src/animations/photo-rise.tsx +103 -66
  10. package/src/animations/photo-zoom.tsx +109 -73
  11. package/src/animations/rise.tsx +157 -118
  12. package/src/animations/succession.tsx +112 -77
  13. package/src/components/frame-effects.tsx +188 -188
  14. package/src/components/track.tsx +237 -232
  15. package/src/controllers/animation.controller.ts +38 -38
  16. package/src/controllers/element.controller.ts +42 -42
  17. package/src/controllers/frame-effect.controller.tsx +29 -29
  18. package/src/controllers/text-effect.controller.ts +32 -32
  19. package/src/elements/audio.element.tsx +79 -17
  20. package/src/elements/caption.element.tsx +169 -87
  21. package/src/elements/circle.element.tsx +88 -20
  22. package/src/elements/icon.element.tsx +88 -20
  23. package/src/elements/image.element.tsx +134 -55
  24. package/src/elements/index.ts +14 -0
  25. package/src/elements/rect.element.tsx +92 -22
  26. package/src/elements/scene.element.tsx +97 -29
  27. package/src/elements/text.element.tsx +101 -27
  28. package/src/elements/video.element.tsx +274 -56
  29. package/src/frame-effects/circle.frame.tsx +168 -103
  30. package/src/frame-effects/index.ts +7 -0
  31. package/src/frame-effects/rect.frame.tsx +198 -103
  32. package/src/global.css +11 -11
  33. package/src/helpers/caption.utils.ts +29 -29
  34. package/src/helpers/constants.ts +162 -158
  35. package/src/helpers/element.utils.ts +331 -239
  36. package/src/helpers/event.utils.ts +21 -0
  37. package/src/helpers/filters.ts +127 -127
  38. package/src/helpers/log.utils.ts +55 -29
  39. package/src/helpers/timing.utils.ts +109 -109
  40. package/src/helpers/types.ts +361 -241
  41. package/src/helpers/utils.ts +36 -19
  42. package/src/index.ts +196 -6
  43. package/src/live.tsx +16 -16
  44. package/src/project.ts +6 -6
  45. package/src/sample.ts +247 -247
  46. package/src/text-effects/elastic.tsx +70 -39
  47. package/src/text-effects/erase.tsx +91 -58
  48. package/src/text-effects/index.ts +9 -0
  49. package/src/text-effects/stream-word.tsx +94 -60
  50. package/src/text-effects/typewriter.tsx +93 -59
  51. package/src/visualizer-grouped.ts +83 -0
  52. package/src/visualizer.tsx +182 -78
  53. package/tsconfig.json +11 -11
  54. package/typedoc.json +19 -14
  55. package/vite.config.ts +15 -15
  56. package/.turbo/turbo-build.log +0 -19
  57. package/.turbo/turbo-docs.log +0 -7
  58. package/LICENSE +0 -197
  59. package/dist/mp4.wasm +0 -0
  60. package/dist/project.css +0 -1
  61. package/dist/project.js +0 -145
  62. package/docs/.nojekyll +0 -1
  63. package/docs/README.md +0 -13
  64. package/docs/interfaces/Animation.md +0 -47
  65. package/docs/interfaces/Element.md +0 -47
  66. package/docs/interfaces/FrameEffectPlugin.md +0 -47
  67. package/docs/interfaces/TextEffect.md +0 -47
  68. package/docs/modules.md +0 -535
@@ -1,159 +1,163 @@
1
- import { CaptionStyle } from "./types";
2
-
3
- /**
4
- * Constants used throughout the visualizer package.
5
- * Contains default values, configuration options, and type definitions.
6
- */
7
-
8
- /**
9
- * Default background color for scenes
10
- */
11
- export const DEFAULT_BACKGROUND_COLOR = "#000000";
12
-
13
- /**
14
- * Default position for elements
15
- */
16
- export const DEFAULT_POSITION = {
17
- x: 0,
18
- y: 0
19
- };
20
-
21
- /**
22
- * Default timing function for animations
23
- */
24
- export const DEFAULT_TIMING_FUNCTION = "easeInOut";
25
-
26
- /**
27
- * Available frame shapes for elements
28
- */
29
- export const FRAME_SHAPE = {
30
- RECTANGLE: "rectangle",
31
- CIRCLE: "circle",
32
- LINE: "line"
33
- } as const;
34
-
35
- /**
36
- * Timeline types for different media elements
37
- */
38
- export const TRACK_TYPES = {
39
- VIDEO: "video",
40
- AUDIO: "audio",
41
- CAPTION: "caption",
42
- SCENE: "scene",
43
- ELEMENT: "element"
44
- } as const;
45
-
46
- export const CAPTION_STYLE: Record<string, CaptionStyle> = {
47
- highlight_bg: {
48
- rect: {
49
- alignItems: "center",
50
- gap: 2,
51
- },
52
- word: {
53
- lineWidth: 0.35,
54
- stroke: "#000000",
55
- fontWeight: 700,
56
- shadowOffset: [-3, 3],
57
- shadowColor: "#000000",
58
- fill: "#ffffff",
59
- fontFamily: "Bangers",
60
- bgColor: "#000000",
61
- bgOffsetWidth: 30,
62
- bgOffsetHeight: 8,
63
- fontSize: 54,
64
- },
65
- },
66
- word_by_word: {
67
- rect: {
68
- alignItems: "center",
69
- justifyContent: "center",
70
- gap: 12,
71
- },
72
- word: {
73
- lineWidth: 0.35,
74
- stroke: "#000000",
75
- fontWeight: 700,
76
- strokeFirst: true,
77
- shadowOffset: [-2, 2],
78
- shadowColor: "#000000",
79
- shadowBlur: 5,
80
- fontFamily: "Bangers",
81
- fill: "#FFFFFF",
82
- bgOffsetWidth: 20,
83
- bgOffsetHeight: 10,
84
- fontSize: 54,
85
- },
86
- },
87
- word_by_word_with_bg: {
88
- rect: {
89
- alignItems: "center",
90
- gap: 12,
91
- padding: [10, 20],
92
- radius: 10,
93
- },
94
- word: {
95
- lineWidth: 0.35,
96
- stroke: "#000000",
97
- fontWeight: 700,
98
- strokeFirst: true,
99
- shadowOffset: [-2, 2],
100
- shadowColor: "#000000",
101
- shadowBlur: 5,
102
- fontFamily: "Bangers",
103
- fill: "#FFFFFF",
104
- bgOffsetWidth: 20,
105
- bgOffsetHeight: 10,
106
- fontSize: 54,
107
- },
108
- },
109
- };
110
-
111
- export const DEFAULT_CAPTION_COLORS = {
112
- text: "#000000",
113
- background: "#FFFFFF",
114
- };
115
-
116
- export const DEFAULT_CAPTION_FONT = {
117
- family: "Poppins",
118
- size: 48,
119
- weight: 400,
120
- };
121
-
122
- export const TRANSPARENT_COLOR = "#FFFFFF00";
123
-
124
- export const ELEMENT_TYPES = {
125
- VIDEO: "video",
126
- IMAGE: "image",
127
- AUDIO: "audio",
128
- TEXT: "text",
129
- CAPTION: "caption",
130
- RECT: "rect",
131
- CIRCLE: "circle",
132
- ICON: "icon",
133
- };
134
-
135
- export const OBJECT_FIT = {
136
- CONTAIN: "contain",
137
- COVER: "cover",
138
- FILL: "fill",
139
- NONE: "none",
140
- }
141
-
142
- export const COLOR_FILTERS = {
143
- SATURATED: "saturated",
144
- BRIGHT: "bright",
145
- VIBRANT: "vibrant",
146
- RETRO: "retro",
147
- BLACK_WHITE: "blackWhite",
148
- SEPIA: "sepia",
149
- COOL: "cool",
150
- WARM: "warm",
151
- CINEMATIC: "cinematic",
152
- SOFT_GLOW: "softGlow",
153
- MOODY: "moody",
154
- DREAMY: "dreamy",
155
- INVERTED: "inverted",
156
- VINTAGE: "vintage",
157
- DRAMATIC: "dramatic",
158
- FADED: "faded",
1
+ import { CaptionStyle } from "./types";
2
+
3
+ /**
4
+ * Constants used throughout the visualizer package.
5
+ * Contains default values, configuration options, and type definitions.
6
+ */
7
+
8
+ /**
9
+ * Default background color for scenes
10
+ */
11
+ export const DEFAULT_BACKGROUND_COLOR = "#000000";
12
+
13
+ /**
14
+ * Default position for elements
15
+ */
16
+ export const DEFAULT_POSITION = {
17
+ x: 0,
18
+ y: 0
19
+ };
20
+
21
+ /**
22
+ * Default timing function for animations
23
+ */
24
+ export const DEFAULT_TIMING_FUNCTION = "easeInOut";
25
+
26
+ /**
27
+ * Available frame shapes for elements
28
+ */
29
+ export const FRAME_SHAPE = {
30
+ RECTANGLE: "rectangle",
31
+ CIRCLE: "circle",
32
+ LINE: "line"
33
+ } as const;
34
+
35
+ /**
36
+ * Timeline types for different media elements
37
+ */
38
+ export const TRACK_TYPES = {
39
+ VIDEO: "video",
40
+ AUDIO: "audio",
41
+ CAPTION: "caption",
42
+ SCENE: "scene",
43
+ ELEMENT: "element"
44
+ } as const;
45
+
46
+ export const CAPTION_STYLE: Record<string, CaptionStyle> = {
47
+ highlight_bg: {
48
+ rect: {
49
+ alignItems: "center",
50
+ gap: 2,
51
+ },
52
+ word: {
53
+ lineWidth: 0.35,
54
+ stroke: "#000000",
55
+ fontWeight: 700,
56
+ shadowOffset: [-3, 3],
57
+ shadowColor: "#000000",
58
+ fill: "#ffffff",
59
+ fontFamily: "Bangers",
60
+ bgColor: "#000000",
61
+ bgOffsetWidth: 30,
62
+ bgOffsetHeight: 8,
63
+ fontSize: 54,
64
+ },
65
+ },
66
+ word_by_word: {
67
+ rect: {
68
+ alignItems: "center",
69
+ justifyContent: "center",
70
+ gap: 12,
71
+ },
72
+ word: {
73
+ lineWidth: 0.35,
74
+ stroke: "#000000",
75
+ fontWeight: 700,
76
+ strokeFirst: true,
77
+ shadowOffset: [-2, 2],
78
+ shadowColor: "#000000",
79
+ shadowBlur: 5,
80
+ fontFamily: "Bangers",
81
+ fill: "#FFFFFF",
82
+ bgOffsetWidth: 20,
83
+ bgOffsetHeight: 10,
84
+ fontSize: 54,
85
+ },
86
+ },
87
+ word_by_word_with_bg: {
88
+ rect: {
89
+ alignItems: "center",
90
+ gap: 12,
91
+ padding: [10, 20],
92
+ radius: 10,
93
+ },
94
+ word: {
95
+ lineWidth: 0.35,
96
+ stroke: "#000000",
97
+ fontWeight: 700,
98
+ strokeFirst: true,
99
+ shadowOffset: [-2, 2],
100
+ shadowColor: "#000000",
101
+ shadowBlur: 5,
102
+ fontFamily: "Bangers",
103
+ fill: "#FFFFFF",
104
+ bgOffsetWidth: 20,
105
+ bgOffsetHeight: 10,
106
+ fontSize: 54,
107
+ },
108
+ },
109
+ };
110
+
111
+ export const DEFAULT_CAPTION_COLORS = {
112
+ text: "#000000",
113
+ background: "#FFFFFF",
114
+ };
115
+
116
+ export const DEFAULT_CAPTION_FONT = {
117
+ family: "Poppins",
118
+ size: 48,
119
+ weight: 400,
120
+ };
121
+
122
+ export const TRANSPARENT_COLOR = "#FFFFFF00";
123
+
124
+ export const ELEMENT_TYPES = {
125
+ VIDEO: "video",
126
+ IMAGE: "image",
127
+ AUDIO: "audio",
128
+ TEXT: "text",
129
+ CAPTION: "caption",
130
+ RECT: "rect",
131
+ CIRCLE: "circle",
132
+ ICON: "icon",
133
+ };
134
+
135
+ export const OBJECT_FIT = {
136
+ CONTAIN: "contain",
137
+ COVER: "cover",
138
+ FILL: "fill",
139
+ NONE: "none",
140
+ }
141
+
142
+ export const COLOR_FILTERS = {
143
+ SATURATED: "saturated",
144
+ BRIGHT: "bright",
145
+ VIBRANT: "vibrant",
146
+ RETRO: "retro",
147
+ BLACK_WHITE: "blackWhite",
148
+ SEPIA: "sepia",
149
+ COOL: "cool",
150
+ WARM: "warm",
151
+ CINEMATIC: "cinematic",
152
+ SOFT_GLOW: "softGlow",
153
+ MOODY: "moody",
154
+ DREAMY: "dreamy",
155
+ INVERTED: "inverted",
156
+ VINTAGE: "vintage",
157
+ DRAMATIC: "dramatic",
158
+ FADED: "faded",
159
+ }
160
+
161
+ export const EVENT_TYPES = {
162
+ PLAYER_UPDATE: "twick:playerUpdate",
159
163
  }