3D Javascript Audio Reactive Blob

đŸ”ˆSound on!

Something like this is relatively easy to achieve in traditional 3D tooling, but I made this using Javascript, three.js, and using the Web Audio API to make the perlin noise reactive to any sound from the microphone. The result shown here is just a screen recording of the browser, with an ambient track playing in the background - but you can just speak into it and watch it move too.

Any developers amongst us will know that 3D on the web is still in it's relative infancy so this wasn't too easy!

Though the animation on this could be a little smoother, I'm pretty happy with this result.

Want to work together? Contact me on Dribbble or look through some in-depth UX case studies at:

https://www.transcend.studio

Posted on Apr 1, 2020

More by Sam Lillicrap

View profile