WebGL And Webflow Exploration

Sound on for this one 🔈
The Best Of Brockhampton is a music visualizer concept that I built using Three.js and Webflow. The site has two parts to it. The landing page is made from normal sphere geometry with a texture and shaders applied. The second part takes in the video feed from your device's webcam and applies particle effects to it using that as a visualizer.

I created this concept for MakeReign's Ninja Skill program that challenges us to add new things to our skillset. Below I linked some of the tutorials I used to build it out.

→ https://look-listen.webflow.io/

WebGL Shaders
https://tympanus.net/codrops/2020/03/17/create-a-wave-motion-effect-on-an-image-with-three-js/

Webcam Visualizer with Three.js
https://tympanus.net/codrops/2019/09/06/how-to-create-a-webcam-audio-visualizer-with-three-js/

---

Looking for a design agency to partner with?

Get in touch: [email protected]

Follow us at: www.instagram.com/makereign