10 Staging
Atmospheres

The evolution of my work took a significant turn this week. Following my consultation, I realized I needed to move beyond building isolated components and start composing them into full, immersive contexts. Andreas reminded me that I should demonstrate how these interactions feel when they are actually assembled. I decided to create a scroll-driven experience that prioritizes "Atmospheric Aesthetics" over strict usability constraints.

  • Week-ten
    16 ~ 22.Mar, 2026
  • Journal-by
    Choi Yerin
  • Keywords
    • Scrollytelling
    • Atmospheric-Aesthetics
    • Melancholic
    • Atmost-Forest
    • Spline

Consultations

After the consultation this week, I realized I needed to move beyond building isolated components and start composing them into full, experiential prototype, in order to demonstrate atmospheric aesthetics through experiences. So I decided to move on from the interactive palette and create a new experiential website.

Producing Atmosphere through Theory

The biggest challenge this week was finding a balance between creating content and staying focused on my research. I worried that if I spent too much time on content creation and visual branding, I might stray too far from my actual topic.

> UltraSuperNew Website

I looked through several references for immersive websites. My friends Akshita and Jaewon showed me several references like the UltraSuperNew website, which has a very interesting 3D space and sound setup that creates a specific environment for their studio.

It made me realize that I hadn't spent enough time within Atmost explaining what "Atmospheric Aesthetics" actually are in a friendly, atmospheric way.

Then I had an idea:
"Why not produce atmospheres while talking about atmospheric aesthetics?"

I found a bridge in Böhme’s Atmospheric Architectures, where he explains how to "produce" atmospheres using the example of Branitz Park from 1779. He describes staging a "softly melancholic" environment through specific uses of light, color, and shadow.

I wanted to see if I could recreate this parametric guide in a 3D digital space. I moved from vibrant neons to a desaturated palette of deep forest greens and "dusky" shadows. The lighting was staged using low-intensity directional rays and high volumetric fog, not to fully illuminate the scene, but to prevent it from becoming mournful, maintaining a delicate emotional balance.

The Evolution of the Forest Scene

Initial Exploration

atmost-forest-process1

> First 3D Scene Creation with Willow Trees

Building a 3D environment was a steep learning curve. I initially wanted to create a forest of willow trees because I love their atmosphere, but as a beginner in 3D, I struggled to make it look right.

> Second 3D Scene Creation with Low Poly Design

So rather than keep pushing it, I decided to move toward a low-poly version of the forest to match both the capabilities of web browsers and my current skill level. I used a mix of my own sketches and some royalty-free 3D assets, adjusting their shape, colors, and textures to fit my scene.

with slower timing (damping)

with faster timing (no damping)

Then I added details like subtle particles to mimic fireflies, and sphere light ball inspired by one of the spline's tutorial videos about light. By making the light ball follow the cursor movement, I was able to create a more interactive and engaging experience. One of the key challenges was ensuring the light ball's movement felt natural and dream-like. In order to achieve this, I implemented a smooth follow effect that adjusted the light ball's damping with subtle delays, applying the same principles I learned from my previous research on button interactions.

Helpful Tutorial Videos

During the process, some of the Spline's tutorial on fogs and lights were incredibly helpful in achieving the right atmosphere not being limited by technical skills.

Design Adjustments

> Final Design style of 3D scene

One of the biggest breakthroughs came when I moved away from "realistic" green and tried a pink-purple vibe. It created a less boring, more dream-like, fantasy atmosphere that felt much more interesting and intentional. In addition, by using close-range fog to block the horizon, I created a contemplative topos where the user feels enclosed in a space of quiet and solitude.

atmost-forest-with-fog

with fog adjustment

atmost-forest-with-fog

without fog adjustment

Scrollytelling: Camera Movement

In order to provide a more immersive, and experiential scene, I decided to use scrollytelling stretagy, which is a digital storytelling technique that combines scrolling event with narrative, where website elements or contents updates, changes, or animates as the user scrolls down the page. So, I began by planning camera position and added their states, and connected them with scroll event.

> Scroll camera animation without parameter adjustments

The main technical problem I faced was that Spline’s internal scroll animations didn't allow me to trigger JSX content perfectly with each camera state. As a result, I could not adjust its parameters like easings and timing, so the scroll event was just expressed like a linear, unnatural step, where dreamy atmospheres were not fully felt, as seen in the video above.

Solution - GSAP

To fix this, I bypassed Spline’s internal events and used GSAP ScrollTrigger to drive the camera and text simultaneously.

// From SplineScene.jsx: Extracting the Camera for GSAP   function onLoad(spline) {
    // Find the specific camera object by its name in Spline
    const cam = spline.findObjectByName('Camera-front');
    cameraRef.current = cam;
  };

Accessing the camera object directly to enable parameter control via GSAP.

> Refined scroll animation with eases and visual feedbacks with texts

Using a GSAP Timeline, I choreographed the camera's position and rotation alongside the UI headlines. This allowed me to sync Böhme’s quotes with specific "vistas" in the 3D forest. By mapping the camera's x, y, z coordinates directly in the timeline, I achieved a smoothness that made the experience feel truly immersive and dreamy throughout the interaciton.

Helpful Tutorial

Although I did not directly use Spline's camera movement, such tutorials helped me in visualizing and planning the camera movement real time in spline before the actual development.

Reflections

Working on atmost-forest made me realize that designer's intuition is really important actually. I didn't find the solutions for the forest scenes by planning, but I found it by making stuff and iterating on the fog until it felt right. Although it was sometimes stressful and took a lot of efforts, it was rewarding to see how the principles of atmospheres could be applied to a completely different brand personality, one that is soft and organic rather than technical.

Next Steps

Since Open Studios is just a week left, I am planning to prepare video documentations and physical prints. Also, I am going to try different table set ups and figure out the best way to present my project. After physical touchpoints are settled, I will also work on further developing the atmost-forest site's interaction and contents.