The Menu

Once we decided to do a website, and after researching different examples and references, we designed a concept for a first menu from which you would be redirected to each of the stories. The menu would be the main actor in recreating the effect of the workshop, visitors would be received by the voice and sea sound, and be guided through the template of the workshop activity. Then they would pick one hourglass and go to the subpages.

We knew we wanted to use 3D models for the hourglasses in the subpages, since it would allow to give more depth to the visuals. Initially the intention was to use the 3D also for the menu, to develop everything with the same libraries, but we quickly realised that it would limit the performance (to recreate a sea of 3D hourglasses would be very expensive performance-wise), and also the library of A-Frame resulted very limited to recreate the effects that we wanted. Another thought was that a whole website in 3D wouldn’t really portray the transition between the dialogue workshop, where the hourglasses were to be illustrated by one of our team members, and the outcome/story. Therefore, we decided to develop the menu separately in html, css and javascript, and using black and white illustrations to convey a neutral status of the experiment.

The hourglasses are distributed in a grid, where the effect of moving sea is applied by using the anime.js library (https://animejs.com/), and the fluidity of the title works with blotter.js (https://blotter.js.org/). The sound in the background is a sea sound downloaded from freesound (https://freesound.org/), open commons. The narration voice (Santra recording) can be stopped and played by using a triangle button on a side.

The wave background illustration helps to link the menu with the style of the subpages, which use the same file to recreate the waves.