@_gmdev/react-gradient-text

A lightweight React component to render text with CSS gradient colors.

Installation

npm install @_gmdev/react-gradient-text

Usage

import { ReactGradientText } from "@_gmdev/react-gradient-text";

function App() {
  return (
    <ReactGradientText
      text="Hello Gradient!"
      colors={["#ff0000", "#00ff00", "#0000ff"]}
    />
  );
}

Props

Prop	Type	Default	Description
text	string	required	Text to render
colors	string[]	required	Array of CSS color strings for the gradient
direction	string	"to right"	CSS gradient direction (e.g. "45deg")
as	ElementType	"span"	HTML element to render
className	string	undefined	Additional CSS class
style	CSSProperties	undefined	Additional inline styles (merged with gradient)
animation	AnimationType	undefined	Animation triggered on viewport entry (fade-in-*, scramble)
duration	number	500	Animation duration in milliseconds

Animations

Animations are triggered automatically when the element enters the viewport via IntersectionObserver.

Available animations:

• fade-in-up, fade-in-down, fade-in-left, fade-in-right
• fade-in-top-left, fade-in-top-right, fade-in-bottom-left, fade-in-bottom-right
• scramble — characters shuffle progressively until the final text is revealed

Fade-in example

<ReactGradientText
  text="Hello!"
  colors={["#667eea", "#764ba2"]}
  animation="fade-in-up"
  duration={800}
/>

Scramble example

<ReactGradientText
  text="Scramble!"
  colors={["#ff6b6b", "#4ecdc4"]}
  animation="scramble"
  duration={1000}
/>

Examples

Custom direction

<ReactGradientText
  text="Diagonal!"
  colors={["#667eea", "#764ba2"]}
  direction="45deg"
/>

As heading

<ReactGradientText
  text="I am a heading"
  colors={["#f093fb", "#f5576c"]}
  as="h1"
/>

Rainbow

<ReactGradientText
  text="Rainbow Text"
  colors={["#ff0000", "#ff7f00", "#ffff00", "#00ff00", "#0000ff", "#4b0082", "#9400d3"]}
/>

Development

# Install dependencies
npm install

# Run tests
npm test

# Run Storybook
npm run storybook

# Build the library
npm run build

License

MIT