animark-react 0.1.1 → 0.1.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/dist/CSSAnimatedWrapper.d.ts +26 -2
- package/dist/CSSAnimatedWrapper.d.ts.map +1 -1
- package/dist/CSSAnimatedWrapper.js +99 -9
- package/dist/CSSAnimatedWrapper.js.map +1 -1
- package/dist/MotionAnimatedWrapper.d.ts.map +1 -1
- package/dist/MotionAnimatedWrapper.js +188 -12
- package/dist/MotionAnimatedWrapper.js.map +1 -1
- package/package.json +1 -1
- package/src/animark.css +81 -1
|
@@ -7,9 +7,33 @@ interface CSSAnimatedWrapperProps {
|
|
|
7
7
|
style?: React.CSSProperties;
|
|
8
8
|
}
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
11
|
-
*
|
|
10
|
+
* Splits every text node in the React tree into individual character <span>s,
|
|
11
|
+
* each with a staggered animationDelay. Non-text React elements are cloned
|
|
12
|
+
* with their children processed recursively.
|
|
12
13
|
*/
|
|
14
|
+
export declare function TypingInner({ children, baseDelay, charDelay, playKey, }: {
|
|
15
|
+
children: React.ReactNode;
|
|
16
|
+
baseDelay: number;
|
|
17
|
+
charDelay: number;
|
|
18
|
+
playKey: number;
|
|
19
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
/**
|
|
21
|
+
* Splits every text node into individual word <span>s with staggered delays.
|
|
22
|
+
* Preserves non-text React elements (bold, italic, links, etc.) as atomic units
|
|
23
|
+
* that animate in as a single "word".
|
|
24
|
+
*
|
|
25
|
+
* Each word gets:
|
|
26
|
+
* - className="animark-word" → picks up the CSS keyframe
|
|
27
|
+
* - animationDelay → per-word stagger
|
|
28
|
+
* - animationDuration → passed from config
|
|
29
|
+
*/
|
|
30
|
+
export declare function WordsInner({ children, baseDelay, wordDelay, duration, playKey, }: {
|
|
31
|
+
children: React.ReactNode;
|
|
32
|
+
baseDelay: number;
|
|
33
|
+
wordDelay: number;
|
|
34
|
+
duration: number;
|
|
35
|
+
playKey: number;
|
|
36
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
13
37
|
export declare const CSSAnimatedWrapper: React.FC<CSSAnimatedWrapperProps>;
|
|
14
38
|
export {};
|
|
15
39
|
//# sourceMappingURL=CSSAnimatedWrapper.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CSSAnimatedWrapper.d.ts","sourceRoot":"","sources":["../src/CSSAnimatedWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGpD,UAAU,uBAAuB;IAC/B,SAAS,EAAE,eAAe,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;
|
|
1
|
+
{"version":3,"file":"CSSAnimatedWrapper.d.ts","sourceRoot":"","sources":["../src/CSSAnimatedWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGpD,UAAU,uBAAuB;IAC/B,SAAS,EAAE,eAAe,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAoBD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,SAAS,EACT,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB,2CAqCA;AAID;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB,2CAkDA;AAID,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAuFhE,CAAC"}
|
|
@@ -1,36 +1,126 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useEffect, useId } from "react";
|
|
2
|
+
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import React, { useEffect, useId } from "react";
|
|
4
4
|
import { useAnimarkContext } from "./AnimarkContext";
|
|
5
5
|
function getAnimationClass(animation) {
|
|
6
6
|
const dir = animation.direction ?? "up";
|
|
7
7
|
switch (animation.type) {
|
|
8
8
|
case "fade": return "animark-fade";
|
|
9
9
|
case "scale": return "animark-scale";
|
|
10
|
+
case "blur": return "animark-blur";
|
|
11
|
+
case "bounce": return "animark-bounce";
|
|
12
|
+
case "flip": return "animark-flip";
|
|
13
|
+
case "glitch": return "animark-glitch";
|
|
10
14
|
case "slide": return `animark-slide-${dir}`;
|
|
11
15
|
case "move": return `animark-move-${dir}`;
|
|
16
|
+
// highlight, typing and words handled separately below
|
|
12
17
|
default: return "animark-fade";
|
|
13
18
|
}
|
|
14
19
|
}
|
|
20
|
+
// ── Typing helper ─────────────────────────────────────────────────────────────
|
|
15
21
|
/**
|
|
16
|
-
*
|
|
17
|
-
*
|
|
22
|
+
* Splits every text node in the React tree into individual character <span>s,
|
|
23
|
+
* each with a staggered animationDelay. Non-text React elements are cloned
|
|
24
|
+
* with their children processed recursively.
|
|
18
25
|
*/
|
|
26
|
+
export function TypingInner({ children, baseDelay, charDelay, playKey, }) {
|
|
27
|
+
let charIndex = 0;
|
|
28
|
+
function processNode(node) {
|
|
29
|
+
if (typeof node === "string") {
|
|
30
|
+
return node.split("").map((char) => {
|
|
31
|
+
const i = charIndex++;
|
|
32
|
+
return (_jsx("span", { className: "animark-typing-char", style: { animationDelay: `${baseDelay + i * charDelay}ms` }, children: char === " " ? "\u00A0" : char }, `${playKey}-${i}`));
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
if (React.isValidElement(node)) {
|
|
36
|
+
const newChildren = React.Children.map(node.props.children, (child) => processNode(child));
|
|
37
|
+
return React.cloneElement(node, {}, newChildren);
|
|
38
|
+
}
|
|
39
|
+
if (Array.isArray(node)) {
|
|
40
|
+
return node.map((child, i) => (_jsx(React.Fragment, { children: processNode(child) }, i)));
|
|
41
|
+
}
|
|
42
|
+
return node;
|
|
43
|
+
}
|
|
44
|
+
return _jsx(_Fragment, { children: React.Children.map(children, (child) => processNode(child)) });
|
|
45
|
+
}
|
|
46
|
+
// ── Words helper ──────────────────────────────────────────────────────────────
|
|
47
|
+
/**
|
|
48
|
+
* Splits every text node into individual word <span>s with staggered delays.
|
|
49
|
+
* Preserves non-text React elements (bold, italic, links, etc.) as atomic units
|
|
50
|
+
* that animate in as a single "word".
|
|
51
|
+
*
|
|
52
|
+
* Each word gets:
|
|
53
|
+
* - className="animark-word" → picks up the CSS keyframe
|
|
54
|
+
* - animationDelay → per-word stagger
|
|
55
|
+
* - animationDuration → passed from config
|
|
56
|
+
*/
|
|
57
|
+
export function WordsInner({ children, baseDelay, wordDelay, duration, playKey, }) {
|
|
58
|
+
let wordIndex = 0;
|
|
59
|
+
function wordSpan(content, key) {
|
|
60
|
+
const i = wordIndex++;
|
|
61
|
+
return (_jsx("span", { className: "animark-word", style: {
|
|
62
|
+
animationDelay: `${baseDelay + i * wordDelay}ms`,
|
|
63
|
+
animationDuration: `${duration}ms`,
|
|
64
|
+
}, children: content }, key));
|
|
65
|
+
}
|
|
66
|
+
function processNode(node) {
|
|
67
|
+
// Plain text — split on whitespace boundaries, emit word + space spans
|
|
68
|
+
if (typeof node === "string") {
|
|
69
|
+
// tokenise: keep the spaces so layout is preserved
|
|
70
|
+
const tokens = node.split(/(\s+)/);
|
|
71
|
+
return tokens.map((token, idx) => {
|
|
72
|
+
if (/^\s+$/.test(token)) {
|
|
73
|
+
// pure whitespace — render as-is (not animated, just a space)
|
|
74
|
+
return _jsx("span", { children: token }, `${playKey}-ws-${idx}`);
|
|
75
|
+
}
|
|
76
|
+
if (token === "")
|
|
77
|
+
return null;
|
|
78
|
+
return wordSpan(token, `${playKey}-w-${wordIndex}`);
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
// React element (e.g. <strong>, <em>, <a>) — treat the whole element as
|
|
82
|
+
// one animating unit so inline markup stays intact
|
|
83
|
+
if (React.isValidElement(node)) {
|
|
84
|
+
return wordSpan(node, `${playKey}-el-${wordIndex}`);
|
|
85
|
+
}
|
|
86
|
+
if (Array.isArray(node)) {
|
|
87
|
+
return node.map((child, i) => (_jsx(React.Fragment, { children: processNode(child) }, i)));
|
|
88
|
+
}
|
|
89
|
+
return node;
|
|
90
|
+
}
|
|
91
|
+
return _jsx(_Fragment, { children: React.Children.map(children, (child) => processNode(child)) });
|
|
92
|
+
}
|
|
93
|
+
// ── Main wrapper ──────────────────────────────────────────────────────────────
|
|
19
94
|
export const CSSAnimatedWrapper = ({ animation, children, className = "", style = {}, }) => {
|
|
20
95
|
const id = useId();
|
|
21
96
|
const { playCount, registerBlock, unregisterBlock } = useAnimarkContext();
|
|
22
97
|
const duration = animation.duration ?? 500;
|
|
23
98
|
const delay = animation.delay ?? 0;
|
|
24
|
-
|
|
99
|
+
const charDelay = animation.stagger !== 0 ? animation.stagger : 30;
|
|
100
|
+
const wordDelay = animation.stagger !== 0 ? animation.stagger : 80;
|
|
25
101
|
useEffect(() => {
|
|
26
102
|
registerBlock(id, delay, duration);
|
|
27
103
|
return () => unregisterBlock(id);
|
|
28
104
|
}, [id, delay, duration, registerBlock, unregisterBlock]);
|
|
105
|
+
// ── Typing — character-by-character reveal ──────────────────────────────────
|
|
106
|
+
if (animation.type === "typing") {
|
|
107
|
+
return (_jsx("div", { className: `animark-wrapper animark-typing ${className}`.trim(), style: style, children: _jsx(TypingInner, { baseDelay: delay, charDelay: charDelay, playKey: playCount, children: children }) }, playCount));
|
|
108
|
+
}
|
|
109
|
+
// ── Words — word-by-word reveal ─────────────────────────────────────────────
|
|
110
|
+
if (animation.type === "words") {
|
|
111
|
+
return (_jsx("div", { className: `animark-wrapper animark-words ${className}`.trim(), style: style, children: _jsx(WordsInner, { baseDelay: delay, wordDelay: wordDelay, duration: duration, playKey: playCount, children: children }) }, playCount));
|
|
112
|
+
}
|
|
113
|
+
// ── Highlight — inline span so it wraps across lines ─────────────────────────
|
|
114
|
+
if (animation.type === "highlight") {
|
|
115
|
+
return (_jsx("span", { className: `animark-highlight ${className}`.trim(), style: {
|
|
116
|
+
"--highlight-duration": `${duration}ms`,
|
|
117
|
+
"--highlight-delay": `${delay}ms`,
|
|
118
|
+
...style,
|
|
119
|
+
}, children: children }, playCount));
|
|
120
|
+
}
|
|
121
|
+
// ── All other animation types ───────────────────────────────────────────────
|
|
29
122
|
const animClass = getAnimationClass(animation);
|
|
30
|
-
return (
|
|
31
|
-
// key={playCount} forces React to remount this element on every replay,
|
|
32
|
-
// which restarts the CSS animation from the beginning.
|
|
33
|
-
_jsx("div", { className: `animark-wrapper ${animClass} ${className}`.trim(), style: {
|
|
123
|
+
return (_jsx("div", { className: `animark-wrapper ${animClass} ${className}`.trim(), style: {
|
|
34
124
|
animationDuration: `${duration}ms`,
|
|
35
125
|
animationDelay: `${delay}ms`,
|
|
36
126
|
...style,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CSSAnimatedWrapper.js","sourceRoot":"","sources":["../src/CSSAnimatedWrapper.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,
|
|
1
|
+
{"version":3,"file":"CSSAnimatedWrapper.js","sourceRoot":"","sources":["../src/CSSAnimatedWrapper.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MotionAnimatedWrapper.d.ts","sourceRoot":"","sources":["../src/MotionAnimatedWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"MotionAnimatedWrapper.d.ts","sourceRoot":"","sources":["../src/MotionAnimatedWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAIpD,UAAU,kBAAkB;IAC1B,SAAS,EAAE,eAAe,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8SD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6C9D,CAAC"}
|
|
@@ -1,73 +1,249 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useEffect, useId } from "react";
|
|
3
|
+
import React, { useEffect, useId } from "react";
|
|
4
4
|
import { motion, useAnimation } from "framer-motion";
|
|
5
5
|
import { useAnimarkContext } from "./AnimarkContext";
|
|
6
6
|
function buildVariants(animation) {
|
|
7
7
|
const dir = animation.direction ?? "up";
|
|
8
8
|
const duration = (animation.duration ?? 500) / 1000;
|
|
9
|
+
const delay = (animation.delay ?? 0) / 1000;
|
|
10
|
+
const transition = { duration, delay };
|
|
9
11
|
switch (animation.type) {
|
|
10
12
|
case "fade":
|
|
11
13
|
return {
|
|
12
14
|
hidden: { opacity: 0 },
|
|
13
|
-
visible: { opacity: 1, transition
|
|
15
|
+
visible: { opacity: 1, transition },
|
|
14
16
|
};
|
|
15
17
|
case "slide": {
|
|
16
18
|
const sign = dir === "right" || dir === "down" ? -1 : 1;
|
|
17
19
|
if (dir === "left" || dir === "right") {
|
|
18
20
|
return {
|
|
19
21
|
hidden: { opacity: 0, x: sign * 24 },
|
|
20
|
-
visible: { opacity: 1, x: 0, transition
|
|
22
|
+
visible: { opacity: 1, x: 0, transition },
|
|
21
23
|
};
|
|
22
24
|
}
|
|
23
25
|
return {
|
|
24
26
|
hidden: { opacity: 0, y: sign * 24 },
|
|
25
|
-
visible: { opacity: 1, y: 0, transition
|
|
27
|
+
visible: { opacity: 1, y: 0, transition },
|
|
26
28
|
};
|
|
27
29
|
}
|
|
28
30
|
case "scale":
|
|
29
31
|
return {
|
|
30
32
|
hidden: { opacity: 0, scale: 0.88 },
|
|
31
|
-
visible: { opacity: 1, scale: 1, transition
|
|
33
|
+
visible: { opacity: 1, scale: 1, transition },
|
|
32
34
|
};
|
|
33
35
|
case "move": {
|
|
34
36
|
const sign = dir === "right" || dir === "down" ? -1 : 1;
|
|
35
37
|
if (dir === "left" || dir === "right") {
|
|
36
38
|
return {
|
|
37
39
|
hidden: { x: sign * 12 },
|
|
38
|
-
visible: { x: 0, transition
|
|
40
|
+
visible: { x: 0, transition },
|
|
39
41
|
};
|
|
40
42
|
}
|
|
41
43
|
return {
|
|
42
44
|
hidden: { y: sign * 12 },
|
|
43
|
-
visible: { y: 0, transition
|
|
45
|
+
visible: { y: 0, transition },
|
|
44
46
|
};
|
|
45
47
|
}
|
|
48
|
+
case "blur":
|
|
49
|
+
return {
|
|
50
|
+
hidden: { opacity: 0, filter: "blur(12px)" },
|
|
51
|
+
visible: { opacity: 1, filter: "blur(0px)", transition },
|
|
52
|
+
};
|
|
53
|
+
case "bounce":
|
|
54
|
+
return {
|
|
55
|
+
hidden: { opacity: 0, scale: 0.3, y: 40 },
|
|
56
|
+
visible: {
|
|
57
|
+
opacity: 1,
|
|
58
|
+
scale: 1,
|
|
59
|
+
y: 0,
|
|
60
|
+
transition: {
|
|
61
|
+
delay,
|
|
62
|
+
type: "spring",
|
|
63
|
+
stiffness: 300,
|
|
64
|
+
damping: 15,
|
|
65
|
+
},
|
|
66
|
+
},
|
|
67
|
+
};
|
|
68
|
+
case "flip":
|
|
69
|
+
return {
|
|
70
|
+
hidden: { opacity: 0, rotateX: 80 },
|
|
71
|
+
visible: { opacity: 1, rotateX: 0, transition },
|
|
72
|
+
};
|
|
73
|
+
case "glitch":
|
|
74
|
+
return {
|
|
75
|
+
hidden: { opacity: 0 },
|
|
76
|
+
visible: {
|
|
77
|
+
opacity: [0, 1, 1, 0.7, 1, 0.5, 1],
|
|
78
|
+
x: [0, -6, 6, -3, 4, -2, 0],
|
|
79
|
+
skewX: [0, 4, -4, 2, -2, 1, 0],
|
|
80
|
+
filter: [
|
|
81
|
+
"hue-rotate(0deg)",
|
|
82
|
+
"hue-rotate(90deg)",
|
|
83
|
+
"hue-rotate(-90deg)",
|
|
84
|
+
"hue-rotate(45deg)",
|
|
85
|
+
"hue-rotate(-45deg)",
|
|
86
|
+
"hue-rotate(20deg)",
|
|
87
|
+
"hue-rotate(0deg)",
|
|
88
|
+
],
|
|
89
|
+
transition: {
|
|
90
|
+
delay,
|
|
91
|
+
duration,
|
|
92
|
+
times: [0, 0.1, 0.25, 0.45, 0.6, 0.8, 1],
|
|
93
|
+
ease: "linear",
|
|
94
|
+
},
|
|
95
|
+
},
|
|
96
|
+
};
|
|
97
|
+
// typing + highlight + words handled as dedicated components below
|
|
98
|
+
case "typing":
|
|
99
|
+
case "words":
|
|
100
|
+
case "highlight":
|
|
101
|
+
return {
|
|
102
|
+
hidden: { opacity: 0 },
|
|
103
|
+
visible: { opacity: 1, transition },
|
|
104
|
+
};
|
|
46
105
|
default:
|
|
47
106
|
return {
|
|
48
107
|
hidden: { opacity: 0 },
|
|
49
|
-
visible: { opacity: 1, transition
|
|
108
|
+
visible: { opacity: 1, transition },
|
|
50
109
|
};
|
|
51
110
|
}
|
|
52
111
|
}
|
|
112
|
+
// ── Highlight ─────────────────────────────────────────────────────────────────
|
|
113
|
+
function MotionHighlight({ animation, children, className }) {
|
|
114
|
+
const { playCount } = useAnimarkContext();
|
|
115
|
+
const duration = animation.duration ?? 600;
|
|
116
|
+
const delay = animation.delay ?? 0;
|
|
117
|
+
return (_jsx("span", { className: `animark-highlight ${className ?? ""}`.trim(), style: {
|
|
118
|
+
"--highlight-duration": `${duration}ms`,
|
|
119
|
+
"--highlight-delay": `${delay}ms`,
|
|
120
|
+
}, children: children }, playCount));
|
|
121
|
+
}
|
|
122
|
+
// ── Typing ────────────────────────────────────────────────────────────────────
|
|
123
|
+
function MotionTyping({ animation, children, className }) {
|
|
124
|
+
const controls = useAnimation();
|
|
125
|
+
const { playCount } = useAnimarkContext();
|
|
126
|
+
const delay = (animation.delay ?? 0) / 1000;
|
|
127
|
+
const charDelay = ((animation.stagger !== 0 ? animation.stagger : 30)) / 1000;
|
|
128
|
+
useEffect(() => {
|
|
129
|
+
controls.set("hidden");
|
|
130
|
+
controls.start("visible");
|
|
131
|
+
}, [playCount, controls]);
|
|
132
|
+
const containerVariants = {
|
|
133
|
+
hidden: {},
|
|
134
|
+
visible: {
|
|
135
|
+
transition: {
|
|
136
|
+
delay,
|
|
137
|
+
staggerChildren: charDelay,
|
|
138
|
+
},
|
|
139
|
+
},
|
|
140
|
+
};
|
|
141
|
+
const charVariants = {
|
|
142
|
+
hidden: { opacity: 0, y: 6 },
|
|
143
|
+
visible: { opacity: 1, y: 0, transition: { duration: 0.08 } },
|
|
144
|
+
};
|
|
145
|
+
function wrapChars(node) {
|
|
146
|
+
if (typeof node === "string") {
|
|
147
|
+
return node.split("").map((char, i) => (_jsx(motion.span, { variants: charVariants, style: { display: "inline-block" }, children: char === " " ? "\u00A0" : char }, i)));
|
|
148
|
+
}
|
|
149
|
+
if (React.isValidElement(node)) {
|
|
150
|
+
const newChildren = React.Children.map(node.props.children, wrapChars);
|
|
151
|
+
return React.cloneElement(node, {}, newChildren);
|
|
152
|
+
}
|
|
153
|
+
if (Array.isArray(node)) {
|
|
154
|
+
return node.map((child, i) => (_jsx(React.Fragment, { children: wrapChars(child) }, i)));
|
|
155
|
+
}
|
|
156
|
+
return node;
|
|
157
|
+
}
|
|
158
|
+
return (_jsx(motion.div, { className: `animark-wrapper ${className ?? ""}`.trim(), variants: containerVariants, initial: "hidden", animate: controls, children: React.Children.map(children, (child) => wrapChars(child)) }));
|
|
159
|
+
}
|
|
160
|
+
// ── Words ─────────────────────────────────────────────────────────────────────
|
|
161
|
+
/**
|
|
162
|
+
* MotionWords — word-by-word reveal using Framer Motion staggerChildren.
|
|
163
|
+
*
|
|
164
|
+
* Each text node is tokenised into words. React elements (bold, italic, links)
|
|
165
|
+
* animate as a single word unit so markup is never broken.
|
|
166
|
+
*/
|
|
167
|
+
function MotionWords({ animation, children, className }) {
|
|
168
|
+
const controls = useAnimation();
|
|
169
|
+
const { playCount } = useAnimarkContext();
|
|
170
|
+
const delay = (animation.delay ?? 0) / 1000;
|
|
171
|
+
const wordDelay = ((animation.stagger !== 0 ? animation.stagger : 80)) / 1000;
|
|
172
|
+
const duration = (animation.duration ?? 500) / 1000;
|
|
173
|
+
useEffect(() => {
|
|
174
|
+
controls.set("hidden");
|
|
175
|
+
controls.start("visible");
|
|
176
|
+
}, [playCount, controls]);
|
|
177
|
+
const containerVariants = {
|
|
178
|
+
hidden: {},
|
|
179
|
+
visible: {
|
|
180
|
+
transition: {
|
|
181
|
+
delay,
|
|
182
|
+
staggerChildren: wordDelay,
|
|
183
|
+
},
|
|
184
|
+
},
|
|
185
|
+
};
|
|
186
|
+
const wordVariants = {
|
|
187
|
+
hidden: { opacity: 0, y: 10, filter: "blur(3px)" },
|
|
188
|
+
visible: {
|
|
189
|
+
opacity: 1,
|
|
190
|
+
y: 0,
|
|
191
|
+
filter: "blur(0px)",
|
|
192
|
+
transition: {
|
|
193
|
+
duration,
|
|
194
|
+
ease: [0.22, 1, 0.36, 1],
|
|
195
|
+
},
|
|
196
|
+
},
|
|
197
|
+
};
|
|
198
|
+
function wrapWords(node) {
|
|
199
|
+
if (typeof node === "string") {
|
|
200
|
+
const tokens = node.split(/(\s+)/);
|
|
201
|
+
return tokens.map((token, idx) => {
|
|
202
|
+
if (/^\s+$/.test(token)) {
|
|
203
|
+
return _jsx("span", { children: token }, `ws-${idx}`);
|
|
204
|
+
}
|
|
205
|
+
if (token === "")
|
|
206
|
+
return null;
|
|
207
|
+
return (_jsx(motion.span, { variants: wordVariants, style: { display: "inline-block" }, children: token }, `w-${idx}`));
|
|
208
|
+
});
|
|
209
|
+
}
|
|
210
|
+
// Inline React element — treat as one animating word
|
|
211
|
+
if (React.isValidElement(node)) {
|
|
212
|
+
return (_jsx(motion.span, { variants: wordVariants, style: { display: "inline-block" }, children: node }, "el"));
|
|
213
|
+
}
|
|
214
|
+
if (Array.isArray(node)) {
|
|
215
|
+
return node.map((child, i) => (_jsx(React.Fragment, { children: wrapWords(child) }, i)));
|
|
216
|
+
}
|
|
217
|
+
return node;
|
|
218
|
+
}
|
|
219
|
+
return (_jsx(motion.div, { className: `animark-wrapper animark-words ${className ?? ""}`.trim(), variants: containerVariants, initial: "hidden", animate: controls, children: React.Children.map(children, (child) => wrapWords(child)) }));
|
|
220
|
+
}
|
|
221
|
+
// ── Main export ───────────────────────────────────────────────────────────────
|
|
53
222
|
export const MotionAnimatedWrapper = ({ animation, children, className = "", }) => {
|
|
54
223
|
const id = useId();
|
|
55
224
|
const { playCount, registerBlock, unregisterBlock } = useAnimarkContext();
|
|
56
225
|
const controls = useAnimation();
|
|
57
226
|
const duration = animation.duration ?? 500;
|
|
58
227
|
const delay = animation.delay ?? 0;
|
|
59
|
-
const delaySeconds = delay / 1000;
|
|
60
|
-
// Register with the timeline
|
|
61
228
|
useEffect(() => {
|
|
62
229
|
registerBlock(id, delay, duration);
|
|
63
230
|
return () => unregisterBlock(id);
|
|
64
231
|
}, [id, delay, duration, registerBlock, unregisterBlock]);
|
|
65
|
-
//
|
|
232
|
+
// ✅ All hooks run unconditionally before any early returns
|
|
66
233
|
useEffect(() => {
|
|
67
234
|
controls.set("hidden");
|
|
68
235
|
controls.start("visible");
|
|
69
236
|
}, [playCount, controls]);
|
|
237
|
+
if (animation.type === "typing") {
|
|
238
|
+
return _jsx(MotionTyping, { animation: animation, className: className, children: children });
|
|
239
|
+
}
|
|
240
|
+
if (animation.type === "words") {
|
|
241
|
+
return _jsx(MotionWords, { animation: animation, className: className, children: children });
|
|
242
|
+
}
|
|
243
|
+
if (animation.type === "highlight") {
|
|
244
|
+
return _jsx(MotionHighlight, { animation: animation, className: className, children: children });
|
|
245
|
+
}
|
|
70
246
|
const variants = buildVariants(animation);
|
|
71
|
-
return (_jsx(motion.div, { className: `animark-wrapper ${className}`.trim(), variants: variants, initial: "hidden", animate: controls,
|
|
247
|
+
return (_jsx(motion.div, { className: `animark-wrapper ${className}`.trim(), variants: variants, initial: "hidden", animate: controls, children: children }));
|
|
72
248
|
};
|
|
73
249
|
//# sourceMappingURL=MotionAnimatedWrapper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MotionAnimatedWrapper.js","sourceRoot":"","sources":["../src/MotionAnimatedWrapper.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,
|
|
1
|
+
{"version":3,"file":"MotionAnimatedWrapper.js","sourceRoot":"","sources":["../src/MotionAnimatedWrapper.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/animark.css
CHANGED
|
@@ -86,4 +86,84 @@
|
|
|
86
86
|
.animark-move-up { animation-name: animark-move-up; }
|
|
87
87
|
.animark-move-down { animation-name: animark-move-down; }
|
|
88
88
|
.animark-move-left { animation-name: animark-move-left; }
|
|
89
|
-
.animark-move-right { animation-name: animark-move-right; }
|
|
89
|
+
.animark-move-right { animation-name: animark-move-right; }
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
/* ─── Blur in ───────────────────────────────────────────────────────────────── */
|
|
94
|
+
@keyframes animark-blur-in {
|
|
95
|
+
from { opacity: 0; filter: blur(12px); }
|
|
96
|
+
to { opacity: 1; filter: blur(0px); }
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* ─── Bounce ────────────────────────────────────────────────────────────────── */
|
|
100
|
+
@keyframes animark-bounce-in {
|
|
101
|
+
0% { opacity: 0; transform: scale(0.3) translateY(40px); }
|
|
102
|
+
50% { opacity: 1; transform: scale(1.08) translateY(-8px); }
|
|
103
|
+
70% { transform: scale(0.96) translateY(4px); }
|
|
104
|
+
100% { opacity: 1; transform: scale(1) translateY(0); }
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* ─── Flip ──────────────────────────────────────────────────────────────────── */
|
|
108
|
+
@keyframes animark-flip-in {
|
|
109
|
+
from { opacity: 0; transform: perspective(400px) rotateX(80deg); }
|
|
110
|
+
to { opacity: 1; transform: perspective(400px) rotateX(0deg); }
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/* ─── Glitch ────────────────────────────────────────────────────────────────── */
|
|
114
|
+
@keyframes animark-glitch-in {
|
|
115
|
+
0% { opacity: 0; clip-path: inset(80% 0 0 0); transform: translate(-4px, 2px); }
|
|
116
|
+
10% { opacity: 1; clip-path: inset(10% 0 70% 0); transform: translate( 4px, -2px); }
|
|
117
|
+
20% { clip-path: inset(60% 0 20% 0); transform: translate(-3px, 1px); }
|
|
118
|
+
30% { clip-path: inset(0% 0 80% 0); transform: translate( 3px, -1px); }
|
|
119
|
+
40% { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 2px); }
|
|
120
|
+
60% { clip-path: inset(20% 0 60% 0); transform: translate( 2px, -2px); }
|
|
121
|
+
80% { clip-path: inset(0 0 0 0); transform: translate(-1px, 1px); }
|
|
122
|
+
100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate(0, 0); }
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* ─── Highlight ─────────────────────────────────────────────────────────────── */
|
|
126
|
+
@keyframes animark-highlight-sweep {
|
|
127
|
+
from { background-size: 0% 100%; }
|
|
128
|
+
to { background-size: 100% 100%; }
|
|
129
|
+
}
|
|
130
|
+
.animark-highlight > * {
|
|
131
|
+
display: inline;
|
|
132
|
+
background: linear-gradient(yellow, yellow) no-repeat;
|
|
133
|
+
background-size: 0% 100%;
|
|
134
|
+
-webkit-box-decoration-break: clone;
|
|
135
|
+
box-decoration-break: clone;
|
|
136
|
+
padding: 0 0.12em;
|
|
137
|
+
animation: animark-highlight-sweep
|
|
138
|
+
var(--highlight-duration, 600ms)
|
|
139
|
+
ease-out
|
|
140
|
+
var(--highlight-delay, 0ms)
|
|
141
|
+
forwards;
|
|
142
|
+
}
|
|
143
|
+
/* ─── Typing (character stagger handled in JS, but this is the char reveal) ─── */
|
|
144
|
+
@keyframes animark-char-appear {
|
|
145
|
+
from { opacity: 0; transform: translateY(6px); }
|
|
146
|
+
to { opacity: 1; transform: translateY(0); }
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/* ─── Utility classes ───────────────────────────────────────────────────────── */
|
|
150
|
+
|
|
151
|
+
.animark-blur { animation-name: animark-blur-in; }
|
|
152
|
+
.animark-bounce { animation-name: animark-bounce-in; }
|
|
153
|
+
.animark-flip { animation-name: animark-flip-in; }
|
|
154
|
+
.animark-glitch { animation-name: animark-glitch-in; }
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
/* Typing wrapper — overflow hidden so invisible chars don't shift layout */
|
|
158
|
+
.animark-typing {
|
|
159
|
+
display: inline-block;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.animark-typing-char {
|
|
163
|
+
display: inline-block;
|
|
164
|
+
opacity: 0;
|
|
165
|
+
animation-name: animark-char-appear;
|
|
166
|
+
animation-fill-mode: both;
|
|
167
|
+
animation-timing-function: ease-out;
|
|
168
|
+
animation-duration: 80ms;
|
|
169
|
+
}
|