A highly customizable, animated gradient background component for React applications.
npm install react-gradient-animation
Or with Yarn:
yarn add react-gradient-animation
To use react-gradient-animation, wrap the GradientBackground component within a container that has a set width and height and a position: relative
style.
import React from "react";
import { GradientBackground } from "react-gradient-animation";
function App() {
return (
<div style={{ position: "relative", width: "100%", height: "500px" }}>
<GradientBackground
count={20}
size={{ min: 500, max: 700, pulse: 0.3 }}
speed={{ x: { min: 0.5, max: 2 }, y: { min: 0.5, max: 2 } }}
colors={{
background: "#1e1e1e",
particles: ["#ff007f", "#7f00ff", "#00ffff"],
}}
blending="overlay"
opacity={{ center: 0.5, edge: 0 }}
skew={-2}
shapes={["c", "s", "t"]}
style={{ opacity: 0.8 }}
/>
{/* Other content */}
</div>
);
}
export default App;
Prop | Type | Default Value | Description |
---|---|---|---|
count | number | 12 | The number of particles (shapes) to animate. |
size | SizeConfig |
{ min: 1000, max: 1200, pulse: 0.5 } |
Configuration for the size of the particles. Includes min, max, and pulse values. |
speed | SpeedConfig |
{ x: { min: 0.6, max: 3 }, y: { min: 0.6, max: 3 } } |
Configuration for the movement speed of particles along the x and y axes. |
colors | ColorsConfig |
{ background: 'transparent', particles: ['#ff681c', '#87ddfe', '#231efe'] } |
Colors for the background and particles. |
blending |
GlobalCompositeOperation or 'none' |
'overlay' | The global composite operation to use for blending particles. |
opacity | OpacityConfig |
{ center: 0.45, edge: 0 } |
Opacity settings for particles. |
skew | number | -1.5 | The skew angle in degrees for the canvas transformation. |
shapes | ShapeType[] |
['c'] | An array of shape types for the particles. |
className | string | '' | Additional CSS classes to apply to the canvas element. |
translateYcorrection | boolean | true | Adjusts the vertical translation to compensate for the skew transformation. |
style | CSSProperties |
{} | Inline styles to apply to the canvas element. |
interface SizeConfig {
min: number;
max: number;
pulse: number;
}
interface SpeedAxisConfig {
min: number;
max: number;
}
interface SpeedConfig {
x: SpeedAxisConfig;
y: SpeedAxisConfig;
}
interface ColorsConfig {
background: string;
particles: string[];
}
interface OpacityConfig {
center: number;
edge: number;
}
type ShapeType = "c" | "s" | "t"; // 'c' for circle, 's' for square, 't' for triangle
import React from "react";
import { GradientBackground } from "react-gradient-animation";
function BasicExample() {
return (
<div style={{ position: "relative", height: "400px" }}>
<GradientBackground />
{/* Your content here */}
</div>
);
}
export default BasicExample;
import React from "react";
import { GradientBackground } from "react-gradient-animation";
function CustomExample() {
return (
<div style={{ position: "relative", width: "100%", height: "600px" }}>
<GradientBackground
count={15}
size={{ min: 800, max: 1000, pulse: 0.4 }}
speed={{ x: { min: 1, max: 2 }, y: { min: 1, max: 2 } }}
colors={{
background: "#0d0d0d",
particles: ["#ff6347", "#1e90ff", "#32cd32"],
}}
blending="screen"
opacity={{ center: 0.6, edge: 0 }}
skew={-3}
shapes={["c", "t"]}
style={{ opacity: 0.9 }}
/>
{/* Your content here */}
</div>
);
}
export default CustomExample;
-
Container Requirements: The
GradientBackground
component should be placed within a container that has:- A set width and height.
-
position: relative
style to ensure the canvas overlays correctly.
-
Styling: You can pass custom styles via the
style
prop or use theclassName
prop to apply CSS classes. -
Shapes: Mix and match different shapes by passing an array to the
shapes
prop. The particles will cycle through the provided shapes. -
Performance Considerations: Higher values for
count
and larger size ranges may impact performance on lower-end devices. Adjust the speed and pulse values to optimize animation smoothness.
Contributions are welcome! Please open an issue or pull request for any bugs, improvements, or feature requests.
- Fork the repository.
- Create your feature branch (
git checkout -b feature/YourFeature
). - Commit your changes (
git commit -am 'Add some feature'
). - Push to the branch (
git push origin feature/YourFeature
). - Open a pull request.
This project is licensed under the MIT License - see the LICENSE file for details.
-
Component:
GradientBackground
React component. - Type Definitions: Fully typed with TypeScript for better developer experience.
- Customization: Highly customizable with various props to adjust the animation to your needs.
-
React:
react
is a peer dependency. Ensure it is installed in your project.
Happy coding!