Into the Maelstrom
An interactive browser experience about the cyclical nature of anxiety.
Role:
Concept, Interaction Design, Creative Development
Type:
Interactive Web Experience
Tools:
HTML, CSS, JavaScript, p5.js
Year:
2025
Into the Maelstrom
An interactive browser experience about the cyclical nature of anxiety.
Role:
Concept, Interaction Design, Creative Development
Type:
Interactive Web Experience
Tools:
HTML, CSS, JavaScript, p5.js
Year:
2025
Into the Maelstrom
An interactive browser experience about the cyclical nature of anxiety.
Role:
Concept, Interaction Design, Creative Development
Type:
Interactive Web Experience
Tools:
HTML, CSS, JavaScript, p5.js
Year:
2025
Overview
Overview
Overview
Into the Maelstrom began with an anxiety dream in which I was trapped in a room as a giant humanoid sandstorm approached from outside.
I translated that feeling into a repeating browser experience where windows multiply, shift, and overlap as the environment gradually slips into chaos. With no clear task or solution, users are left to observe what unfolds and decide how, or whether, to respond.
Into the Maelstrom began with an anxiety dream in which I was trapped in a room as a giant humanoid sandstorm approached from outside.
I translated that feeling into a repeating browser experience where windows multiply, shift, and overlap as the environment gradually slips into chaos. With no clear task or solution, users are left to observe what unfolds and decide how, or whether, to respond.
Into the Maelstrom began with an anxiety dream in which I was trapped in a room as a giant humanoid sandstorm approached from outside.
I translated that feeling into a repeating browser experience where windows multiply, shift, and overlap as the environment gradually slips into chaos. With no clear task or solution, users are left to observe what unfolds and decide how, or whether, to respond.
Early storyboard translating the original dream into an interactive sequence.
Early storyboard translating the original dream into an interactive sequence.
Early storyboard translating the original dream into an interactive sequence.
Designing the Experience
Designing the Experience
Designing the Experience
Rather than recreating the dream as a linear story, I structured the experience as a series of repeating loops. The same events return, while the language gradually shifts from fear and resistance toward recognition and acceptance.
The cycle only breaks when the user chooses to stay still.
Rather than recreating the dream as a linear story, I structured the experience as a series of repeating loops. The same events return, while the language gradually shifts from fear and resistance toward recognition and acceptance.
The cycle only breaks when the user chooses to stay still.
Rather than recreating the dream as a linear story, I structured the experience as a series of repeating loops. The same events return, while the language gradually shifts from fear and resistance toward recognition and acceptance.
The cycle only breaks when the user chooses to stay still.
Building in the Browser
Building in the Browser
Building in the Browser
I built the experience with HTML, CSS, JavaScript, and p5.js, treating browser windows as part of the storytelling itself. I choreographed separate windows through position, timing, focus, and layering, turning the browser's technical constraints into part of the experience.
I built the experience with HTML, CSS, JavaScript, and p5.js, treating browser windows as part of the storytelling itself. I choreographed separate windows through position, timing, focus, and layering, turning the browser's technical constraints into part of the experience.
I built the experience with HTML, CSS, JavaScript, and p5.js, treating browser windows as part of the storytelling itself. I choreographed separate windows through position, timing, focus, and layering, turning the browser's technical constraints into part of the experience.
Full Experience
Full Experience
Full Experience
More Works
More Works