An interactive starfield animation built with React and HTML canvas. Customize the appearance and behavior of the stars, control their number, speed, depth, size, and more.
- Dynamic starfield with customizable settings
- Adjust the number of stars, their speed, depth, size, and color
- Influence the starfield with mouse movement
- Simple controls to reset or customize the starfield
- Responsive layout to fit any screen size
- GitHub repository link for easy access to source code
To get started, clone the repository and install dependencies:
git clone https://github.com/OmPreetham/starfield.git
cd starfield
npm installOnce the dependencies are installed, run the project locally with:
npm run devOpen your browser and go to http://localhost:3000 to view the interactive starfield.
The following settings are available for customization:
- Star Count: Number of stars in the field.
- Speed: Speed at which the stars move.
- Max Depth: Maximum depth (distance) of stars.
- Mouse Influence: How much the mouse affects the stars' movement.
- Star Color: The color of the stars.
- Min Size: Minimum size of the stars.
- Max Size: Maximum size of the stars.
Click the CUSTOMIZE button to access the controls.
- Mouse Move: Move the mouse to influence the starfield's motion.
- Reset: Resets the settings to their default values.
- Customize: Toggle the control panel visibility.
This project is licensed under the MIT License - see the LICENSE file for details.