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

Prop Name	Type	Default Value	Description
text (required)	string		The text to be displayed.
animationProps	AnimationProps	undefined	Animation properties from framer-motion.
style	CSSProperties	undefined	Custom styles for the outer container.
textStyle	CSSProperties	undefined	Custom styles for the text.
borderColorStyle	string	"linear-gradient(180deg, #6f7374, #0f1518)"	Gradient for the static text border.
motionBorderColorStyle	string	"linear-gradient(45deg, red, yellow)"	Gradient for the moving glowing effect.
textStrokeWidth	string	"3px"	Stroke width of the text.
radialGradientSize	string	"60px"	Size of the radial gradient effect.

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 [email protected]

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