How it works

SignBridge turns hand landmarks into language — entirely in your browser, in real time.

  1. 01

    Webcam Capture

    Your browser streams live video from your webcam at 30 fps. No video is ever uploaded — everything stays on your device.

  2. 02

    Hand Detection

    MediaPipe Hands locates your hand in each frame and extracts 21 3D landmarks — one per joint and fingertip.

  3. 03

    Gesture Classification

    A neural network classifies the landmark pattern against ASL alphabet gestures and returns a letter with a confidence score.

  4. 04

    Temporal Smoothing

    We require a gesture to be held stable for ~18 consecutive frames to avoid accidental input from transition movements.

  5. 05

    Text Assembly

    Confirmed letters are appended to the text buffer. A 'space' gesture inserts word boundaries, building full sentences.

Tech Stack

  • Next.js 14 — App Router, TypeScript
  • MediaPipe Tasks Vision — hand landmark detection + gesture recognition (WASM + WebGL)
  • TailwindCSS — styling
  • Canvas API — real-time 21-point landmark overlay
  • No backend — fully client-side, zero data leaves the browser
Start Translating →