09 Finalizing
the Archive

This week was about putting the final touches on the Atmost archive while shifting my focus toward more experimental interactions. I completed the Literature and Glossary pages, which finally feels like the archive is a complete resource rather than a collection of placeholders. As I finished, I realized I wanted to break away from the constraints of content and usability to explore more playful, interaction-focused UI components.

  • Week-nine
    09 ~ 15.Mar, 2026
  • Journal-by
    Choi Yerin
  • Keywords
    • Literatures
    • Glossary
    • Vibe-Coding
    • Interactive-palettes
    • Solution-First

Finalizing the Archive

I added the final two pages to the Resources section: Literature and Glossary. My goal was to maintain the "physical interaction in a digital space" concept I've been working on since the beginning.

Literatures Page

> Literature Page

For the Literature page, I implemented a "Stack vs. Spread" toggle. The stack view feels like a physical pile of books, while the spread view uses a horizontal layout where books transition into place using GSAP.

> Literature Page Process 01

> Literature Page Process 02

Like the process above, I fine-tuned the interactions and views of how stacks and spread layouts behave on the user actions, making them feel more refined rather than playful.

Glossary Page

I also developed glossary page with terms for different categories like technical terms or terms related to atmospheres, as well as the conceptual terms within my research. This would allow users to be able to explore the content more deeply and understand the context better. I also have connected the glossary terms to the relevant sections in the case studies page, creating a more connected experience.

> Glossary Page

For the Glossary page, I used an indexed tab system. Each card has a specific z-index, and clicking a tab brings that "paper" to the top of the stack. It makes the digital interface feel like sorting through a physical file.

// From Glossary.jsx: The Physical Stacking Logic   const bringToTop = (index) => {
    // Reorder z-index so the clicked card is always on top
    const newOrder = order.filter(i => i !== index);
    setOrder([...newOrder, index]);
  };

Using state to manage z-index and simulate physical paper stacking.

Interactive Components Palette

Playful & Expressive

Building the archive required a lot of focus on usability and content, so I felt a need to build something more experimental. I started designing a series of interactive UI components, taking inspiration from Google’s "Material Design Expressive" and Spline’s animated widgets.

Spline Inspiration

spline-file-palette-wireframe

Initial Spline Design File

I initially tried building these in HANA (2D Spline), but I quickly hit a wall because it doesn’t support variable editors like the 3D version. It was too complicated to control the component states dynamically. I ended up switching to GSAP directly, which felt much more straightforward.

I was actually surprised by my own growth as a creative coder. I’m finding that I now prefer the direct control of code over tools like Figma or Spline for micro-interactions. It’s much faster to "feel" the interaction and adjust it in VS Code.

> Playful Interactive Palette

For this identity, I focused on high-energy spring physics and "squash & stretch". I used Elastic.out easings to give elements a bouncy, tactile feel that responds to user actions in a way that feels "cute" and alive.

Squash, Stretch, and Elasticity

// From PlayfulToggle.jsx: Squash & Stretch Logic   // 1. Squash the track on interaction
  gsap.fromTo(trackRef.current,
    { scaleX: 1.08, scaleY: 0.88 },
    { scaleX: 1, scaleY: 1, duration: 0.55, ease: 'elastic.out(1.2, 0.4)' }
  );

  // 2. Springy movement for the thumb
  gsap.to(thumbRef.current, {
    x: next ? 0 : travel,
    ease: 'elastic.out(1, 0.45)'
  });

Implementing organic "Squash & Stretch" parameters to communicate a playful identity.

Reflections: "Not" Trusting the Process

This week I realized that the best parts of Atmost emerged because I just started making things rather than staying in "endless thinking".

I’ve embraced "Solution First" thinking. Instead of waiting for a perfect plan, I use my intuition to "vibe code" a working prototype that I can actually bodily experience. Figma is great for layout, but you can't feel the rhythm of a scroll or the bounce of a button until you build it. I've learned that a brand's atmosphere is something that can be produced, experienced, and felt during the making process, not before it.

Inspiring Pitch

Although the pitch itself is a bit controversial, I think it opens up a lot of interesting questions about how we can use AI and actually 'making' rather than 'thinking' to enhance creativity and efficiency in design.

Next Steps

The next step is to build this component palettes further. I want to see how this high-energy identity contrasts with the "Premium" and "Corporate" sets I plan to build next. This will be the ultimate demonstration of how parameters alone can transform the entire "felt" identity of a digital product although their functions are totally different or totally same.