404 Museum – Designing and Coding an Interactive 404 Web Experience
404 Museum – Designing and Coding an Interactive 404 Web Experience
404 Museum – Designing and Coding an Interactive 404 Web Experience
A solo design–development experiment that turns being “lost” into discovery through interactive storytelling.
A solo design–development experiment that turns being “lost” into discovery through interactive storytelling.
A solo design–development experiment that turns being “lost” into discovery through interactive storytelling.
Role
Role
Role
Solo Designer & Developer
Solo Designer & Developer
Solo Designer & Developer
Timeline
Timeline
Timeline
Mar 2025 – May 2025
Mar 2025 – May 2025
Mar 2025 – May 2025
Tools & Tech
Tools & Tech
Tools & Tech
HTML, CSS, JavaScript, Leaflet.js, GSAP, JSON, Zeabur
HTML, CSS, JavaScript, Leaflet.js, GSAP, JSON, Zeabur
HTML, CSS, JavaScript, Leaflet.js, GSAP, JSON, Zeabur
1. Project Context
1. Project Context
This project was created for Programming Human-Centered Interfaces at the University of Maryland — a course focused on building interactive web interfaces that combine usability, creativity, and technical implementation.
This project was created for Programming Human-Centered Interfaces at the University of Maryland — a course focused on building interactive web interfaces that combine usability, creativity, and technical implementation.
I’ve always loved how well-designed 404 pages turn an error into a delightful, meaningful moment. Different brands express their personality through these small “lost” spaces —
Figma makes it feel like you’re editing the 404 inside a canvas,
ChatGPT turns it into a poetic line of text,
Dribble lets you play with colors and compositions, and
Pixar uses its characters to turn anxiety into reassurance.
Each example reflects its brand’s identity — transforming a moment of error into a moment of connection.
I’ve always loved how well-designed 404 pages turn an error into a delightful, meaningful moment. Different brands express their personality through these small “lost” spaces —
Figma makes it feel like you’re editing the 404 inside a canvas,
ChatGPT turns it into a poetic line of text,
Dribble lets you play with colors and compositions, and
Pixar uses its characters to turn anxiety into reassurance.
Each example reflects its brand’s identity — transforming a moment of error into a moment of connection.
Inspired by that, I wanted to design my own interactive 404 page — not just as a single screen, but as a small museum of lostness, where people can explore the feeling of being “lost” through playful, personal interactions.
Inspired by that, I wanted to design my own interactive 404 page — not just as a single screen, but as a small museum of lostness, where people can explore the feeling of being “lost” through playful, personal interactions.
1. Project Context
This project was created for Programming Human-Centered Interfaces at the University of Maryland — a course focused on building interactive web interfaces that combine usability, creativity, and technical implementation.
I’ve always loved how well-designed 404 pages turn an error into a delightful, meaningful moment. Different brands express their personality through these small “lost” spaces —
Figma makes it feel like you’re editing the 404 inside a canvas,
ChatGPT turns it into a poetic line of text,
Dribble lets you play with colors and compositions, and
Pixar uses its characters to turn anxiety into reassurance.
Each example reflects its brand’s identity — transforming a moment of error into a moment of connection.
Inspired by that, I wanted to design my own interactive 404 page — not just as a single screen, but as a small museum of lostness, where people can explore the feeling of being “lost” through playful, personal interactions.
2. Demo & Concept
2. Demo & Concept
Every missing page has a story. When people land on a 404 page, it’s usually by accident — a small digital detour. I wanted to turn that moment of being lost into something playful and reflective, where every interaction reveals a different way of interpreting “404.”
Every missing page has a story. When people land on a 404 page, it’s usually by accident — a small digital detour. I wanted to turn that moment of being lost into something playful and reflective, where every interaction reveals a different way of interpreting “404.”
Every missing page has a story. When people land on a 404 page, it’s usually by accident — a small digital detour. I wanted to turn that moment of being lost into something playful and reflective, where every interaction reveals a different way of interpreting “404.”
You can explore the live demo below — an interactive web experience that reimagines what a “404” can feel like, from a playful slot machine to a personal map of memories.
You can explore the live demo below — an interactive web experience that reimagines what a “404” can feel like, from a playful slot machine to a personal map of memories.
You can explore the live demo below — an interactive web experience that reimagines what a “404” can feel like, from a playful slot machine to a personal map of memories.
The 404 Museum unfolds in three short journeys, each turning the feeling of being lost into a different kind of discovery. Together, they explore randomness, reinterpretation, and personal connection.
The 404 Museum unfolds in three short journeys, each turning the feeling of being lost into a different kind of discovery. Together, they explore randomness, reinterpretation, and personal connection.
The 404 Museum unfolds in three short journeys, each turning the feeling of being lost into a different kind of discovery. Together, they explore randomness, reinterpretation, and personal connection.
01 Slot Machine — The randomness of being lost
01 Slot Machine — The randomness of being lost
01 Slot Machine — The randomness of being lost
The experience begins with a slot machine, symbolizing the unpredictability of errors. Like pulling a lever without knowing what will happen, users never expect to “spin” into a 404 — it’s a fun, unexpected start that sets the tone for the rest of the journey.
The experience begins with a slot machine, symbolizing the unpredictability of errors. Like pulling a lever without knowing what will happen, users never expect to “spin” into a 404 — it’s a fun, unexpected start that sets the tone for the rest of the journey.
The experience begins with a slot machine, symbolizing the unpredictability of errors. Like pulling a lever without knowing what will happen, users never expect to “spin” into a 404 — it’s a fun, unexpected start that sets the tone for the rest of the journey.
02 Cocktail Maker — Mixing meaning from mistakes
02 Cocktail Maker — Mixing meaning from mistakes
02 Cocktail Maker — Mixing meaning from mistakes
A 404 can be frustrating, but it can also spark creativity. This section lets users mix their own “404 cocktail,” combining random fruits to create new colors and flavors. It represents how people reinterpret meaningless moments into something personal — just like mixing ingredients to craft your own taste.
A 404 can be frustrating, but it can also spark creativity. This section lets users mix their own “404 cocktail,” combining random fruits to create new colors and flavors. It represents how people reinterpret meaningless moments into something personal — just like mixing ingredients to craft your own taste.
A 404 can be frustrating, but it can also spark creativity. This section lets users mix their own “404 cocktail,” combining random fruits to create new colors and flavors. It represents how people reinterpret meaningless moments into something personal — just like mixing ingredients to craft your own taste.
03 Photo Map — A personal geography of lostness
03 Photo Map — A personal geography of lostness
03 Photo Map — A personal geography of lostness
The journey ends with a world map that forms the shape of “404,” built from photos I took in Taiwan (where I was born), Europe (where I studied abroad), and the U.S. (where I’m pursuing my master’s degree). It’s a personal touch — showing that even in being lost, we leave traces of who we are and where we’ve been.
The journey ends with a world map that forms the shape of “404,” built from photos I took in Taiwan (where I was born), Europe (where I studied abroad), and the U.S. (where I’m pursuing my master’s degree). It’s a personal touch — showing that even in being lost, we leave traces of who we are and where we’ve been.
The journey ends with a world map that forms the shape of “404,” built from photos I took in Taiwan (where I was born), Europe (where I studied abroad), and the U.S. (where I’m pursuing my master’s degree). It’s a personal touch — showing that even in being lost, we leave traces of who we are and where we’ve been.
3. What went wrong
3. What went wrong
01 Page transitions in a single-page setup
01 Page transitions in a single-page setup
My site was built as a one-page app, with button clicks triggering each section. Initially, clicking “Next” didn’t actually move to the next section because I hadn’t properly updated visibility states. Later, I found another issue — when going back to the start, some elements didn’t reset correctly and stayed visible.
My site was built as a one-page app, with button clicks triggering each section. Initially, clicking “Next” didn’t actually move to the next section because I hadn’t properly updated visibility states. Later, I found another issue — when going back to the start, some elements didn’t reset correctly and stayed visible.
02 Slot machine 3D layout complexity
02 Slot machine 3D layout complexity
I originally wanted a 3D-style slot machine with layered reels and shadows. But aligning every layer and keeping animations consistent became too hard to maintain, so I simplified it to a flat, minimal look that still felt satisfying.
I originally wanted a 3D-style slot machine with layered reels and shadows. But aligning every layer and keeping animations consistent became too hard to maintain, so I simplified it to a flat, minimal look that still felt satisfying.
03 Map responsiveness issues
03 Map responsiveness issues
The “404” photo map was hardcoded with pixel coordinates for each photo tile. It worked great on desktop, but broke on smaller screens. Without dynamic scaling or relative positioning, responsiveness became a major limitation.
The “404” photo map was hardcoded with pixel coordinates for each photo tile. It worked great on desktop, but broke on smaller screens. Without dynamic scaling or relative positioning, responsiveness became a major limitation.
3. What went wrong
01 Page transitions in a single-page setup
My site was built as a one-page app, with button clicks triggering each section. Initially, clicking “Next” didn’t actually move to the next section because I hadn’t properly updated visibility states. Later, I found another issue — when going back to the start, some elements didn’t reset correctly and stayed visible.
02 Slot machine 3D layout complexity
I originally wanted a 3D-style slot machine with layered reels and shadows. But aligning every layer and keeping animations consistent became too hard to maintain, so I simplified it to a flat, minimal look that still felt satisfying.
03 Map responsiveness issues
The “404” photo map was hardcoded with pixel coordinates for each photo tile. It worked great on desktop, but broke on smaller screens. Without dynamic scaling or relative positioning, responsiveness became a major limitation.
3. What went right
3. What went right
01 Slot machine randomness and animation timing
01 Slot machine randomness and animation timing
Even without GSAP, I created a smooth spinning effect using setInterval and setTimeout. Each reel stopped one by one with slight delays, giving it a natural, game-like rhythm that felt surprisingly polished.
Even without GSAP, I created a smooth spinning effect using setInterval and setTimeout. Each reel stopped one by one with slight delays, giving it a natural, game-like rhythm that felt surprisingly polished.
02 Cocktail drag-and-drop interaction
02 Cocktail drag-and-drop interaction
I separated the cup and liquid into two SVG layers, allowing the liquid to appear behind the cup and dynamically change color when users dropped fruits (🍓🍋🍇). It was tricky to coordinate drag events and color blending, but visually it worked well.
I separated the cup and liquid into two SVG layers, allowing the liquid to appear behind the cup and dynamically change color when users dropped fruits (🍓🍋🍇). It was tricky to coordinate drag events and color blending, but visually it worked well.
03 Optimized 404 photo map performance
03 Optimized 404 photo map performance
Despite loading multiple small images, performance stayed smooth because I pre-resized them to 100×150px and kept file sizes small. The map loaded faster than I expected and gave users instant visual feedback.
Despite loading multiple small images, performance stayed smooth because I pre-resized them to 100×150px and kept file sizes small. The map loaded faster than I expected and gave users instant visual feedback.
3. What went right
01 Slot machine randomness and animation timing
Even without GSAP, I created a smooth spinning effect using setInterval and setTimeout. Each reel stopped one by one with slight delays, giving it a natural, game-like rhythm that felt surprisingly polished.
02 Cocktail drag-and-drop interaction
I separated the cup and liquid into two SVG layers, allowing the liquid to appear behind the cup and dynamically change color when users dropped fruits (🍓🍋🍇). It was tricky to coordinate drag events and color blending, but visually it worked well.
03 Optimized 404 photo map performance
Despite loading multiple small images, performance stayed smooth because I pre-resized them to 100×150px and kept file sizes small. The map loaded faster than I expected and gave users instant visual feedback.
4. Reflection
4. Reflection
4. Reflection
This project was one of my most exploratory works — I stepped away from structured UX processes and focused on building something expressive through code. It reminded me that experimentation is also part of good design, especially when bridging creativity and implementation.
This project was one of my most exploratory works — I stepped away from structured UX processes and focused on building something expressive through code. It reminded me that experimentation is also part of good design, especially when bridging creativity and implementation.
This project was one of my most exploratory works — I stepped away from structured UX processes and focused on building something expressive through code. It reminded me that experimentation is also part of good design, especially when bridging creativity and implementation.
1
1
1
When Code Shapes Design
When Code Shapes Design
When Code Shapes Design
Building every interaction by hand helped me see how front-end mechanics shape user experience. Concepts like Flexbox, viewport height (VH), and responsive layout stopped feeling like “developer terms” — they became design tools that influence hierarchy, flow, and balance.
Building every interaction by hand helped me see how front-end mechanics shape user experience. Concepts like Flexbox, viewport height (VH), and responsive layout stopped feeling like “developer terms” — they became design tools that influence hierarchy, flow, and balance.
Building every interaction by hand helped me see how front-end mechanics shape user experience. Concepts like Flexbox, viewport height (VH), and responsive layout stopped feeling like “developer terms” — they became design tools that influence hierarchy, flow, and balance.
2
2
2
Learning Through Play
Learning Through Play
Learning Through Play
Letting myself experiment without overplanning gave me space to play and learn. I realized that coding isn’t just execution — it’s a way to prototype emotion, to see how motion, timing, and interactivity can make even a simple 404 feel alive.
Letting myself experiment without overplanning gave me space to play and learn. I realized that coding isn’t just execution — it’s a way to prototype emotion, to see how motion, timing, and interactivity can make even a simple 404 feel alive.
Letting myself experiment without overplanning gave me space to play and learn. I realized that coding isn’t just execution — it’s a way to prototype emotion, to see how motion, timing, and interactivity can make even a simple 404 feel alive.