Intangible Matteri-D x Chanel
An immersive and visually arresting WebGL experience for the new fragrance, Chanel Nº5 L'Eau.See the project
The Fifth Sense is an online platform from Chanel and i-D celebrating the emotion of scent and the way it inspires female creativity. For its latest commission, Intangible Matter, we worked with digital artist Lucy Hardcastle to bring to life her interpretation and creative vision of Chanel’s N°5 L'Eau, through code.
Our challenge was to create six distinct conceptual rooms that allow users to explore different textures, sound designs, and interactions that represent each element of the fragrance in Lucy’s vision.
30 second teaser for 'intangible matter'
We started developing each room by prototyping in WebGL, testing textures, lighting effects and animation.
Original mood boards for Mist, Soft, Beam and Molten
WebGL prototypes and animation tests from discovery
Users begin their journey in Limbo and are faced with four portals, each representative of the rooms found inside 'intangible matter'. A simple drag takes users to a portal of their choice and, upon entering, a unique path will be set for the rest of their experience.
Find each portal in Limbo by using the simple dragging mechanic
To create the organic movement of the particles found in Mist we used curl noise; a math function used for animating particles inside a vortex.
Burst the molecules in Mist to create a chemical reaction
A combination of complex techniques were required to achieve Molten’s result. For the cloth movement, a blender animation was exported as a three.js morph target animation. Whereas distorted uv coordinates in a fragment shader were used to create the rich swirled texture the material.
Press the object in Motlen to extract the liquid fragrance
In Beam, we created a shattering effect by breaking each of the 20 icosahedron triangles in Maya, so when a pearl is thrown, each face would shatter in a unique formation. For the delicate glass texture, we used a combination of an environment map with a normal map and several point lights to create the shimmer.
Break out of the icosahedron in Beam by throwing the magnetic pearls
To achieve the transparent plastic material for the Soft pillows we used a matcap texture combined with an inner rim transparency. Dynamic animation and three.js curve define the pillow movement resulting in a smooth bounce between the walls.
Bounce the pillows against the walls in Soft
When the user completes their journey through all four rooms they arrive at The Fifth Space. A soundtrack to the space called “Xiaoya · Blossoming Flowers / 小雅·裳裳者华” has been created by producer Fatima Al Qadiri, who collaborated on the original song with Chris Lee (aka Li Yuchun), through remote recording.
Non-interactive video including full track “Xiaoya · Blossoming Flowers / 小雅·裳裳者华”
AwwwardsSite of the Day
FWASite Of The Day
Fatima Al Qadiri
- Music Production