Music site / interface · 3D · sound
Hoenix
We brought together nine releases, a music player and four 3D scenes on one website. Visitors can choose an album, play a track and see the graphics respond to the music.
01 / Task
Nine releases on one site.
Hoenix has nine releases connected by one story. We needed to show that relationship and give listeners a simple way to find the right album.
We made the music accessible directly from the hero section. For each release, we created a description, player and 3D scene, with dedicated controls for mobile.
- 09
- releases on the site
- 04
- Elemental 3D scenes
- 11
- language versions
- 04
- graphics quality modes
- 09
- full audio tracks
02 / Concept
Each release — a world of its own.
Nine albums are arranged around a common center. Selecting a release reveals its music and one of four elements: water, fire, air or earth.
03 / Navigation
From the first impression — to the music.
- 01
Home
An introduction to the project’s visual language with direct access to the music.
- 02
History
The idea behind Hoenix and the context connecting its individual releases.
- 03
All releases
The nine albums form a system of connected musical worlds.
- 04
Album page
Cover, release history, music and 3D scene in one composition.
04 / 3D and sound
The graphics move to the rhythm of the music.
Low, mid and high frequencies control different layers of the graphics. Bass changes the volume, mids — surface movement, and highs — light and fine particles.
- nine full audio tracks included in the site;
- listener-selected playback;
- four scenes: water, fire, air and earth;
- readable interface on top of spatial graphics.
Project excerpt
Collapse signal
One of the Hoenix tracks. Press play to hear it.
05 / Mobile version
Easy to listen and explore on mobile.
We rebuilt the navigation, cover, description and player for a narrow screen. The text is readable without magnification, and the buttons are designed to be pressed with a finger.
Four quality modes adapt the graphics to the device. A lightweight version is used when performance is limited, data saving is enabled or animation is turned off.
06 / Implementation
Nine releases. Four elements.
The completed site brings together nine release pages and nine full tracks, four 3D scenes and eleven language versions. Visual settings let visitors change materials and choose one of four quality modes.