DON’T LOSE YOUR SENSE OF SELF
Abby Wang — February 24, 2026
DON’T LOSE YOUR SELF is a typing game that forces the user to read and consider different existential passages while seeing their reflection mirrored in front of them. Each mistake brings a surprise in how the user appears.
Existential turmoil, personhood, and self: can you successfully pass a typing test without losing your features and sense of self?
I attempt to visualize the existential search for meaning of the self using a simple typing game reminiscent of grade school type tests in parallel with quotes from the greatest writers of the 20th and 21st century. No more “The quick brown fox jumps over the lazy dog” here.
https://drive.google.com/file/d/1PXfVNyHJRwj2Tytxtt-2ICiNTQwT-zyG/view?usp=sharing
I started off my ideation process with a goal of incorporating some design features and trends (cross-stitch, pixel art, bitmap) I’ve been excited about.
I went through a couple iterations, but ultimately landed on trying out face mapping.
I’m going to be following this pipeline in my prototyping:
Mapping
Sourcing code from here:
https://dev.to/ndesmic/exploring-face-mapping-with-tfjs-4p6g
https://handsfreejs.netlify.app/ref/model/facemesh.html#inspiration
I found handsfree.js to be less detailed and had some dead sites, so I explored some other websites.
Google’s GitHub page was very comprehensive for explaining how to use their AI Edge MediaPipe Face Landmarker: https://github.com/google-ai-edge/mediapipe/blob/master/docs/getting_started/javascript.md. I’m looking specifically at the javascript documentation to get a better sense of how to implement it using the classic Java/CSS/HTML pipeline.
Designing the Website
Using ASCII mockdown to design the layout of the website! I’ve never used ASCII to design a simple wireframe so I thought it would be cool. Testing this website: https://www.mockdown.design/. People are usually using ASCII mockdown to make it easier for AI to translate them into websites.
┌──────────────────────────────────────────────────┐
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
└──────────────────────────────────────────────────┘
Text here text here text here text here text
[_________________________________________________]
[ Look for your self ]
I primarily used Figma to design my layout and sketch out how I wanted the website to feel.
Designing the Game and Camera Embedding
My conversation with Claude:
I'm trying to design a website that looks like this using these Figma wireframes. It will incorporate a typing test (i.e. calculate the number of mistakes). It will have a camera input that will show your face and map your face. For each mistake you make, a feature of your face will disappear (like a nose). The text for the typing test will come from a list that I can incorporate in later. Could you code this website using resources like handsfreejs to map the face, create the typing test, and the other UI features of the website? I want this conversation to be dynamic so I can also continue to tweak features later.
I was fairly surprised at how easily Claude put together the typing game (albeit, a simple feature). I did most of the modifications in formatting how the rectangle covered the isolated features.