I found out EMDR apps charge $80/month for a CSS animation. So I built a free one with eye tracking.

Published: (March 16, 2026 at 03:09 PM EDT)
3 min read
Source: Dev.to

Source: Dev.to

What I built

Saccada is a browser‑based eye‑movement practice with 12 patterns.

  • All sound is synthesized in real‑time via the WebAudio API (bilateral panning, binaural beats, tanpura drone – no audio files).
  • Webcam eye tracking is handled with MediaPipe; the app adapts dot speed to your actual gaze and builds a heatmap showing how well you followed the pattern.
  • Every session can be customized: duration, speed, background, sound. Keyboard controls and fullscreen mode enable complete immersion.

Privacy is non‑negotiable. All data (emotional responses, notes, gaze data) stays in IndexedDB on your device—zero accounts, zero telemetry, zero data collection.

Additional features

  • Trataka – a yogic candle‑flame gazing practice. The flame is procedurally generated on Canvas.
  • Sleep REM pattern – a hypothesis inspired by a 2002 proposal from neuroscientist Stickgold that EMTR mimics REM‑sleep processing. The theory is unconfirmed; the better‑supported explanation is that eye movements tax working memory, reducing vividness of recalled memories. I note that my personal experience of better sleep after using this pattern is anecdotal, not evidence.

What happened after I started using my own app

Context: I have ADHD, CPTSD, and long‑standing memory and concentration challenges, which led me to explore EMTR.

Since I began practicing the EMTR patterns, intense emotional states no longer hijack me as they used to. Testing the other patterns from the Indian tradition has surfaced pleasant, long‑forgotten childhood memories—no flashbacks. Whether this is coincidence, placebo, or something else, it works for me.

The patterns I use most often

  • EMTR Classic
  • Pralokita (same bilateral movement, different sound)
  • Avalokita
  • Sleep REM
  • Anuvritta (rapid vertical saccades) – my favorite, though it is the most speculative pattern in the app.

I haven’t focused on the concentration patterns yet, so I can’t comment on them.

Stack

  • React 19
  • TypeScript
  • Vite
  • Canvas 2D (requestAnimationFrame)
  • WebAudio API (all sounds synthesized, zero audio files)
  • MediaPipe Face Landmarker (gaze‑tracking pipeline)
  • Zustand for state management
  • Dexie.js / IndexedDB for local storage
  • Tailwind CSS + shadcn/ui
  • PWA via vite-plugin-pwa
  • Feature‑Sliced Design architecture

The hardest engineering challenge was running Canvas animation, WebAudio synthesis, and MediaPipe gaze prediction simultaneously without frame drops. Each runs on its own update cycle, and keeping React out of the rendering hot path required careful architecture.

Try it

The app is completely free, open‑source (GPLv3), and will always remain so.

  • 🔗 Live:
  • 🔗 GitHub:

If you find it useful or interesting, a ⭐ on GitHub means a lot for a solo project. Feedback is welcome.

0 views
Back to Blog

Related posts

Read more »

I wrote an amazing React Book

!Cover image for I wrote an amazing React Bookhttps://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-...