The Underworld Collective

Sound-based Interactive 3D Website

Overview

The creation of our interactive 3D website was led by Sejeong Seo, using Spline, an intuitive design tool for real-time interactive experiences. Initially inspired by Walter Crane’s artwork The Fate of Persephone, we considered crafting a vivid, dynamic 2D-animated page. However, to better align with our narrative and visual theme, we shifted our concept after discussions among team members. The result was a warm, immersive 3D space that invites users to indirectly experience our story through animated landscapes and interactive sound design.

Initial Concept & Inspiration
Initially, the process involved experimenting with Walter Crane’s artwork, combining AI-assisted techniques in Photoshop to craft cohesive and visually intriguing backgrounds, aiming for depth and immersive interaction within a 2D-style layout. Although compelling, this initial approach was eventually reconsidered after internal reviews, highlighting the need for stronger narrative alignment.
In response, we pivoted our approach, carefully selecting static 3D assets from online repositories to better reflect our project’s emotional atmosphere. Each of these static elements was manually animated by Sejeong within Spline, bringing warmth, subtle movement, and interactivity to the website. Alongside the visual animations, sound integration became essential, as ambient audio cues were thoughtfully embedded into interactive components, further immersing users within the emotional and narrative experience.
Initial Concept & Inspiration
Initially, the process involved experimenting with Walter Crane’s artwork, combining AI-assisted techniques in Photoshop to craft cohesive and visually intriguing backgrounds, aiming for depth and immersive interaction within a 2D-style layout. Although compelling, this initial approach was eventually reconsidered after internal reviews, highlighting the need for stronger narrative alignment.
In response, we pivoted our approach, carefully selecting static 3D assets from online repositories to better reflect our project’s emotional atmosphere. Each of these static elements was manually animated by Sejeong within Spline, bringing warmth, subtle movement, and interactivity to the website. Alongside the visual animations, sound integration became essential, as ambient audio cues were thoughtfully embedded into interactive components, further immersing users within the emotional and narrative experience.
Initial Concept & Inspiration
Initially, the process involved experimenting with Walter Crane’s artwork, combining AI-assisted techniques in Photoshop to craft cohesive and visually intriguing backgrounds, aiming for depth and immersive interaction within a 2D-style layout. Although compelling, this initial approach was eventually reconsidered after internal reviews, highlighting the need for stronger narrative alignment.
In response, we pivoted our approach, carefully selecting static 3D assets from online repositories to better reflect our project’s emotional atmosphere. Each of these static elements was manually animated by Sejeong within Spline, bringing warmth, subtle movement, and interactivity to the website. Alongside the visual animations, sound integration became essential, as ambient audio cues were thoughtfully embedded into interactive components, further immersing users within the emotional and narrative experience.
Initial Concept & Inspiration
Initially, the process involved experimenting with Walter Crane’s artwork, combining AI-assisted techniques in Photoshop to craft cohesive and visually intriguing backgrounds, aiming for depth and immersive interaction within a 2D-style layout. Although compelling, this initial approach was eventually reconsidered after internal reviews, highlighting the need for stronger narrative alignment.
In response, we pivoted our approach, carefully selecting static 3D assets from online repositories to better reflect our project’s emotional atmosphere. Each of these static elements was manually animated by Sejeong within Spline, bringing warmth, subtle movement, and interactivity to the website. Alongside the visual animations, sound integration became essential, as ambient audio cues were thoughtfully embedded into interactive components, further immersing users within the emotional and narrative experience.

Assets Integration

These assets, including detailed landscapes, a medieval castle, and a realistic pirate ship, were sourced as static 3D models from Sketchfab's free online repository. (sketchfab.com)

Lighting

To enhance the inviting atmosphere, we employed a three-point lighting setup. A soft, sunlit glow in a warm yellow hue was placed to emulate natural sunlight, while two additional white lights from different angles provided subtle contouring and depth. This careful balance of colour temperature and positioning not only adds visual dimension, but also creates a cozy, narrative-driven ambiance that complements the gentle animations and sound design throughout our 3D scene.

Environmental Animation

To bring the static assets to life, our team introduced subtle yet impactful animations in Spline. The ocean was animated to simulate soft, continuous waves, infusing the scene with natural motion. We also designed the sky to transition smoothly in a looping cycle, capturing the gentle drift of clouds overhead and reinforcing an immersive atmosphere. The pirate ship was animated to sway in response to the water’s rhythm—making the environment feel dynamic and alive, even with minimal user interaction. While these animations are deliberately delicate, they play a crucial role in creating emotional warmth and enriching our narrative through ambiance.

Sound

We integrated birds chirping, rustling leaves, rolling waves, a regal trumpet fanfare, a pirate ship horn, and a theme-fitting background track to weave warmth and immersion into the scene.

Birds

0:00/1:34

Leaves

0:00/1:34

Waves

0:00/1:34

Trumpet

0:00/1:34

Ship

0:00/1:34

BGM

0:00/1:34

Final Design