animark-react 0.1.2 → 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 +179 -18
- 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,19 +1,12 @@
|
|
|
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
|
-
// BUG FIX: delay and duration are now passed into buildVariants so they
|
|
7
|
-
// live inside the `visible` transition object. When controls.start("visible")
|
|
8
|
-
// is called, Framer Motion reads the transition from the variant itself —
|
|
9
|
-
// it ignores any `transition` prop set on the <motion.div>. Previously
|
|
10
|
-
// delay was set only on the component prop and was therefore silently dropped.
|
|
11
6
|
function buildVariants(animation) {
|
|
12
7
|
const dir = animation.direction ?? "up";
|
|
13
|
-
// Convert ms → seconds for Framer Motion
|
|
14
8
|
const duration = (animation.duration ?? 500) / 1000;
|
|
15
9
|
const delay = (animation.delay ?? 0) / 1000;
|
|
16
|
-
// Shared transition object — both duration AND delay live here
|
|
17
10
|
const transition = { duration, delay };
|
|
18
11
|
switch (animation.type) {
|
|
19
12
|
case "fade":
|
|
@@ -22,8 +15,6 @@ function buildVariants(animation) {
|
|
|
22
15
|
visible: { opacity: 1, transition },
|
|
23
16
|
};
|
|
24
17
|
case "slide": {
|
|
25
|
-
// "up" / "left" → content starts offset in the positive direction
|
|
26
|
-
// "down" / "right" → content starts offset in the negative direction
|
|
27
18
|
const sign = dir === "right" || dir === "down" ? -1 : 1;
|
|
28
19
|
if (dir === "left" || dir === "right") {
|
|
29
20
|
return {
|
|
@@ -54,6 +45,63 @@ function buildVariants(animation) {
|
|
|
54
45
|
visible: { y: 0, transition },
|
|
55
46
|
};
|
|
56
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
|
+
};
|
|
57
105
|
default:
|
|
58
106
|
return {
|
|
59
107
|
hidden: { opacity: 0 },
|
|
@@ -61,28 +109,141 @@ function buildVariants(animation) {
|
|
|
61
109
|
};
|
|
62
110
|
}
|
|
63
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 ───────────────────────────────────────────────────────────────
|
|
64
222
|
export const MotionAnimatedWrapper = ({ animation, children, className = "", }) => {
|
|
65
223
|
const id = useId();
|
|
66
224
|
const { playCount, registerBlock, unregisterBlock } = useAnimarkContext();
|
|
67
225
|
const controls = useAnimation();
|
|
68
226
|
const duration = animation.duration ?? 500;
|
|
69
227
|
const delay = animation.delay ?? 0;
|
|
70
|
-
// Register with the timeline so the progress bar knows the full duration
|
|
71
228
|
useEffect(() => {
|
|
72
229
|
registerBlock(id, delay, duration);
|
|
73
230
|
return () => unregisterBlock(id);
|
|
74
231
|
}, [id, delay, duration, registerBlock, unregisterBlock]);
|
|
75
|
-
//
|
|
76
|
-
// controls.start("visible") will now correctly pick up both duration
|
|
77
|
-
// and delay from inside the variant's transition object.
|
|
232
|
+
// ✅ All hooks run unconditionally before any early returns
|
|
78
233
|
useEffect(() => {
|
|
79
234
|
controls.set("hidden");
|
|
80
235
|
controls.start("visible");
|
|
81
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
|
+
}
|
|
82
246
|
const variants = buildVariants(animation);
|
|
83
|
-
return (
|
|
84
|
-
// No `transition` prop here — all timing lives inside the variants so
|
|
85
|
-
// controls.start() picks them up correctly.
|
|
86
|
-
_jsx(motion.div, { className: `animark-wrapper ${className}`.trim(), variants: variants, initial: "hidden", animate: controls, children: children }));
|
|
247
|
+
return (_jsx(motion.div, { className: `animark-wrapper ${className}`.trim(), variants: variants, initial: "hidden", animate: controls, children: children }));
|
|
87
248
|
};
|
|
88
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
|
+
}
|