The Architecture of Digital Tactility: Inside JungIk Lee’s "Interaction Library"

In the digital landscape, where efficiency often supersedes aesthetics, the "Interaction Library"—a passion project by designer and developer JungIk Lee—stands as a defiant, poetic exploration of how we touch and perceive the web. Rather than offering a traditional portfolio or a dry repository of code snippets, Lee has crafted a virtual room that breathes, shifts with the sun, and invites users to engage with interface design as if it were a physical object.

At its core, the Interaction Library is an archive of eleven unique interaction samples. These are not merely functional tools; they are explorations of kinetic energy, user intent, and the tactile possibilities of the browser. By housing these experiments in a simulated 3D space, Lee has successfully bridged the gap between abstract computer science and tangible design.

Main Facts: A Room for Digital Curiosities

The Interaction Library is a bespoke web experience that serves two distinct purposes: it is a personal playground for Lee to experiment with interaction design, and a resource for designers and developers looking to inject "soul" into their own interfaces.

The site is conceptualized as a single, intimate room—a quiet study containing a bookshelf illuminated by a warm lamp. Upon entering, the user is presented with eleven notebooks, each corresponding to a unique interaction sample. The navigation is entirely spatial: pointing at a notebook triggers a live preview of the sample that "rises" from the page. Pulling a notebook from the shelf opens it to a spread detailing the purpose and utility of the interaction. When the user "leans in" (or clicks), the preview expands to fill the viewport, allowing for full interaction.

The site is built entirely in vanilla JavaScript, eschewing the bloat of modern frameworks in favor of a lean, high-performance architecture. By utilizing three.js for 3D rendering and custom GLSL shaders, Lee has created a space that feels grounded in physics, despite existing purely in the realm of code.

Chronology: From Spare Moments to a Digital Sanctuary

The genesis of the Interaction Library was not a structured roadmap, but a series of "spare moments." For Lee, the project began as a way to clear the clutter of development folders. He found himself accumulating small, experimental snippets of code that were too polished to be discarded but lacked a cohesive home.

1. The Incubation Phase: Lee began by identifying a core set of interactions that intrigued him—movements and responses that felt "right" in the hand. Rather than letting these sit in disparate directories on his local machine, he envisioned a centralized "room."
2. The Spatial Concept: The transition from a list-based repository to a bookshelf metaphor was a deliberate effort to humanize the experience. Lee wanted the library to feel like a place one would visit to find inspiration, rather than a database to be queried.
3. The Technical Build: The development process involved solving the complex problem of "seamless handovers." To ensure that a 3D-projected notebook page could transform into a full-screen interactive element without a jarring cut, Lee developed a projection mapping technique. Every frame, the site calculates the four corners of the notebook page and maps the live interaction layer over it, effectively "stretching" the digital sample across the 3D surface.
4. Refinement and Deployment: Throughout the final phase, Lee focused on atmospheric details. He implemented a time-of-day system, where the site’s lighting shifts from afternoon golden hour to the cool, ambient glow of a window at night, mirroring the user’s local time.

Supporting Data: The Anatomy of the Library

The Interaction Library is a technical achievement as much as it is a design triumph. Its performance and accessibility rely on a stack that prioritizes precision over convenience.

The Stack

• Core Engine: Pure JavaScript (No Frameworks).
• 3D Rendering: three.js for the room environment.
• Shader Language: Custom GLSL shaders for lighting, shadows, and perspective effects.
• Animation Library: GSAP (GreenSock Animation Platform) for the endless photo grid interactions.
• Hosting: Vercel, chosen for its efficiency in serving static assets.

Interaction Logic

The most significant technical hurdle was the "Projected Preview." Because each sample is a live, running instance of an interface, simply projecting it onto a 3D texture is insufficient. Lee’s system calculates the position of the notebook cover in 3D space and renders the interface element precisely at that coordinate. As the user leans in, the camera transition scales the element to the viewport size. This continuity removes the "cut" that is usually present in modal windows, maintaining the user’s sense of immersion.

Mobile Adaptability

Recognizing that the "spread" format of a notebook is physically impossible to render on a vertical smartphone screen, Lee implemented a responsive state machine. On mobile devices, the notebook opens into a "long page" layout. The 3D room environment fades into a scrollable, vertical document, ensuring that the utility of the library is not sacrificed for the sake of the metaphor.

Official Responses: Insights from JungIk Lee

In discussions regarding the project, JungIk Lee emphasizes that the library was never intended to be a product, but rather a study in "interface feel."

"None of the samples were made for a real product," Lee notes. "So, instead of leaving them in folders, I gave them a room."

Lee’s philosophy revolves around the idea that digital interfaces should possess a sense of weight and place. By providing each sample with a home—a physical-looking book on a shelf—he elevates the work from "code" to "artifact." When asked about the navigational structure, Lee explains the duality of his design: "A shelf is a good index when you are browsing and a poor one when you are in a hurry."

To account for this, he implemented two distinct ways to access content: the immersive room for discovery, and a streamlined, sideways-scrolling list of covers for the user who knows exactly what they are looking for. Every project is assigned its own URL fragment (e.g., /#dive), allowing for deep linking and seamless navigation using the browser’s native back button.

Implications: The Future of Digital Curation

The Interaction Library carries significant implications for how designers and developers share their craft. It challenges the industry standard of the "grid-based portfolio," which often flattens the nuance of interaction design into static screenshots or compressed GIFs.

The Return of Craft

Lee’s work suggests a shift away from the "framework-first" mentality. By building the site without heavy frameworks, he demonstrates that the most sophisticated web experiences are often the ones that rely on the foundational power of the browser. The reliance on GLSL shaders and raw JavaScript allows for a level of control that off-the-shelf libraries often cannot match.

Designing for Tactility

The library invites a broader conversation about "digital weight." In an era where flat design has dominated for years, designers are increasingly seeking ways to bring depth and physics back into the user experience. The Interaction Library provides a blueprint for this:

• Contextual UI: The UI shouldn’t just exist; it should exist somewhere. By anchoring interactions in a 3D environment, the user develops a better spatial understanding of the content.
• Continuous Transitions: The removal of the "cut" between a preview and the full experience is a vital lesson for UX designers. When transitions are fluid, the user’s mental model of the site remains intact, leading to higher engagement and a more satisfying interaction loop.
• Atmospheric Storytelling: The inclusion of dynamic lighting based on the user’s local time is a small but powerful example of "context-aware design." It acknowledges the human on the other side of the screen, fostering a deeper connection between the user and the digital space.

Inspiration for the Future

For the modern developer, the Interaction Library serves as both a tool and a prompt. It asks: What else could we be doing with the space we have on screen? By treating code samples as items in a collection, Lee has transformed the act of "viewing a project" into an experience of "entering a library."

As the digital world continues to expand, projects like Lee’s serve as a reminder that the web is not just a medium for information—it is a medium for experience. Whether through the turning of a 3D notebook page or the subtle shift of light as the sun sets in the virtual room, the Interaction Library proves that even in the virtual world, the most compelling interfaces are those that feel human, grounded, and intentionally crafted.