I read Guillermo Rauch's excellent writeup recently about rich web applications; I was particularly fascinated by the mouse prediction section. This can be implemented in a number of ways, but using Observable streams makes it a piece of cake. The code is also very clean, modular and surprisingly intuitive.

RxJS and Immutable.js were the only external dependencies used. There is no jQuery or other frameworks involved. The entire script weighs in at just 29kb gzipped.

1. Generate the Input Streams

The first step is capturing raw mouse movement and time as observable streams. RxJS provides operators to transform DOM events into streams that emit coordinates at a consistent sampling rate, giving us a clean foundation to build on without manual event-management boilerplate.

2. Map the Input Streams to State Streams

Once the input streams are established, they are mapped into state streams using Immutable.js data structures. By combining the mouse position stream with a time-sampled stream, the system computes a predicted cursor position — extrapolating where the mouse is heading based on recent velocity and direction. This predicted position drives menu visibility and placement.

Putting It All Together

The result is a menu that anticipates the user's intent. Instead of requiring the cursor to physically reach a target element, the predictive model activates the menu as the mouse moves toward it. The approach is entirely functional: pure streams feed immutable state, and the UI simply reacts. No imperative DOM manipulation, no tangled event handlers.

The full source code is available on Github.