Your hands are the controller
Saber Blast is a rhythm game you play with your bare hands. Your left hand swings a red saber, your right hand swings a blue one, and glowing notes fly down a neon track toward you in time with the music. There is nothing to install: open the page, allow the camera, and play.
That sounds simple, and the goal was for it to feel simple. Getting there meant solving a few problems that a controller never has: a webcam is noisy, hands drop out of view, two hands can be confused for each other, and a browser does not always draw frames at an even pace.
Turning a webcam image into two sabers
Hand tracking uses MediaPipe's hand landmarker, which runs inside the browser. It finds up to two hands in each camera frame and returns 21 points per hand. We try the GPU first and fall back to the CPU if the GPU path is not available. The camera is asked for a modest 640 by 480 image, which is plenty for finding hands.
Each saber follows the tip of your index finger. The camera image is not mirrored, so your right hand appears on the left of the raw frame, and the mapping into the game world flips it back so the saber moves the way your hand does. A small preview in the corner shows the camera with the tracked hand skeleton drawn on top, which helps players see what the game is seeing.
The tracker labels each hand as left or right. Sometimes it gives both hands the same label. When that happens we fall back to their position in the frame and treat the one further to your left as your left hand. That stops the red and blue sabers from swapping mid-song.
Smooth when still, quick when swinging
Raw fingertip positions jitter, even when your hand is still. Heavy smoothing fixes the jitter but makes fast swings lag behind. We use a One Euro filter, which adjusts itself: it smooths heavily when your hand is slow and lightly when it moves fast. Resting sabers stay calm, and big swings still land where you aimed them.
Tracking can also drop for a single frame. Rather than making the saber flicker, a hand is kept alive for 160 milliseconds after it is lost.
One bug taught us a lot. Early on, detection could run twice on the same camera frame. The first pass saw no movement and the second saw double, so swing speed jumped between zero and too high, and hit grades felt random. The fix was to run detection only when the camera has produced a new frame, and to smooth the velocity so one noisy frame cannot spike it.
Menus use the same tracking. Pinch your thumb and index finger together on a button to press it. The pinch is measured relative to the size of your hand, so it works whether you stand close to the camera or further back, and it uses two thresholds so it does not flicker on and off at the edge.
Keeping notes locked to the music
The song runs at 140 beats per minute, and the note chart is built from that beat. The pattern changes every twelve beats, moving between single notes, pairs on the outside lanes, quick left and right pairs, and notes on the top and bottom rows. Difficulty changes how dense and how fast it gets: Easy places a note every four beats, Normal every two, and Hard on every beat, with the notes travelling faster at each step.
Each note knows the exact time it should reach you. It appears far down the track early enough to arrive on that beat at the current speed. The tricky part is knowing the current time. The audio element's clock updates in coarse steps in some browsers, which made notes stutter. So the game keeps its own smooth song clock, moves it forward with the system timer, and gently corrects it toward the audio when they drift apart.
If the browser stops drawing for a while, for example when the tab is hidden, the music keeps going. Without care, the player would come back to a burst of missed notes. Instead, when frames stall for more than 400 milliseconds, the game pauses, rewinds the song to where you last saw the notes, and counts you back in.
How PERFECT, GREAT and GOOD are judged
A note can be cut in a short window around the moment it reaches you, from a little before to a little after. To count as a hit, your saber has to pass close enough to the note. We check the whole path the saber travelled since the last frame, not just where it ended up. Fast swings can jump past a note between two camera frames, and this catches them.
The grade comes mostly from how fast you swing. A quick, committed swing earns PERFECT, a medium one earns GREAT, and a slow touch earns GOOD. Cutting very early drops the grade one step. PERFECT is worth 150 points, GREAT 110 and GOOD 70, before the multiplier.
This rule matches the feeling of the game. You are not tapping a button at the right instant, you are slicing through something, and a real slice is fast.
Multiplier, energy, and playing without a camera
Hits in a row build a combo. At 10 the multiplier goes to 2x, at 20 to 4x and at 30 to 8x, and the track, rings and lights grow more intense as it climbs. A miss resets the combo and the multiplier and drains your energy bar. Hits refill it, and PERFECT cuts refill it a little more. If the energy runs out, the run ends. Each difficulty keeps its own best score.
Not everyone has a webcam, or wants to use one. If the camera is unavailable, or while it is still loading, you can choose to play with the mouse. The left half of the screen drives the red saber and the right half drives the blue one, and swing speed comes from how fast you move the pointer. When a camera does come up, real hand tracking takes over.
Saber Blast works best in Chrome or Edge on a computer with a webcam. You can play Saber Blast free in your browser. If you enjoy browser-based tools as well as games, our apps studio at ThinkFlow Apps is where we build those. We would love to hear how the tracking feels on your setup.