Code Vibes is a mesmerizing music visualizer that combines the power of Tailwind CSS, Shadertoy-inspired shaders, Next.js, p5.js, and mathematical functions to create stunning audio visualizations.
- Real-time music visualization synchronized with audio playback
- Beautiful and interactive graphical effects created using shaders
- Responsive design with dynamic layout using Tailwind CSS
- Seamless integration with Next.js for server-side rendering and routing
- Powerful p5.js library for creating interactive graphics and animations
- Mathematical functions and algorithms to generate unique visual patterns
To run Code Vibes on your local machine, follow these steps:
- Clone the repository:
git clone https://github.com/your-username/code-vibes.git
- Navigate to the project directory:
cd code-vibes
- Install the dependencies:
npm install
oryarn install
- Start the development server:
npm run dev
oryarn dev
- Open your browser and visit:
http://localhost:3000
- Press the play button to start playing the default music
- Upload your own music file using the upload button
- Experience the mesmerizing visual effects synced with the music
- Interact with the visuals by moving the mouse or clicking on the screen
- Explore different shaders and effects by customizing the code
Code Vibes provides various customization options to tailor the visual experience:
- Adjust the visual effects by modifying the shaders located in the
shaders
directory - Customize the graphical elements using p5.js functions in the
pages/index.js
file - Modify the layout, styles, and colors using Tailwind CSS utility classes in the
styles
directory
Code Vibes can be easily deployed to your preferred hosting platform. Here are the general steps:
- Build the production-ready application:
npm run build
oryarn build
- Deploy the contents of the
out
directory to your hosting provider - Ensure the hosting environment supports server-side rendering (SSR) for Next.js
For detailed deployment instructions, please refer to the documentation of your chosen hosting platform.
- Tailwind CSS Documentation - learn about Tailwind CSS features and utilities.
- Shadertoy - explore a vast collection of shaders for inspiration.
- Next.js Documentation - learn about Next.js features and API.
- p5.js Reference - refer to the p5.js documentation for graphics and animation functions.
- Mathematical Functions - explore mathematical concepts and algorithms for visual patterns.
Contributions to Code Vibes are welcome! If you encounter any issues or have suggestions for improvement, please submit a GitHub issue or pull request. Let's make Code Vibes even better together!
This project is licensed under the MIT License.