When Emotions Meet

About Contact Works

2025
Interactive Web
Three.js, React

When Emotions Meet is a 3D interactive website built with Three.js that visualizes how emotions combine and appear in everyday life.

In this experience, users select two emotion shapes to reveal a small emotional scene drawn from the daily life of one ordinary person. Each emotional pairing unlocks a short, three-line scene that reflects how mixed emotions are felt in familiar, everyday moments.

All scenes belong to the same person and appear as scattered fragments of lived emotional experiences. Together, these fragments suggest an emotional portrait—one that is closer to how emotions are actually remembered and felt.

TRY HERE!

Demo Video

Interaction

At the center of the interface sits a human figure, representing an ordinary person.

When a single emotion shape is selected, it begins to orbit the figure, and its color gradually appears on the body. When multiple emotions are selected, their colors blend together on the figure’s surface, visually representing mixed emotional states.

When two emotion shapes are chosen together, a short three-line emotional scene is revealed. Each scene reflects how that specific emotional combination might appear in everyday life—through familiar, recognizable situations rather than dramatic events.

Audience & Goal

This project is designed for a broad audience—anyone curious about how emotions mix, shift, and surface in everyday life.

The interaction is intentionally simple and intuitive. By selecting two emotion shapes, viewers can explore how blended emotions are expressed through color, movement, and short narrative scenes.

Rather than presenting emotions through psychological terminology or analysis, the goal of this project is to offer a quiet emotional encounter. Through small, relatable moments, viewers are invited to recognize, name, and feel complex emotions that could belong to anyone’s daily life.

The project is not intended to be functional or instructional. Instead, it creates space for reflection, emotional recognition, and gentle introspection.

Inspiration:

This project grew out of my long-term interest in the relationship between emotion, memory, and everyday experience.

A central inspiration is Plutchik’s emotional wheel, particularly the concept of emotional dyads—the idea that basic emotions can combine to form more complex emotional states. Rather than treating emotions as isolated categories, Plutchik’s model frames them as relational, layered, and fluid. This project translates that idea into an interactive and spatial form.

I was also influenced by contemporary micro-poetry and minimal writing focused on everyday life—works that capture subtle emotional shifts within ordinary moments. These influences shaped the short, three-line scenes revealed in the project, which aim to be concise, intimate, and emotionally precise.

Another key inspiration was my ongoing exploration of visualizing emotions through shape, color, and interaction, instead of relying solely on language. I wanted emotions to feel embodied and tangible through interaction, while still carrying narrative meaning.

Emotion Shapes & Colors

Joy — Yellow Circle

Shape: A soft circle, free of angles, expresses openness, warmth, and ease
Color: Bright yellow evokes sunshine and energy, creating an immediate visual association with happiness.

Trust — Soft Green Square

Shape: A rounded square conveys stability and groundedness without rigidity. Its symmetry introduces order and peace.
Color: Soft green is linked to nature, recovery, and balance.

Surprise — Pink Six-Point Star

Shape: A starburst form captures the outward pop of an unexpected moment — sudden, radiating, and immediate.
Color: Bright pink is an intense, attention-grabbing color that signals something unexpected or exciting. It creates a sense of a quick emotional “spark”.

Anticipation — Orange Five-Petal Form

Shape: The five outward-reaching petals symbolize branching futures and multiple possibilities, embodying anticipation’s forward-leaning nature.
Color: The orange-red to orange-yellow gradient represents an emotional warm-up — from alert curiosity (orange-red) to gentle interest and hope (orange-yellow).

Anger — Red Triangle

Shape: The pointed triangle is the most aggressive geometric form, symbolizing direction, intensity, and heat.
Color: Red is physiologically stimulating, associated with heat, conflict, and emotional eruption.

Fear — Purple Diamond

Shape: A sharp-edged diamond introduces tension and instability, hinting at alertness and vulnerability.
Color: Purple conveys psychological depth and unease. Its darker undertones connect to the unknown, amplifying fear’s ambiguity.

Sadness — Blue Teardrop

Shape: A teardrop directly reflects the physical metaphor of crying, giving sadness a gentle downward pull.
Color: Cool blue carries a sense of heaviness and quiet emotion.

Disgust — Murky Green Organic Shape

Shape: An asymmetrical, splat-like organic form mimics something sticky or spoiled, triggering a subtle visceral reaction.
Color: Murky gray-green recalls mold, rot, or toxicity.

Next Step

Originally, this project was conceived as a puzzle-like narrative experience.
Each emotional fragment would function as a narrative hint, and all 28 emotional scenes together would gradually form one hidden, continuous life story.

Due to time and design constraints, the current version focuses on each fragment as an independent emotional moment rather than a fully connected storyline.

In the next step, I would return to this original idea—linking all emotional fragments into a cohesive hidden narrative. Through exploration and interaction, users would slowly piece together a complete life story, discovering how individual emotional moments accumulate into a larger personal history.