KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #claude-code #codex #dsh #dsh-plugin #ai-agent #ai-agents #deepseek-harness #agent-skills #macos #cli

Interactive-Particles-Music-Visualizer

★ 87 Open GitHub ↗

Learn how to build audio-reactive visual experiences in Three.js, featuring synchronized sound and dynamic 3D visuals, inspired by ARKx's work for Coala Music's website.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Audio-Reactive Visuals in Three.js

Learn how to create a music visualizer in Three.js, inspired by ARKx's work for Coala Music's website.

![Audio Reactive Particles](https://tympanus.net/codrops/wp-content/uploads/2023/12/feature_particles-visualizer_high.gif)

[Article on Codrops](https://tympanus.net/codrops/?p=74700)

[Demo](https://tympanus.net/Tutorials/ParticlesMusicVisualizer/)

## Installation

Install dependencies:

```
npm install
```

Compile the code for development and start a local server:

```
npm run dev
```

Create the build:

```
npm run build
```

## Credits

- [Coala Music Website](https://coalamusic.com/) by [ARKx](https://arkx.cc)
- [FBO Particles](https://www.youtube.com/watch?v=oLH00MXTqNg) by Yuri Artiukh
- [Threejs](https://threejs.org/)
- [GSAP](https://gsap.com/)
- [WebGL Noise](https://github.com/ashima/webgl-noise)
- [web-audio-beat-detector](https://github.com/chrisguttandin/web-audio-beat-detector)

- Music by Kendrick Lamar - Money Trees from [Spotify API](https://developer.spotify.com/documentation/web-api/reference/get-track)

## Misc

Follow Tiago: [Instagram](https://instagram.com/tgcnzn), [Twitter](https://twitter.com/tgcnzn), [GitHub](https://github.com/tgcnzn), [Linkedin](https://www.linkedin.com/in/tcanzian/)

Follow ARKx: [Website](https://arkx.cc), [Instagram](https://instagram.com/arkx_cc), [Twitter](https://twitter.com/arkx_cc), [Linkedin](https://www.linkedin.com/company/arkx/)

Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/)

## License

[MIT](LICENSE)

Made with :blue_heart: by [Codrops](http://www.codrops.com)

Interactive-Particles-Music-Visualizer

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README