Visual Gamepad Overlay

Quick start

1. 1
   Connect your controller. Plug it in over USB, or pair it over Bluetooth in your device settings first.
2. 2
   Press any button first. Browsers will not notice a controller until they see its first input.
3. 3
   Watch the image come alive. Every press, pull, and tilt updates instantly, frame by frame.

Live overlay

How the overlay responds

Pressed buttons light up

Every face button, bumper, D-pad direction, and stick click switches instantly from its resting outline to a solid orange glow the moment it registers as pressed, and clears the instant it releases. There is no delay added by this page itself, whatever lag you see reflects your controller and connection, not the overlay.

Triggers animate

LT and RT are drawn as fillable bars rather than simple buttons, since most controllers report them as analog inputs with a real range of pull rather than a single on or off state. The fill animates continuously from empty to full as you squeeze, matching your finger's motion rather than snapping straight to either end.

Sticks move in real time

Each stick's thumb shape slides smoothly within its ring to mirror your controller's actual reported position, updating every frame rather than on a delay or a fixed interval. Letting go should return the dot cleanly to dead centre, and a dot that settles off centre while you are not touching the stick is a visible, immediate sign of drift.

Brand detection and theme

The overlay reads your controller's identifying string and switches face button labels automatically, A, B, X, Y for an Xbox style pad, or Cross, Circle, Square, Triangle for a PlayStation style pad, without you needing to choose manually. The theme switcher is purely visual, Light and Dark suit most normal viewing, and Green screen fills the stage with a flat colour built specifically for chroma keying out in OBS or a video editor.

Where this is actually useful

Beyond simply confirming your controller works, a live visual overlay earns its place in a few specific situations. Streaming or recording gameplay where viewers benefit from seeing exactly what you pressed without you narrating every input. Teaching or demonstrating a specific input sequence to someone else, where pointing at a lit up button is far clearer than describing it in words. And simply double checking your own execution after a tricky moment in a game, glancing back at what the overlay showed in the seconds before something went wrong.

Connecting by device

Windows and Mac

Plug in over USB, or pair over Bluetooth in your system settings first. Chrome, Edge, and Firefox all support the controller out of the box once it is paired.

Android phone and tablet

Pair the controller in your device's Bluetooth settings, then open this page in Chrome. Other Android browsers vary in their support.

iPhone and iPad

Pair an MFi or Bluetooth controller in Settings, then open this page in Safari. iOS has supported the same Gamepad API since version 14.5.

Linux

Plug in over USB or pair over Bluetooth, then use Chrome or Firefox. Some distributions need a one time udev rule for certain Bluetooth controllers to be recognised by the operating system at all. If the controller is not visible at the system level, it will not be visible here either.

Troubleshooting

The image is not lighting up at all

Press a button first, many browsers will not register a controller until they see its first input. Confirm the status indicator at the top of the tool shows a controller connected before assuming the overlay itself is broken.

The labels show the wrong button names for my controller

Brand detection relies on text your controller and operating system report, and a small number of third party or unusual controllers do not report a clear enough string to detect from. The overlay will still track every input correctly, just under generic positional labels rather than brand specific ones.

Green screen keying still shows a faint background

Crop your capture or browser source tightly to just the stage area, and check your keying tool's similarity or tolerance setting, since too narrow a tolerance can leave a thin fringe of the original colour around each shape's edge.

A stick dot does not return fully to centre when released

This is a genuine sign of stick drift rather than an overlay display issue. Confirm it with a longer, dedicated check on the Drift Tester before assuming anything about the hardware.