@gfazioli/mantine-text-animate
Version:
The TextAnimate component allows you to animate text with various effects.
91 lines (88 loc) • 3.54 kB
JavaScript
'use client';
import { createVarsResolver, parseThemeColor, getRadius, polymorphicFactory, useProps, useStyles, Box } from '@mantine/core';
import React from 'react';
import { useSplitFlap } from './use-split-flap.mjs';
import classes from './SplitFlap.module.css.mjs';
const defaultProps = {
animate: true,
speed: 1,
characterSet: "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 ",
flipDuration: 300,
staggerDelay: 80,
delay: 0,
bg: "#1a1a2e",
textColor: "#e0e0e0",
gap: 4,
charWidth: "1.2em",
charHeight: "1.8em",
radius: "4px",
dividerColor: "rgba(0,0,0,0.3)"
};
const varsResolver = createVarsResolver(
(theme, { bg, textColor, gap, flipDuration, speed, charWidth, charHeight, radius, dividerColor }) => ({
root: {
"--text-animate-split-flap-bg": bg ? parseThemeColor({ color: bg, theme }).value : void 0,
"--text-animate-split-flap-color": textColor ? parseThemeColor({ color: textColor, theme }).value : void 0,
"--text-animate-split-flap-gap": gap !== void 0 ? `${gap}px` : void 0,
"--text-animate-split-flap-flip-duration": flipDuration !== void 0 && speed !== void 0 ? `${flipDuration / speed}ms` : flipDuration !== void 0 ? `${flipDuration}ms` : void 0,
"--text-animate-split-flap-char-width": charWidth,
"--text-animate-split-flap-char-height": charHeight,
"--text-animate-split-flap-radius": radius !== void 0 ? getRadius(radius) : void 0,
"--text-animate-split-flap-divider-color": dividerColor ? dividerColor === "transparent" ? "transparent" : parseThemeColor({ color: dividerColor, theme }).value : void 0
}
})
);
const SplitFlap = polymorphicFactory((_props) => {
const props = useProps("SplitFlap", defaultProps, _props);
const {
value,
animate,
speed,
characterSet,
flipDuration,
staggerDelay,
delay,
onCompleted,
bg,
textColor,
gap,
charWidth,
charHeight,
radius,
dividerColor,
classNames,
style,
styles,
unstyled,
vars,
className,
...others
} = props;
const { characters } = useSplitFlap({
value,
animate,
speed,
characterSet,
flipDuration,
staggerDelay,
delay,
onCompleted
});
const getStyles = useStyles({
name: "SplitFlap",
props,
classes,
className,
style,
classNames,
styles,
unstyled,
vars,
varsResolver
});
return /* @__PURE__ */ React.createElement(Box, { ...getStyles("root"), component: "div", "aria-live": "polite", ...others }, characters.map((char, i) => /* @__PURE__ */ React.createElement(Box, { ...getStyles("character"), key: i }, /* @__PURE__ */ React.createElement(Box, { ...getStyles("charTop") }, /* @__PURE__ */ React.createElement("span", { className: classes.charInner }, char.isFlipping ? char.next : char.current)), /* @__PURE__ */ React.createElement(Box, { ...getStyles("charBottom") }, /* @__PURE__ */ React.createElement("span", { className: classes.charInner }, char.current)), char.isFlipping && /* @__PURE__ */ React.createElement(React.Fragment, { key: char.flipKey }, /* @__PURE__ */ React.createElement(Box, { ...getStyles("flapTop") }, /* @__PURE__ */ React.createElement("span", { className: classes.charInner }, char.current)), /* @__PURE__ */ React.createElement(Box, { ...getStyles("flapBottom") }, /* @__PURE__ */ React.createElement("span", { className: classes.charInner }, char.next))))));
});
SplitFlap.classes = classes;
SplitFlap.displayName = "SplitFlap";
export { SplitFlap };
//# sourceMappingURL=SplitFlap.mjs.map