vigneshshiv / music-visualizer

Music Visualizer built-in with Next.js 13 & JS Circle library and Framer motion animation

Home Page:https://musicvisualizer-next.vercel.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Music Visualizer

Simple Music Visualizer built with TS Particles and Next.js 13.

Preview

image

Tech Stack

Technology Description Link ↘️
Next.js 13 The React Framework https://nextjs.org/
Tailwind CSS Utility-first CSS Framework https://tailwindcss.com/
TS Particles Animated Particles for Background https://particles.js.org/
p5 Code Art JS library for creative code art https://p5js.org/
Framer Motion Motion library for animation https://www.framer.com/motion/
Locomotive Scroll Smooth scrolling library https://github.com/locomotivemtl/locomotive-scroll

Installation

  1. Fork the project. Click on the fork icon in the top right to get started.

  2. Clone the project, you can use the following command:

    git clone https://github.com/<your-github-username>/music-visualizer
  3. Navigate to the project directory

    cd music-visualizer
  4. Install dependencies with yarn install or npm install in both client and server folder

    yarn install
    or
    npm install
  5. Run the development server:

    yarn dev
    or
    npm run dev

Contributing

  • Contributions make the open source community such an amazing place to learn, inspire, and create.
  • Any contributions you make are greatly appreciated.

License

No LICENSE.

About

Music Visualizer built-in with Next.js 13 & JS Circle library and Framer motion animation

https://musicvisualizer-next.vercel.app/


Languages

Language:TypeScript 71.0%Language:JavaScript 21.0%Language:CSS 8.0%