04 From Micro
To Macro

If the previous weeks of experiments were about understanding individual notes the timings, the easings, and the button states, this week was finally about composing the song. I began further developing the Atmost website from the first prototype, moving from isolated UI elements to a full, cohesive experience. Transition from micro interactions to considering macro interactions, it required a much deeper level of planning: I had to consider page transitions, scroll rhythms, and the spatial relationship between elements to create a digital "topos" that felt like a lived space rather than just a flat interface.

  • Week-four
    02~ 08, Feb, 2026
  • Journal-by
    Choi Yerin
  • Keywords
    • Time & Weight
    • Digital-Topos
    • Text-Animations
    • Spline-3D
    • Ix-Choreography

Composing the Digital Topos

Moving beyond a traditional layout, my goal for Atmost was to suggest spatial depth, mimicking the atmosphere of a secure data terminal or a secret lab. This synthesis of research uses a bold, futuristic aesthetic to make the exploration of data feel like a visceral event.

01 Logic of Friction

From the initial prototype, I design background elements to follow the cursor directly. However, I realized this felt overly playful and immediate, lacking the desired depth.

> Original Direction

> Reversed Direction with friction

To achieve a more sophisticated, cutting-edge sensation, I reversed the logic, so that the elements move in the opposite direction of the cursor with added friction (duration: 1.2, ease: 'power3.out').
This helped me create a sense of weight and depth, as if slowly looking through floating layers of data.

Considering the choreography of interactions, I kept the snapping scroll with fade out transitions using 1 - self.progress. This time, I added a bit more friction with longer duration to it, for it to feel more like a deliberate, immersive transition rather than just a quick scroll. Lastly, I added the scale shifts on the elements as if they come closer when fading out, reinforcing the bodily sensation of "entering inside" the data.

Text Animations

To reinforce the sci-fi, futuristic identity, I implemented a custom FlickerText component in React. While the typewriter animation is a classic trope, it can be distracting for long-form content. So I placed them into different elements to create a more dynamic experience, not harming its legibility and usability.

> Atmost with text animations

01 Typewriter effects

Unlike a standard GIF or a static animation, using the GSAP TextPlugin allowed the animation duration to be proportionate to the text length. By calculating duration: text.length * speed, I kept the animation remain consistent regardless of the length of texts.

Also, I deliberately used ease: 'none' to maintain a steady, mechanical pace of typewriter animation.

02 Flicker effects

By creating a simple hook component for rapid flicker, I made the entire text block toggles opacity using steps(1) to mimic the blink.

Since I did not want every elements to have repetitive animations with entire flicker, for several texts, I made individual characters reveal themselves with a slight delay of 0.02s, creating a rhythmic feel.

Lastly, I added subtle opacity shift to 1.0 using a power2.out, so that the animation can feel more natural and connected, rather than abrupt.

Experimenting with Navigations

3D Exploration with Spline

3D Button Exploration with Spline

3D Object Exploration with Spline

Other than text animations, I also have been experimenting with Spline to create more dynamic and interactive experiences with 3D objects.

3D Navigation with Spline

Before, I realized that even one brand needs different interactions for different pages, like how Apple's Airpods 3 or 4 pages are designed in a more dynamic way with scroll triggered animations other than its usual minimal and premium interactions. For the experiments page, I wanted something more "experimental", interactive and engaging. And since I have been exploring Spline, it was the perfect opportunity to integrate it into the website.

Familiarization

By adding keyboard interactions early on, I wanted to familiarize users with the input method they’ll use for the p5.js sketches later in the experiment page. So I designed a 3D interface that respond to users input while giving users a bodily sensation of interacting with a real keys. Users can either type or click keys to see previews and enter respective experiments. This was also an attempt to create a more immersive and exploratory 3D navigation experience, moving away from traditional menus.

Atmost Prototype 2 - Experiment Page

Spring Framework

I used a spring framework in Spline to give it a smooth, physical feel. The keys respond to how long the user presses them, which keeps the experience natural, rather than feeling too snappy or "toy-like". It was also an interesting exploration of how physical interactions can be translated into digital experiences.

Process & Realizations

Design Version 01

Design Version 02

During the process of both design and implementation, I was quite amazed by how Spline allows detailed control over 3D objects and animations, as well as complex state management. Also, the ability to easily manipulate object properties within codes by calling the object's name in design file also opened up new possibilities for interaction design.

I could again realize that my project's objective should not be about inventing a better medium but about communicating the message effectively to audience as a designer

In the end, I believe that the key to a successful design is to focus on the user's experience and how they interact with the product. By leveraging the capabilities of tools like Spline, I can create more engaging and intuitive experiences that resonate with users on a deeper level.

Next Steps

I’m quite happy with how the Atmost foundations are looking, so I want to keep refining these interactive moments. The next step is to add more contents and interaction details to enhance the overall experience, considering its identity and the purpose of making it into a practical resource. Additionally next week, I'm finally planning to conduct the user testing that I have actually been thinking about since the beginning of this project.