• 

• 

  homepage-defalut

• 

  step

• 

  hold-customized

• 

  hold

• 

  session-complete

ZenNeck — A Story About My Neck, My Screen, and a Moment of Stillness

Inspiration

It started with a message from my mom.

I was at my desk, mid-afternoon, doing what many of us quietly do — scrolling through my phone instead of working. And almost every time I chatted with my parents, somewhere in the conversation, one of them would say:

"Remember to rest. Move around a little. Watch out for your neck!"

I'd reply "okay okay" and put my phone down. But it kept happening. Every week. The same gentle, slightly nagging reminder that I'd learned to half-ignore — until I realized I was sitting in the exact posture they were warning me about, reading the exact message they always sent.

What if taking care of your neck felt like an achievement instead of a chore? What if — just for a moment — tilting your head to the side felt like unlocking something beautiful? That question became ZenNeck.

What it does

ZenNeck is an interactive web app that uses your camera to track your head in real time. It guides you through a quiet sequence of neck movements — each one gently prompted, each one rewarded. As you follow along, ten thousand golden particles swirl in organic chaos, and at just the right moment, they snap into a perfect glowing grid: a bloom of light, a breath of stillness. The angle is customizable too, with three presets — light, medium, and deep — so the experience meets you where you are.

The whole session unfolds with soft ambient sound and subtle visual cues. It's not a workout app. It's closer to a ritual: guided, unhurried, and quietly satisfying.

How I built it

The goal was simple: a meditative, interactive app that rewards you for moving your neck. Everything runs locally in the browser — no server, no account, no friction.

The camera watches your face in real time using MediaPipe (468 facial landmarks), extracting head roll, yaw, and pitch frame by frame. A custom sequencing system walks you through a series of neck movements in order, tracking how long you hold each position. When you hit the target angle — chosen from presets of 13°, 20°, or 30° — the particle system responds: ten thousand golden points stop their chaotic dance and snap into a still, glowing grid.

On top of that, a ResonanceVortex and FluidBackground layer in additional visual depth, and a soft bloom effect gives everything that warm, candlelit feeling. Audio — background music, sound effects, and optional voice cues — was added to make the experience feel complete, not just visual.

My development process matched the app's spirit: slow, deliberate, one step at a time. I tackled one feature per session — get it running first, verify it feels right, then refine. No big rewrites, no chasing multiple things at once. Each small loop closed before the next one opened.

Challenges I ran into

Designing without the vocabulary. ZenNeck had to feel like Zen — deep, warm, unhurried. But I didn't know terms like "UnrealBloom," "point cloud attenuation," or "radial depth fog." I had a clear image in my head and no precise words for it. I learned to describe by contrast: not neon, more like ember. Not a UI, more like a ritual. Slowly the vocabulary came.

Finding technology I didn't know existed. I knew cameras could detect faces — I'd seen it in apps. But I didn't know the name MediaPipe, or that a 468-point facial landmark model could run entirely in the browser via WebAssembly with zero server involvement. Getting from "I want to detect a head tilt" to an actual working implementation required a kind of backwards research I hadn't done before.

Managing complexity without getting lost. My head was full of ideas — particles, audio, guided sequences, themes, mobile support. The challenge wasn't building any one piece; it was sequencing. What comes first? What can wait? I learned to work in small closed loops: one goal, build it, verify it feels right, then move on.

Accomplishments that I'm proud of

Every milestone felt like a small celebration: the first time the particle system ran without crashing, the first time the bloom fired at exactly the right moment, the first time the guided sequence completed end-to-end and it just felt right. Going from a rough proof-of-concept to a polished MVP — and then sharing a screen recording with friends and family and hearing "wow, this is beautiful" — that meant everything.

I'm also proud that the entire experience runs client-side, with no data leaving the browser. Your face is never stored or transmitted. It's just you and the particles.

What I learned

• Intention is a design tool. Knowing why something should feel a certain way is just as important as knowing how to build it.
• You don't need to know the technology before you need it. Starting from a feeling and working backwards toward implementation is a valid — and often powerful — way to build.
• Small wins compound. Each closed loop, each working feature, each moment of "it finally looks right" builds momentum that carries the whole project forward.

What's next for ZenNeck

ZenNeck is a personal project, but it's also a small wish for everyone who works too long without looking up.

The next version: a desktop companion — a lightweight spirit that lives in your taskbar and gently reminds you to tilt your head, no browser required. Because the best reminder is the one you don't have to remember to open.

My parents have been telling me to take care of myself since I was a kid. Now a little app whispers the same thing.

Built With

• mediapipe
• react
• react-three-fiber
• three.js
• typescript
• vite