react-stars-particles is a captivating React component that brings a dynamic and interactive galaxy background to your web pages. With stars that are attracted to the mouse pointer and smooth animations, it offers a unique and engaging user experience.
Attract stars with your mouse as you move closer to them, and watch them gracefully return to their original positions when you move away to maintain a balanced cosmic display.
Install react-stars-particles using npm:
npm install react-stars-particles
Integrate react-stars-particles into your React app with ease:
import { Galaxy } from 'react-stars-particles';
function App() {
return (
<div>
<h1>Welcome to My Galaxy</h1>
<Galaxy />
</div>
);
}
export default App;
Customize your galaxy with these adjustable properties:
Name | Description | Type | Default |
---|---|---|---|
quantity |
Set the number of stars in the galaxy | int | 400 |
attract |
Adjust the attraction speed of stars | int | 0.5 |
repulse |
Modify the speed stars return to default | int | 0.2 |
color |
Define the color of the stars | string | "white" |
import { Galaxy } from 'react-stars-particles';
function App() {
return (
<div>
<h1>Welcome to My Galaxy</h1>
<Galaxy />
</div>
);
}
export default App;
import { Galaxy } from 'react-stars-particles';
function App() {
return (
<div>
<h1>Custom Galaxy</h1>
<Galaxy
quantity={200}
attract={0.8}
repulse={0.3}
color="blue"
/>
</div>
);
}
export default App;
This project is licensed under the MIT License. See the LICENSE file for details.
Here's the NPM page associated with this package:
Check out the react-stars-particles showcase:
Explore the react-stars-particles and showcase GitHub repositories: