ENGINEERING · 2026.07.14 · 7 MIN READ

Your thumb is the thrust: building scrubbable scenes

HTML5 video cannot scrub smoothly. Here is what Pocket Desires does instead, and why it runs at 60fps on a phone.

The idea

Most adult games hand you a video and a play button. Pocket Desires hands you the timeline. A strip along one edge of the screen reads your thumb position and maps it straight to the frame index: drag down and it drives in, drag up and it pulls out. You are not watching a clip at its pace. You set the pace.

Why video does not work

The obvious implementation is an HTML5 video element with currentTime set on every pointer move. It stutters badly. Seeking a compressed video stream means finding the nearest keyframe and decoding forward, and doing that dozens of times a second produces decode lag, dropped frames and audible clicking. Browsers are not built to scrub video at pointer frequency.

Pre-rendered frames instead

So every position is exported as 24 to 30 individual webp images. They are preloaded into an array of Image objects when the scene opens, then drawn to a canvas with drawImage as the thumb moves. Canvas drawing of an already-decoded image is sub-millisecond work with zero decode cost, which is the entire trick. The pixels are ready before you ask for them.

Keeping React out of the hot path

The other half is discipline about state. Arousal, current frame, scrub direction and pointer position all live in refs, never in React state — a setState per pointer event would trigger a re-render per frame and destroy the frame budget. React state is reserved for things that genuinely change the UI, like the advance prompt appearing. Even the arousal glow is written directly to the element style inside the animation loop rather than routed through a render.

Progression without a progress bar

Arousal rises while you scrub and decays while you idle, but there is no number on screen. It shows as an inset glow around the screen edge that shifts from pink through red to a pulsing white. Positions unlock at 33 and 66 percent, with the advance button appearing within thumb reach. Reaching 100 plays the climax and closes the scene.

The brushing hand question

The first time you open an interactive scene, the game asks which hand you brush your teeth with. It is not a personality quiz. It works out which hand is holding the phone, so the scrub strip can go on the edge your thumb can actually reach — a right-handed brusher holds the phone in the left hand, so the strip goes left. It is asked once, saved, and changeable in settings. Small question, and it is the difference between a control scheme that fits your hand and one that fights it.

THE GAME THIS IS ABOUT

Pocket Desires

A dark-fantasy mobile gacha game. Collect Desires for anime-style characters -- images, videos, and interactive scenes where your thumb controls every frame of the action.

ABOUT POCKET DESIRESPLAY — SUBSCRIBERS ↗GUIDE

MORE FROM THE DEVLOG

WHY CELLBLOCK HAS NO MONEY IN ITHIDING A MYSTERY INSIDE A GRADING MINIGAMEFIVE WOMEN, ONE ISLAND, AND THE EX WHO IS WATCHINGTEN MOODS, THREE TRIES: DESIGNING A CONVERSATION AS A PUZZLEHOW ONE PERSON KEEPS EIGHT GAMES MOVING