UI Spy

Interactive playground for learning UI terminology — Built with Matter.js physics, clip-path spotlight, and diverse interaction patterns.

RolePersonal Project
Timeline2022.09 - 2022.12
TeamSolo
SkillsReact, Matter.js, SVG, Interaction Design
Overview

In a Nutshell

A project where users experience UI terminology through interaction, not text. Popup, Snackbar, Breadcrumb — these terms are used daily in the industry, but they originated abroad and are not always intuitive. UI Spy let users experience them firsthand through interaction.

The concept was borrowed from the "I Spy" hidden-picture game, with a stationery shop as the theme. Three stationery elements (gacha machine, stationery, stickers) became separate sections, each exploring UI through a different interaction pattern. Every graphic asset and interaction was designed and developed from scratch, from design to implementation.

UI Spy — an interactive web where you discover hidden UI components through play