
Security News
Django Joins curl in Pushing Back on AI Slop Security Reports
Django has updated its security policies to reject AI-generated vulnerability reports that include fabricated or unverifiable content.
react-gradient-animation
Advanced tools
A highly customizable, animated gradient background component for React applications.
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;
GradientBackground
component should be placed within a container that has:
position: relative
style to ensure the canvas overlays correctly.style
prop or use the className
prop to apply CSS classes.shapes
prop. The particles will cycle through the provided shapes.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.
git checkout -b feature/YourFeature
).git commit -am 'Add some feature'
).git push origin feature/YourFeature
).This project is licensed under the MIT License - see the LICENSE file for details.
GradientBackground
React component.react
is a peer dependency. Ensure it is installed in your project.Happy coding!
FAQs
A highly customizable, animated gradient background component for React applications.
The npm package react-gradient-animation receives a total of 35 weekly downloads. As such, react-gradient-animation popularity was classified as not popular.
We found that react-gradient-animation demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Django has updated its security policies to reject AI-generated vulnerability reports that include fabricated or unverifiable content.
Security News
ECMAScript 2025 introduces Iterator Helpers, Set methods, JSON modules, and more in its latest spec update approved by Ecma in June 2025.
Security News
A new Node.js homepage button linking to paid support for EOL versions has sparked a heated discussion among contributors and the wider community.