https://github.com/ompreetham/starfield
An interactive starfield animation built with NextJS and HTML canvas.
https://github.com/ompreetham/starfield
customization interactive nextjs react starfield tailwindcss typescript v0 vercel
Last synced: about 1 month ago
JSON representation
An interactive starfield animation built with NextJS and HTML canvas.
- Host: GitHub
- URL: https://github.com/ompreetham/starfield
- Owner: OmPreetham
- License: mit
- Created: 2025-02-08T03:56:11.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-03-14T01:00:45.000Z (7 months ago)
- Last Synced: 2025-03-14T02:25:09.919Z (7 months ago)
- Topics: customization, interactive, nextjs, react, starfield, tailwindcss, typescript, v0, vercel
- Language: TypeScript
- Homepage: https://starfield.ompreetham.com
- Size: 37 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Starfield
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.
## Features
- 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
## Installation
To get started, clone the repository and install dependencies:
```bash
git clone https://github.com/OmPreetham/starfield.git
cd starfield
npm install
```
## Usage
Once the dependencies are installed, run the project locally with:
```bash
npm run dev
```
Open your browser and go to [http://localhost:3000](http://localhost:3000) to view the interactive starfield.
## Customization
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.
## 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.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.