Inspiration: The "23-Minute" Problem The spark for NeuroFlow came during a late-night cram session for a Signal Processing exam. I realized I was spending more time managing the video player—pausing to take notes, rewinding when I got confused, and speeding up 2x when the professor droned on—than actually learning.
I found a study on Cognitive Load Theory stating that every time we break focus to interact with a UI (context switching), it takes the brain up to 23 minutes to return to a deep "Flow State."
I asked myself: Why is the video player so dumb? Why doesn't it know I'm confused? As a Computer Science student, I realized the "system" of online learning was broken because it was linear. I wanted to build a system that was adaptive—one that used the webcam not just to see me, but to understand me.
How We Built It We built NeuroFlow as a browser-based agent that creates a closed feedback loop between the user's physiology and the video playback engine.
- The Core Technology: rPPG The magic behind NeuroFlow is Remote Photoplethysmography (rPPG). We learned that as blood flows through the forehead, it causes subtle changes in skin color that are invisible to the naked eye but detectable by a webcam sensor.
We implemented a custom signal processing pipeline using OpenCV.js and MediaPipe Face Mesh:
ROI Extraction: We use MediaPipe to track 468 facial landmarks in real-time to isolate the forehead Region of Interest (ROI).
Signal Extraction: We extract the spatial average of the Green Channel G(t) from the ROI, as hemoglobin has peak absorption at ≈530nm (green light).
Filtration: The raw signal is noisy due to lighting and motion. We apply a bandpass filter (0.7 Hz – 4.0 Hz) to isolate the human heart rate frequency range.
The heart rate signal S(t) is approximated as:
S(t)=Bandpass(G(t)−μ G )
- The Cognitive Engine We didn't just want Heart Rate (HR); we needed Heart Rate Variability (HRV), which is a strong proxy for cognitive stress.
Low HRV → High Stress (Confusion) → Action: Slow Down (0.75×).
Stable HRV + Fixed Gaze → Low Arousal (Boredom) → Action: Speed Up (1.5×).
Challenges We Faced Building this was not a straight line. We hit three major "Friction Points" of our own:
The "Dark Room" Problem: rPPG relies on light. In our first test, the system failed completely in a dim dorm room. We had to build a "Signal Quality Index" (SQI) that detects low contrast and gracefully degrades the system to "Gaze-Only" mode if the pulse signal is too weak.
The Motion Artifact: When a user laughed or nodded, the pixel changes swamped the heart rate signal. We solved this by using Eulerian Video Magnification techniques to distinguish between "macro-motion" (head moving) and "micro-motion" (pulse).
Latency: Running complex computer vision in the browser caused the video to lag. We optimized the pipeline by using WebAssembly (WASM) for the heavy math, reducing the processing time per frame from 50ms to just 12ms.
What We Learned We learned that "Systems that Serve Us" aren't just about better GUIs; they are about invisibility. The best interface is one you don't have to touch. NeuroFlow taught us that with enough math and empathy, we can turn a standard webcam into a powerful bio-feedback tool that protects our most valuable resource: our attention.
Log in or sign up for Devpost to join the conversation.