react-glowing-text v1.0.0

React Glowing Text

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.

Features

• Customizable text content and styles
• Animated glowing effect using framer-motion
• Adjustable text stroke width, gradient colors, and animation properties
• Interactive glow that follows the cursor

Install

npm install react-glowing-text

OR

yarn add react-glowing-text

OR

pnpm add react-glowing-text

Props

Usage

<GlowingText
  text="Glowing Text"
  textStyle={{
    fontSize: "12vw",
    lineHeight: "30vw",
    fontWeight: "bold",
  }}
  textStrokeWidth="0.34vw"
  radialGradientSize="6.9vw"
  borderColorStyle="linear-gradient(0deg, #00162C -2.41%, #002041 95.22%)"
  motionBorderColorStyle="linear-gradient(279.69deg, #710DC0 1.72%, #F890FF 33.95%, #2FE929 52.83%, #0987F5 72.8%, #007BFF 93.83%)"
  // Other animation //
  animationProps={{
    initial: { clipPath: "inset(0 100% 0 0)" },
    animate: { clipPath: "inset(0 0% 0 0)" },
    transition: { duration: 2, ease: "easeOut" },
  }}
/>

License

This component is open-source and available under the MIT license.

Author

GlowingText is developed by Thong Dang. You can contact me at thongdn.it@gmail.com

If you like my project, you can support me or star (like) for it.