@arolariu/components
Version:
A collection of reusable components for React applications, built as ESM & CJS modules with tree shake, minify and bundler optimizations enabled, for the lowest bundle size (import cost)! 😍
49 lines (48 loc) • 2.33 kB
JavaScript
"use client";
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__ from "motion/react";
import * as __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__ from "../../lib/utils.js";
const GradientText = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.forwardRef(({ text, className, gradient = "linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)", neon = false, transition = {
duration: 50,
repeat: 1 / 0,
ease: "linear"
}, ...props }, ref)=>{
const baseStyle = {
backgroundImage: gradient
};
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("span", {
ref: ref,
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("relative inline-block", className),
...props,
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion.span, {
className: "m-0 text-transparent bg-clip-text bg-[length:700%_100%] bg-[position:0%_0%]",
style: baseStyle,
initial: {
backgroundPosition: "0% 0%"
},
animate: {
backgroundPosition: "500% 100%"
},
transition: transition,
children: text
}),
neon && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion.span, {
className: "m-0 absolute top-0 left-0 text-transparent bg-clip-text blur-[8px] mix-blend-plus-lighter bg-[length:700%_100%] bg-[position:0%_0%]",
style: baseStyle,
initial: {
backgroundPosition: "0% 0%"
},
animate: {
backgroundPosition: "500% 100%"
},
transition: transition,
children: text
})
]
});
});
GradientText.displayName = "GradientText";
export { GradientText };
//# sourceMappingURL=gradient-text.js.map