Animated-gradient NPM

Animated Gradient

A powerful and customizable React component that creates smooth, animated gradients for modern web applications. Perfect for creating dynamic, eye-catching backgrounds and UI elements.

✨ Features

🎨 Support for both RGB and HEX color formats
🔄 Smooth, customizable animations
📐 Linear and radial gradient variants
🎯 Configurable gradient positioning
💪 TypeScript support
🎮 Full control over animation timing
🎯 Fully stylable with standard div props

🚀 Installation

npm install animated-gradient
# or
yarn add animated-gradient

📖 Usage

Basic Example

import { Gradient } from 'animated-gradient';

// Using RGB colors
const RGBExample = () => (
  <Gradient
    colors={[
      [255, 0, 0, 1], // Red
      [0, 255, 0, 1], // Green
      [0, 0, 255, 1], // Blue
    ]}
    timer={3000}
  >
    Content goes here
  </Gradient>
);

// Using HEX colors
const HEXExample = () => (
  <Gradient hexcolors={['ff0000', '00ff00', '0000ff']} timer={3000}>
    Content goes here
  </Gradient>
);

Advanced Example

import { Gradient } from 'animated-gradient';

const AdvancedExample = () => (
  <Gradient
    hexcolors={['ff0000', '00ff00', '0000ff']}
    variant="radial"
    coords={[50, 50]} // Center position
    timer={5000}
    style={{
      width: '300px',
      height: '300px',
      borderRadius: '15px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    }}
  >
    <h1>Dynamic Background</h1>
  </Gradient>
);

📚 Props

Prop	Required	Type	Description
colors	required*	number	Arrays of RGBA color channels (e.g., `[255, 43, 12, 0.5]`)
hexcolors	required*	string[]	Array of HEX color values (e.g., `['ff0000', '009900']`)
variant	optional	'linear' \| 'radial'	Type of gradient. Defaults to 'linear'
vector	optional	number	Direction angle for linear gradient
coords	optional	number[]	Center coordinates x, y for radial gradient
timer	required	number	Animation duration in milliseconds