@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
51 lines (50 loc) • 1.8 kB
JavaScript
"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { motion } from "motion/react";
import { cn } from "../../lib/utilities.js";
import gradient_text_module from "./gradient-text.module.js";
import * as __rspack_external_react from "react";
const GradientText = /*#__PURE__*/ __rspack_external_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 = {
"--ac-gradient-text-background": gradient
};
return /*#__PURE__*/ jsxs("span", {
ref: ref,
className: cn(gradient_text_module.root, className),
...props,
children: [
/*#__PURE__*/ jsx(motion.span, {
className: gradient_text_module.text,
style: baseStyle,
initial: {
backgroundPosition: "0% 0%"
},
animate: {
backgroundPosition: "500% 100%"
},
transition: transition,
children: text
}),
neon ? /*#__PURE__*/ jsx(motion.span, {
"aria-hidden": "true",
className: gradient_text_module.neon,
style: baseStyle,
initial: {
backgroundPosition: "0% 0%"
},
animate: {
backgroundPosition: "500% 100%"
},
transition: transition,
children: text
}) : null
]
});
});
GradientText.displayName = "GradientText";
export { GradientText };
//# sourceMappingURL=gradient-text.js.map