How Eel Slap works

Step 1 — The frame sequence

The animation begins as a set of photographs taken at evenly spaced points through a single motion. Even spacing is essential: because the viewer scrubs through the sequence with their hand, any gap in the capture becomes a visible jump in the playback.

Two dozen frames is enough. Beyond that you gain smoothness the eye barely registers while paying for it in bandwidth and memory.

Step 2 — Preloading

Every frame is fetched and decoded before the interaction becomes available. If a frame is requested mid-swipe, the browser has to go to the network or the decoder, and the illusion of physical cause and effect collapses into a stutter.

The practical version of this rule: show a loading state, wait for all frames, then enable the control. A half-second wait at the start buys perfect responsiveness forever after.

Step 3 — Mapping pointer to frame

The container's bounding box converts an absolute pointer position into a ratio between 0 and 1. Multiply that ratio by the frame count and round, and you have the index to display. The mapping is linear, which is what makes the response feel honest — your hand moves an inch, the animation advances proportionally.

• Use pointer events so mouse, touch and pen share one code path.
• Recalculate the bounding box on resize rather than caching it forever.
• Clamp the index so overshooting the edges parks on the first or last frame.

Step 4 — Rendering without jank

A fast swipe can fire pointer events more often than the screen refreshes. Store the latest value and apply it inside a single requestAnimationFrame callback, so the work happens once per painted frame instead of once per event.

Prefer changes the compositor can handle on its own — transforms and opacity — over anything that forces layout. In our engine, the eel is rendered with high efficiency, which keeps the whole interaction on the fast path.

The 100-millisecond rule

Interface research has long held that feedback arriving within roughly a tenth of a second feels instantaneous, and that the sense of having caused something disappears past that threshold. Cursor-driven animation lives entirely inside that budget.

This is why preloading is not a nicety here. It is the whole product: the difference between operating an eel and waiting for one.

Accessibility considerations

• Expose the control as a slider with a value, a maximum and a text description so screen readers can report progress.
• Support arrow keys, Home and End so the interaction does not require dragging.
• Respect reduced-motion preferences — the effect still works when animation is stepped rather than continuous.
• Never rely on hover alone; touch devices have no hover state.

Comparison of approaches