QR code overlay for streams and videos

An animated QR code with a see-through background, so you can drop it over your stream or video. Viewers scan it straight off the screen.

Code shape
What stands on your code?
Add text
Animation
Background

Free, with no sign-up and no watermark. If it saved you some time, you can buy me a coffee.

How to use it

  1. Paste the link you want viewers to open: your shop, Discord, tip page or socials.
  2. Pick what stands on your code. A brand logo or a short word on a sign works well on a stream.
  3. Set a longer time on the code, about 4 to 6 seconds, so viewers can scan it.
  4. Download the transparent video and add it to your scene or edit.

What you download

Depending on your browser, the transparent download is either a WebM video with a see-through background, or a ZIP of see-through PNG frames.

  • OBS: add the WebM as a Media Source and turn on Loop.
  • Premiere, DaVinci Resolve, After Effects, Final Cut: import the WebM, or import the PNG frames as an image sequence.

Tips for streams

  • Place it in a corner where it won’t cover your face or game UI.
  • Make it at least about a fifth of the screen height so phones can read it off a TV or monitor.
  • Use a short link. Fewer squares scan from further away.

How it works

It is the same 3D illusion as the other animated tools: cubes stand on the dark squares of your code and fold back into a flat QR code when the camera looks straight down. For an overlay, the background is left out. Only the scene and the code are drawn, and everything else is see-through, so your stream or footage shows around them.

A QR code needs a light background to scan. Place the overlay over a light, plain part of the picture, or put a light panel behind it in your scene.

Adding it in OBS Studio

  1. In your scene, add a new Media Source.
  2. Choose the WebM file you downloaded and tick Loop.
  3. Drag it into place in the preview and resize it from the corners.
  4. If the area behind it is dark or busy, add a light Color Source below it as a backing card.

What to link to

  • Your tip or membership page during a stream.
  • Your Discord server or community.
  • Merch or a sponsor’s offer, with the deal in the headline.
  • The next video, a playlist or your socials at the end of a video.

Questions

Why is it sometimes PNG frames instead of a video?

Not every browser can make video with a see-through background. When yours can’t, you get the same animation as numbered PNG frames, which video editors import as an image sequence.

Can viewers really scan it off a stream?

Yes, while it shows the code, as long as it is big enough on screen and the stream quality is decent.

What if my editor can’t use the transparent file?

Most editors that handle transparency accept a WebM with a see-through background or a PNG image sequence. If yours accepts neither, use the regular MP4 and place it over a light, plain area.

Is it free?

Yes, with no sign-up and no watermark.

How big should the overlay be on screen?

At least about a fifth of the screen height. Bigger is better for viewers watching on a TV from across a room.

Try another tool

Buy me a coffee