@twick/visualizer 0.14.0 → 0.14.2

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 (63) hide show
  1. package/.eslintrc.json +20 -20
  2. package/README.md +12 -12
  3. package/package.json +13 -13
  4. package/package.json.bak +34 -0
  5. package/src/animations/blur.tsx +60 -60
  6. package/src/animations/breathe.tsx +60 -60
  7. package/src/animations/fade.tsx +60 -60
  8. package/src/animations/photo-rise.tsx +66 -66
  9. package/src/animations/photo-zoom.tsx +73 -73
  10. package/src/animations/rise.tsx +118 -118
  11. package/src/animations/succession.tsx +77 -77
  12. package/src/components/frame-effects.tsx +188 -188
  13. package/src/components/track.tsx +237 -232
  14. package/src/controllers/animation.controller.ts +38 -38
  15. package/src/controllers/element.controller.ts +42 -42
  16. package/src/controllers/frame-effect.controller.tsx +29 -29
  17. package/src/controllers/text-effect.controller.ts +32 -32
  18. package/src/elements/audio.element.tsx +17 -17
  19. package/src/elements/caption.element.tsx +87 -87
  20. package/src/elements/circle.element.tsx +20 -20
  21. package/src/elements/icon.element.tsx +20 -20
  22. package/src/elements/image.element.tsx +53 -55
  23. package/src/elements/rect.element.tsx +22 -22
  24. package/src/elements/scene.element.tsx +29 -29
  25. package/src/elements/text.element.tsx +27 -27
  26. package/src/elements/video.element.tsx +55 -56
  27. package/src/frame-effects/circle.frame.tsx +103 -103
  28. package/src/frame-effects/rect.frame.tsx +103 -103
  29. package/src/global.css +11 -11
  30. package/src/helpers/caption.utils.ts +29 -29
  31. package/src/helpers/constants.ts +162 -158
  32. package/src/helpers/element.utils.ts +239 -239
  33. package/src/helpers/event.utils.ts +6 -0
  34. package/src/helpers/filters.ts +127 -127
  35. package/src/helpers/log.utils.ts +29 -29
  36. package/src/helpers/timing.utils.ts +109 -109
  37. package/src/helpers/types.ts +242 -241
  38. package/src/helpers/utils.ts +19 -19
  39. package/src/index.ts +6 -6
  40. package/src/live.tsx +16 -16
  41. package/src/project.ts +6 -6
  42. package/src/sample.ts +247 -247
  43. package/src/text-effects/elastic.tsx +39 -39
  44. package/src/text-effects/erase.tsx +58 -58
  45. package/src/text-effects/stream-word.tsx +60 -60
  46. package/src/text-effects/typewriter.tsx +59 -59
  47. package/src/visualizer.tsx +98 -78
  48. package/tsconfig.json +11 -11
  49. package/typedoc.json +14 -14
  50. package/vite.config.ts +15 -15
  51. package/.turbo/turbo-build.log +0 -19
  52. package/.turbo/turbo-docs.log +0 -7
  53. package/LICENSE +0 -197
  54. package/dist/mp4.wasm +0 -0
  55. package/dist/project.css +0 -1
  56. package/dist/project.js +0 -145
  57. package/docs/.nojekyll +0 -1
  58. package/docs/README.md +0 -13
  59. package/docs/interfaces/Animation.md +0 -47
  60. package/docs/interfaces/Element.md +0 -47
  61. package/docs/interfaces/FrameEffectPlugin.md +0 -47
  62. package/docs/interfaces/TextEffect.md +0 -47
  63. package/docs/modules.md +0 -535
@@ -1,128 +1,128 @@
1
- import { Reference } from "@twick/core";
2
- import { COLOR_FILTERS } from "./constants";
3
-
4
- /**
5
- * Filter utilities for the visualizer package.
6
- * Provides functions for applying various visual filters to elements.
7
- */
8
-
9
- /**
10
- * Applies a blur filter to an element
11
- * @param {Object} params - Parameters for the blur filter
12
- * @param {Reference<any>} params.element - The element to apply the filter to
13
- * @param {number} params.amount - The blur amount
14
- * @returns {void}
15
- */
16
- export function applyBlurFilter({ element, amount }: { element: Reference<any>; amount: number }) {
17
- // ... existing code ...
18
- }
19
-
20
- /**
21
- * Applies a brightness filter to an element
22
- * @param {Object} params - Parameters for the brightness filter
23
- * @param {Reference<any>} params.element - The element to apply the filter to
24
- * @param {number} params.amount - The brightness amount
25
- * @returns {void}
26
- */
27
- export function applyBrightnessFilter({ element, amount }: { element: Reference<any>; amount: number }) {
28
- // ... existing code ...
29
- }
30
-
31
- /**
32
- * Applies a contrast filter to an element
33
- * @param {Object} params - Parameters for the contrast filter
34
- * @param {Reference<any>} params.element - The element to apply the filter to
35
- * @param {number} params.amount - The contrast amount
36
- * @returns {void}
37
- */
38
- export function applyContrastFilter({ element, amount }: { element: Reference<any>; amount: number }) {
39
- // ... existing code ...
40
- }
41
-
42
- export const applyColorFilter = (ref: Reference<any>, filterType: string) => {
43
- switch (filterType) {
44
- case COLOR_FILTERS.SATURATED:
45
- ref().filters.saturate(1.4);
46
- ref().filters.contrast(1.1);
47
- break;
48
- case COLOR_FILTERS.BRIGHT:
49
- ref().filters.brightness(1.3);
50
- ref().filters.contrast(1.05);
51
- break;
52
- case COLOR_FILTERS.VIBRANT:
53
- ref().filters.saturate(1.6);
54
- ref().filters.brightness(1.15);
55
- ref().filters.contrast(1.1);
56
- break;
57
- case COLOR_FILTERS.RETRO:
58
- ref().filters.sepia(0.8);
59
- ref().filters.contrast(1.3);
60
- ref().filters.brightness(0.85);
61
- ref().filters.saturate(0.8);
62
- break;
63
- case COLOR_FILTERS.BLACK_WHITE:
64
- ref().filters.grayscale(1);
65
- ref().filters.contrast(1.25);
66
- ref().filters.brightness(1.05);
67
- break;
68
- case COLOR_FILTERS.COOL:
69
- ref().filters.hue(15);
70
- ref().filters.brightness(1.1);
71
- ref().filters.saturate(1.3);
72
- ref().filters.contrast(1.05);
73
- break;
74
- case COLOR_FILTERS.WARM:
75
- ref().filters.hue(-15);
76
- ref().filters.brightness(1.15);
77
- ref().filters.saturate(1.3);
78
- ref().filters.contrast(1.05);
79
- break;
80
- case COLOR_FILTERS.CINEMATIC:
81
- ref().filters.contrast(1.4);
82
- ref().filters.brightness(0.95);
83
- ref().filters.saturate(0.85);
84
- ref().filters.sepia(0.2);
85
- break;
86
- case COLOR_FILTERS.SOFT_GLOW:
87
- ref().filters.brightness(1.2);
88
- ref().filters.contrast(0.95);
89
- ref().filters.blur(1.2);
90
- ref().filters.saturate(1.1);
91
- break;
92
- case COLOR_FILTERS.MOODY:
93
- ref().filters.brightness(1.05);
94
- ref().filters.contrast(1.4);
95
- ref().filters.saturate(0.65);
96
- ref().filters.sepia(0.2);
97
- break;
98
- case COLOR_FILTERS.DREAMY:
99
- ref().filters.brightness(1.3);
100
- ref().filters.blur(2);
101
- ref().filters.saturate(1.4);
102
- ref().filters.contrast(0.95);
103
- break;
104
- case COLOR_FILTERS.INVERTED:
105
- ref().filters.invert(1);
106
- ref().filters.hue(180);
107
- break;
108
- case COLOR_FILTERS.VINTAGE:
109
- ref().filters.sepia(0.4);
110
- ref().filters.saturate(1.4);
111
- ref().filters.contrast(1.2);
112
- ref().filters.brightness(1.1);
113
- break;
114
- case COLOR_FILTERS.DRAMATIC:
115
- ref().filters.contrast(1.5);
116
- ref().filters.brightness(0.9);
117
- ref().filters.saturate(1.2);
118
- break;
119
- case COLOR_FILTERS.FADED:
120
- ref().filters.opacity(0.9);
121
- ref().filters.brightness(1.2);
122
- ref().filters.saturate(0.8);
123
- ref().filters.contrast(0.9);
124
- break;
125
- default:
126
- break;
127
- }
1
+ import { Reference } from "@twick/core";
2
+ import { COLOR_FILTERS } from "./constants";
3
+
4
+ /**
5
+ * Filter utilities for the visualizer package.
6
+ * Provides functions for applying various visual filters to elements.
7
+ */
8
+
9
+ /**
10
+ * Applies a blur filter to an element
11
+ * @param {Object} params - Parameters for the blur filter
12
+ * @param {Reference<any>} params.element - The element to apply the filter to
13
+ * @param {number} params.amount - The blur amount
14
+ * @returns {void}
15
+ */
16
+ export function applyBlurFilter({ element, amount }: { element: Reference<any>; amount: number }) {
17
+ // ... existing code ...
18
+ }
19
+
20
+ /**
21
+ * Applies a brightness filter to an element
22
+ * @param {Object} params - Parameters for the brightness filter
23
+ * @param {Reference<any>} params.element - The element to apply the filter to
24
+ * @param {number} params.amount - The brightness amount
25
+ * @returns {void}
26
+ */
27
+ export function applyBrightnessFilter({ element, amount }: { element: Reference<any>; amount: number }) {
28
+ // ... existing code ...
29
+ }
30
+
31
+ /**
32
+ * Applies a contrast filter to an element
33
+ * @param {Object} params - Parameters for the contrast filter
34
+ * @param {Reference<any>} params.element - The element to apply the filter to
35
+ * @param {number} params.amount - The contrast amount
36
+ * @returns {void}
37
+ */
38
+ export function applyContrastFilter({ element, amount }: { element: Reference<any>; amount: number }) {
39
+ // ... existing code ...
40
+ }
41
+
42
+ export const applyColorFilter = (ref: Reference<any>, filterType: string) => {
43
+ switch (filterType) {
44
+ case COLOR_FILTERS.SATURATED:
45
+ ref().filters.saturate(1.4);
46
+ ref().filters.contrast(1.1);
47
+ break;
48
+ case COLOR_FILTERS.BRIGHT:
49
+ ref().filters.brightness(1.3);
50
+ ref().filters.contrast(1.05);
51
+ break;
52
+ case COLOR_FILTERS.VIBRANT:
53
+ ref().filters.saturate(1.6);
54
+ ref().filters.brightness(1.15);
55
+ ref().filters.contrast(1.1);
56
+ break;
57
+ case COLOR_FILTERS.RETRO:
58
+ ref().filters.sepia(0.8);
59
+ ref().filters.contrast(1.3);
60
+ ref().filters.brightness(0.85);
61
+ ref().filters.saturate(0.8);
62
+ break;
63
+ case COLOR_FILTERS.BLACK_WHITE:
64
+ ref().filters.grayscale(1);
65
+ ref().filters.contrast(1.25);
66
+ ref().filters.brightness(1.05);
67
+ break;
68
+ case COLOR_FILTERS.COOL:
69
+ ref().filters.hue(15);
70
+ ref().filters.brightness(1.1);
71
+ ref().filters.saturate(1.3);
72
+ ref().filters.contrast(1.05);
73
+ break;
74
+ case COLOR_FILTERS.WARM:
75
+ ref().filters.hue(-15);
76
+ ref().filters.brightness(1.15);
77
+ ref().filters.saturate(1.3);
78
+ ref().filters.contrast(1.05);
79
+ break;
80
+ case COLOR_FILTERS.CINEMATIC:
81
+ ref().filters.contrast(1.4);
82
+ ref().filters.brightness(0.95);
83
+ ref().filters.saturate(0.85);
84
+ ref().filters.sepia(0.2);
85
+ break;
86
+ case COLOR_FILTERS.SOFT_GLOW:
87
+ ref().filters.brightness(1.2);
88
+ ref().filters.contrast(0.95);
89
+ ref().filters.blur(1.2);
90
+ ref().filters.saturate(1.1);
91
+ break;
92
+ case COLOR_FILTERS.MOODY:
93
+ ref().filters.brightness(1.05);
94
+ ref().filters.contrast(1.4);
95
+ ref().filters.saturate(0.65);
96
+ ref().filters.sepia(0.2);
97
+ break;
98
+ case COLOR_FILTERS.DREAMY:
99
+ ref().filters.brightness(1.3);
100
+ ref().filters.blur(2);
101
+ ref().filters.saturate(1.4);
102
+ ref().filters.contrast(0.95);
103
+ break;
104
+ case COLOR_FILTERS.INVERTED:
105
+ ref().filters.invert(1);
106
+ ref().filters.hue(180);
107
+ break;
108
+ case COLOR_FILTERS.VINTAGE:
109
+ ref().filters.sepia(0.4);
110
+ ref().filters.saturate(1.4);
111
+ ref().filters.contrast(1.2);
112
+ ref().filters.brightness(1.1);
113
+ break;
114
+ case COLOR_FILTERS.DRAMATIC:
115
+ ref().filters.contrast(1.5);
116
+ ref().filters.brightness(0.9);
117
+ ref().filters.saturate(1.2);
118
+ break;
119
+ case COLOR_FILTERS.FADED:
120
+ ref().filters.opacity(0.9);
121
+ ref().filters.brightness(1.2);
122
+ ref().filters.saturate(0.8);
123
+ ref().filters.contrast(0.9);
124
+ break;
125
+ default:
126
+ break;
127
+ }
128
128
  };
@@ -1,29 +1,29 @@
1
- import { format } from "date-fns";
2
-
3
- const getCurrentTime = (dateFormat = "mm:ss:SSS") => {
4
- const now = new Date();
5
- return format(now, dateFormat);
6
- };
7
-
8
- /**
9
- * Logging utilities for the visualizer package.
10
- * Provides consistent logging functionality across the application.
11
- */
12
-
13
- /**
14
- * Logs a message to the console with a visualizer prefix
15
- * @param {string} message - The message to log
16
- * @param {any} [data] - Optional data to log
17
- */
18
- export function logger(message: string, data?: any) {
19
- console.log(`[Visualizer] ${message}`, data ? data : "");
20
- }
21
-
22
- /**
23
- * Logs an error to the console with a visualizer prefix
24
- * @param {string} message - The error message to log
25
- * @param {Error} [error] - Optional error object
26
- */
27
- export function errorLogger(message: string, error?: Error) {
28
- console.error(`[Visualizer Error] ${message}`, error ? error : "");
29
- }
1
+ import { format } from "date-fns";
2
+
3
+ const getCurrentTime = (dateFormat = "mm:ss:SSS") => {
4
+ const now = new Date();
5
+ return format(now, dateFormat);
6
+ };
7
+
8
+ /**
9
+ * Logging utilities for the visualizer package.
10
+ * Provides consistent logging functionality across the application.
11
+ */
12
+
13
+ /**
14
+ * Logs a message to the console with a visualizer prefix
15
+ * @param {string} message - The message to log
16
+ * @param {any} [data] - Optional data to log
17
+ */
18
+ export function logger(message: string, data?: any) {
19
+ console.log(`[Visualizer] ${message}`, data ? data : "");
20
+ }
21
+
22
+ /**
23
+ * Logs an error to the console with a visualizer prefix
24
+ * @param {string} message - The error message to log
25
+ * @param {Error} [error] - Optional error object
26
+ */
27
+ export function errorLogger(message: string, error?: Error) {
28
+ console.error(`[Visualizer Error] ${message}`, error ? error : "");
29
+ }
@@ -1,110 +1,110 @@
1
- import {
2
- linear,
3
- easeInSine,
4
- easeOutSine,
5
- easeInOutSine,
6
- easeInQuad,
7
- easeOutQuad,
8
- easeInOutQuad,
9
- easeInCubic,
10
- easeOutCubic,
11
- easeInOutCubic,
12
- easeInQuart,
13
- easeOutQuart,
14
- easeInOutQuart,
15
- easeInQuint,
16
- easeOutQuint,
17
- easeInOutQuint,
18
- easeInExpo,
19
- easeOutExpo,
20
- easeInOutExpo,
21
- easeInCirc,
22
- easeOutCirc,
23
- easeInOutCirc,
24
- easeInBack,
25
- easeOutBack,
26
- easeInOutBack,
27
- easeInElastic,
28
- easeOutElastic,
29
- easeInOutElastic,
30
- easeInBounce,
31
- easeOutBounce,
32
- easeInOutBounce,
33
- } from "@twick/core";
34
-
35
- /**
36
- * Timing utilities for the visualizer package.
37
- * Provides functions for handling timing and animation calculations.
38
- */
39
-
40
- /**
41
- * Gets the timing function based on the provided name
42
- * @param {string} name - Name of the timing function
43
- * @returns {Function} The timing function
44
- */
45
- export function getTimingFunction(name: string) {
46
- switch (name) {
47
- case "easeInSine":
48
- return easeInSine;
49
- case "easeOutSine":
50
- return easeOutSine;
51
- case "easeInOutSine":
52
- return easeInOutSine;
53
- case "easeInQuad":
54
- return easeInQuad;
55
- case "easeOutQuad":
56
- return easeOutQuad;
57
- case "easeInOutQuad":
58
- return easeInOutQuad;
59
- case "easeInCubic":
60
- return easeInCubic;
61
- case "easeOutCubic":
62
- return easeOutCubic;
63
- case "easeInOutCubic":
64
- return easeInOutCubic;
65
- case "easeInQuart":
66
- return easeInQuart;
67
- case "easeOutQuart":
68
- return easeOutQuart;
69
- case "easeInOutQuart":
70
- return easeInOutQuart;
71
- case "easeInQuint":
72
- return easeInQuint;
73
- case "easeOutQuint":
74
- return easeOutQuint;
75
- case "easeInOutQuint":
76
- return easeInOutQuint;
77
- case "easeInExpo":
78
- return easeInExpo;
79
- case "easeOutExpo":
80
- return easeOutExpo;
81
- case "easeInOutExpo":
82
- return easeInOutExpo;
83
- case "easeInCirc":
84
- return easeInCirc;
85
- case "easeOutCirc":
86
- return easeOutCirc;
87
- case "easeInOutCirc":
88
- return easeInOutCirc;
89
- case "easeInBack":
90
- return easeInBack;
91
- case "easeOutBack":
92
- return easeOutBack;
93
- case "easeInOutBack":
94
- return easeInOutBack;
95
- case "easeInElastic":
96
- return easeInElastic;
97
- case "easeOutElastic":
98
- return easeOutElastic;
99
- case "easeInOutElastic":
100
- return easeInOutElastic;
101
- case "easeInBounce":
102
- return easeInBounce;
103
- case "easeOutBounce":
104
- return easeOutBounce;
105
- case "easeInOutBounce":
106
- return easeInOutBounce;
107
- default:
108
- return linear;
109
- }
1
+ import {
2
+ linear,
3
+ easeInSine,
4
+ easeOutSine,
5
+ easeInOutSine,
6
+ easeInQuad,
7
+ easeOutQuad,
8
+ easeInOutQuad,
9
+ easeInCubic,
10
+ easeOutCubic,
11
+ easeInOutCubic,
12
+ easeInQuart,
13
+ easeOutQuart,
14
+ easeInOutQuart,
15
+ easeInQuint,
16
+ easeOutQuint,
17
+ easeInOutQuint,
18
+ easeInExpo,
19
+ easeOutExpo,
20
+ easeInOutExpo,
21
+ easeInCirc,
22
+ easeOutCirc,
23
+ easeInOutCirc,
24
+ easeInBack,
25
+ easeOutBack,
26
+ easeInOutBack,
27
+ easeInElastic,
28
+ easeOutElastic,
29
+ easeInOutElastic,
30
+ easeInBounce,
31
+ easeOutBounce,
32
+ easeInOutBounce,
33
+ } from "@twick/core";
34
+
35
+ /**
36
+ * Timing utilities for the visualizer package.
37
+ * Provides functions for handling timing and animation calculations.
38
+ */
39
+
40
+ /**
41
+ * Gets the timing function based on the provided name
42
+ * @param {string} name - Name of the timing function
43
+ * @returns {Function} The timing function
44
+ */
45
+ export function getTimingFunction(name: string) {
46
+ switch (name) {
47
+ case "easeInSine":
48
+ return easeInSine;
49
+ case "easeOutSine":
50
+ return easeOutSine;
51
+ case "easeInOutSine":
52
+ return easeInOutSine;
53
+ case "easeInQuad":
54
+ return easeInQuad;
55
+ case "easeOutQuad":
56
+ return easeOutQuad;
57
+ case "easeInOutQuad":
58
+ return easeInOutQuad;
59
+ case "easeInCubic":
60
+ return easeInCubic;
61
+ case "easeOutCubic":
62
+ return easeOutCubic;
63
+ case "easeInOutCubic":
64
+ return easeInOutCubic;
65
+ case "easeInQuart":
66
+ return easeInQuart;
67
+ case "easeOutQuart":
68
+ return easeOutQuart;
69
+ case "easeInOutQuart":
70
+ return easeInOutQuart;
71
+ case "easeInQuint":
72
+ return easeInQuint;
73
+ case "easeOutQuint":
74
+ return easeOutQuint;
75
+ case "easeInOutQuint":
76
+ return easeInOutQuint;
77
+ case "easeInExpo":
78
+ return easeInExpo;
79
+ case "easeOutExpo":
80
+ return easeOutExpo;
81
+ case "easeInOutExpo":
82
+ return easeInOutExpo;
83
+ case "easeInCirc":
84
+ return easeInCirc;
85
+ case "easeOutCirc":
86
+ return easeOutCirc;
87
+ case "easeInOutCirc":
88
+ return easeInOutCirc;
89
+ case "easeInBack":
90
+ return easeInBack;
91
+ case "easeOutBack":
92
+ return easeOutBack;
93
+ case "easeInOutBack":
94
+ return easeInOutBack;
95
+ case "easeInElastic":
96
+ return easeInElastic;
97
+ case "easeOutElastic":
98
+ return easeOutElastic;
99
+ case "easeInOutElastic":
100
+ return easeInOutElastic;
101
+ case "easeInBounce":
102
+ return easeInBounce;
103
+ case "easeOutBounce":
104
+ return easeOutBounce;
105
+ case "easeInOutBounce":
106
+ return easeInOutBounce;
107
+ default:
108
+ return linear;
109
+ }
110
110
  }