Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-glowing-text) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

demo-react-glowing-text

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 thongdn.it@gmail.com

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