Tokimonsta
In this space fans find themselves floating in a landscape that represents the cosmic journey of Tokimonsta's music .
TOKiMONSTA is visionary music producer and DJ known for her unique textural soundscapes that fuses vintage sensibilities with progressive electronic/r&b/dance music. Tokimonsta made history in 2017 when she became the first female Asian-American producer to receive a Grammy nomination in the best dance/electronic album category for her 2017 album, “Lune Rouge.”
Project Outline
To create a unique and innovative to elevate Tokimonsta's album cover from a two-dimensional design of 3D elements into an immersive 3D space.
For her latest album cover, “Oasis Nocturno”, Tokimonsta collaborated with internationally renowned artist Frederic Duquette aka FVCKRENDER, a pioneer in the digital art and NFT space.
Leveraging my experience with WebGL/Three.js, this was a great opportunity to collaborate with Frederic and transform his static artwork into a to a more experiential and interactive 3D environment.
Creative development #
I had Frederic share his 3D objects used to design the cover. With performance in mind, I had to decimate his highly detailed 3D models to reduce their size and ensure the site could still run optimally for fans across the world as WebGL sites can sometimes be resource intensive.
From there I designed a custom skybox scene for the background by modifying photos used for the cover provided by the client to create this alien planet landscape.
I intentionally made the interactions on zoom and pan so they would work seamlessly on desktop and mobile
To keep the scene animated even without any interaction, I created animations by separating the hands and the gem into individual objects so that the gem could rotate independently on its own axis and refract the environment like real glass. I gave the hands a metallic finish so that they can also reflect the lights around them. I added floating particle light globes for additional depth and animation.
While achieving a visionally impressive site, it still needed to be functional. I placed the rest of the site content in modals to keep the scene in the background while still presenting key content in a way that aligns with the 3D aspect of the design.
Development process #
Built with Three.js, using OrbitControls for the camera, multiple loaders for the objects and textures, and UnrealBloomPass to add a more realistic bloom to the light effects.
- Tilt animations made with javascript using VanillaTilt.js
- Site files version control maintained via GitHub and served in continuous deployment with Netlify
- Customizable section for tour dates widget made with Bands in Town API with added support for switching to Seated or Songkick
- Previous: OFFAIR
- Next: August Shop