Check out the web experience here

Project Description

This was a weird experiment I created playing with the Three.js WebGL javascript library. It’s a sort of existential meditation play on the ‘scrollytelling’ sites that were so popular a few years ago, except you’re watching a bunch of different skulls rotate in 3D space, while elevator music plays and strange compliments are spoken aloud by an AI that sounds like me.

Technical Details

I used Three.js for the browser based 3D rendering. I used matcaps for the materials, to avoid having to do a complicated lighting setup and honestly, making the matcaps load properly on user scroll was the most difficult part of this by far. I created a subtle gradient background animation created using CSS, and used GSAP for the transitions. For the compliments, I just wrote out a bunch of the strangest compliments I could think of. For the voice, I created a voice clone of myself in ElevenLabs. I thought about having the app query the ElevenLabs API every time the user scrolled to the next transition, but it felt like no one would have any idea they were being generated live and would probably increase latency, so I nixed that idea and just downloaded generations of each compliment and programmed the app to play one at random each time the user scrolls.