@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
49 lines (48 loc) • 1.81 kB
JavaScript
"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { motion } from "motion/react";
import { forwardRef } from "react";
import { cn } from "../../lib/utilities.js";
const GradientText = /*#__PURE__*/ 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__*/ jsxs("span", {
ref: ref,
className: cn("relative inline-block", className),
...props,
children: [
/*#__PURE__*/ jsx(motion.span, {
className: "m-0 bg-[length:700%_100%] bg-clip-text bg-[position:0%_0%] text-transparent",
style: baseStyle,
initial: {
backgroundPosition: "0% 0%"
},
animate: {
backgroundPosition: "500% 100%"
},
transition: transition,
children: text
}),
Boolean(neon) && /*#__PURE__*/ jsx(motion.span, {
className: "absolute top-0 left-0 m-0 bg-[length:700%_100%] bg-clip-text bg-[position:0%_0%] text-transparent mix-blend-plus-lighter blur-[8px]",
style: baseStyle,
initial: {
backgroundPosition: "0% 0%"
},
animate: {
backgroundPosition: "500% 100%"
},
transition: transition,
children: text
})
]
});
});
GradientText.displayName = "GradientText";
export { GradientText };
//# sourceMappingURL=gradient-text.js.map