Inspiration We started with a question nobody had a clean answer to: why do some people leave work exhausted even when nothing bad happened to them? The answer kept pointing back to the same phenomenon emotional contagion. The documented, neurological process where we unconsciously absorb the emotional states of people around us. Therapists carrying their clients' grief home. Partners absorbing each other's anxiety. Social workers saturated by crisis energy with nowhere to put it. The science was there. The human need was obvious. But there was no tool. No metric. No language for it in everyday life. That gap is what inspired Undertow.

What It Does Undertow tracks the difference between your authentic emotional baseline and the emotions you've absorbed from your environment, the people around you, and the content you consume. It visualizes this as two live waves your true self in teal, your absorbed state in coral and calculates the gap between them in real time as an Absorption Index from 0 to 100. When absorption is high, it tells you exactly where it came from and guides you through a four-step Reclaim protocol to separate what's yours from what isn't. It also tracks patterns over time through a Sources screen, logs every absorption event in a daily timeline, and includes a crisis protocol that quietly alerts a trusted contact when the index stays critically high for too long.

How We Built It Undertow is built as a fully interactive React application embedded inside Figma Make. The core wave visualization is rendered on an HTML5 canvas using custom wave physics two independent sine wave functions with offset frequencies and amplitudes that create the feeling of two living, breathing emotional states. The Reclaim breathing orb uses real physiological timing a four count inhale, two count hold, six count exhale implemented as a continuous animation loop tied to state. The full interface runs across five screens connected by a persistent bottom navigation bar, with animated toggles, live intensity bars, a stepped protocol flow, and a completion state. All design tokens color, typography, spacing are defined as constants at the top of a single file, keeping the entire prototype self-contained and embeddable.

Challenges We Ran Into The hardest design challenge was tone. Undertow is dealing with genuinely sensitive emotional territory burnout, relationship dynamics, mental health adjacent experiences and every interaction had to feel calm, never alarming. Getting the alert system to feel informative without creating anxiety about the tool itself took a lot of iteration. The language was the hardest part: the difference between "absorbed from" and "caused by" sounds small but completely changes how a user relates to the people in their Sources list. The second challenge was the wave metaphor making it feel like a genuine emotional visualization and not just a decorative background. The delta gap between the two waves had to be legible at a glance without needing a label.

Accomplishments That We're Proud Of The Reclaim protocol is what we're most proud of. It would have been easy to make it a generic breathing exercise with a nice animation. Instead every step is tied directly to the specific absorption event the user is experiencing the tool names the source, names the emotion, and then explicitly separates the absorbed feeling from the user's authentic state in plain language. That specificity is what makes it feel real rather than generic wellness content. We're also proud of the crisis protocol design the idea that a system can advocate for someone who is too depleted to advocate for themselves, without being dramatic or clinical about it, felt like genuinely humane design.

What We Learned We learned that the most important design decisions in a sensitive wellness tool are almost always the language decisions. Every label, every alert copy, every confirmation message carries emotional weight. "Your tide is restored" lands completely differently than "session complete." The metaphor has to hold all the way down to the microcopy or it breaks. We also learned that designing for a new sense something people have never had words or tools for before means you spend as much time on the onboarding concept and the mental model as you do on the interface itself. If users don't understand what they're looking at, the most beautiful wave animation in the world means nothing.

What's Next for Undertow The immediate next step is wearable integration a companion Apple Watch face that shows a single wave arc and the three-digit Absorption Index, with one-tap access to the Reclaim protocol. After that, a clinician-facing dashboard that allows therapists to opt-in to sharing weekly tide summaries with their own supervisors for compassion fatigue monitoring. Longer term, the most interesting direction is bilateral sensing where two consenting users can see their waves side by side, making emotional co-regulation in couples or therapeutic relationships visible and discussable for the first time. We also want to build the ambient display surface: a slow-moving wave on a bedside device that tells you the shape of your day without numbers, just color and tide height.

Built With

Share this project:

Updates