react-glowing-text/dist/GlowingText.js

The `GlowingText` component is a React functional component using `framer-motion` to create a glowing text effect that reacts to mouse movement like the text "GROK" on x.ai.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { motion } from "framer-motion";
import { useRef, useState } from "react";
const GlowingText = (props) => {
    const [position, setPosition] = useState({ x: 0, y: 0 });
    const textRef = useRef(null);
    const textStrokeWidth = props.textStrokeWidth ?? "3px";
    const handleMouseMove = (e) => {
        if (!textRef.current)
            return;
        const rect = textRef.current.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        setPosition({ x, y });
    };
    return (_jsx("div", { style: {
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            overflow: "hidden",
            background: "black",
            ...props.style,
        }, onMouseMove: handleMouseMove, children: _jsxs(motion.span, { ref: textRef, style: {
                position: "relative",
                textTransform: "uppercase",
                color: "black",
                WebkitTextStroke: `${textStrokeWidth} transparent`,
                background: props.borderColorStyle ??
                    "linear-gradient(180deg, #6f7374, #0f1518)",
                WebkitBackgroundClip: "text",
                ...props.textStyle,
            }, ...props.animationProps, children: [props.text, _jsx(motion.div, { style: {
                        pointerEvents: "none",
                        position: "absolute",
                        inset: 0,
                        maskImage: `radial-gradient(${props.radialGradientSize ?? "60px"} at ${position.x}px ${position.y}px,
                        rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)`,
                        WebkitMaskImage: `radial-gradient(${props.radialGradientSize ?? "60px"} at ${position.x}px ${position.y}px,
                            rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)`,
                    }, children: _jsx("span", { style: {
                            position: "absolute",
                            inset: 0,
                            WebkitTextStroke: `${textStrokeWidth} transparent`,
                            background: props.motionBorderColorStyle ??
                                "linear-gradient(45deg, red, yellow)",
                            WebkitBackgroundClip: "text",
                        }, children: props.text }) })] }) }));
};
export default GlowingText;