# Animated QR codes

> An animated QR code is safe when every single frame decodes to the same payload on its own. Animate colours, module shapes or the background, never the data, and never leave a mid-transition frame that breaks modules. Export as GIF, APNG or video, and decode a sample of frames before publishing.

Source: https://useqr.app/docs/design/animated-qr-codes · Last reviewed 2026-08-21 · UseQR is free forever, no signup.

---

## The one rule

A phone camera does not watch your animation. It grabs individual frames, tens of
milliseconds apart, and tries to decode whichever one the shutter caught. So the safety
rule is absolute: **every frame must independently decode, and decode to the same
payload.** If that holds, animation costs nothing technically. If any frame fails, the
code scans intermittently and the user experiences a code that "sort of works", which
reads as broken.

## Safe to animate, unsafe to animate

| Safe | Unsafe |
|---|---|
| Module and background **colours**, provided every frame keeps ≥ **40% luminance difference**, dark on light | Changing the **payload** between frames, the phone acts on whichever frame it caught |
| Decoration outside the [quiet zone](/glossary/quiet-zone): frames, CTA text, glows | Moving the code's **position or scale** while people aim (see [QR codes on video](/docs/design/qr-code-on-video)) |
| Module **shape** morphs that keep each module's centre solid: rounded to square, say | Transitions that pass through **non-decoding intermediate frames** |
| A gentle sheen or pulse in brightness, within the contrast rule | Blinking, any frame where the code is absent or faded below contrast |

The subtle trap is the tween. Both end states of a styling transition can decode while the
in-between frames (modules mid-morph, colours mid-fade through grey) do not. Users then
see scan latency double or triple as the camera waits for a good frame, the mechanics of
which are covered in
[why some codes scan instantly](/docs/scanning/scan-latency-why-some-codes-scan-instantly).
The fix is editorial, not technical: cut between states rather than tweening, or keep
tweens so short (2–3 frames) that a failed grab retries into a clean frame immediately.

## Verifying an animation

Export, then decode a **sample of frames, including mid-transition ones**, not just the
resting state. Extract frames with any video tool and run each through the
[validator](/validate), or script it against the API:

```bash
ffmpeg -i animated-qr.gif frames/f%03d.png
# then POST each frame to https://useqr.app/api/v1/decode
```

Every frame should return the identical payload. One failing frame means redesigning that
moment of the animation, not shipping and hoping.

## Formats

**GIF** is universal and fine for flat-colour codes, but watch dithering, which speckles
solid modules with mixed pixels. **APNG** keeps full colour depth for gradients. **MP4/WebM**
suit [digital signage](/qr-codes-on/digital-signage) and
[livestream overlays](/qr-codes-on/livestreams), where video pipelines expect video. None
of this applies to print, which gets exactly one eternal frame.

## When animation earns its place

On screens, motion buys attention: a subtle pulse in a signage loop or stream overlay
draws the eye to the code far better than a static corner block. It costs scan time the
moment it violates the frame rule, and it adds nothing once the viewer has decided to
scan, from that point the animation is pure risk. The honest default: animate the
*surroundings* (frame, glow, CTA), keep the code itself rock-still, and leave it on screen
long enough to be used: see
[minimum on-screen duration](/docs/design/minimum-on-screen-duration-for-a-qr-code).

## FAQ

### Can a QR code be animated?

Yes, safely, if every single frame decodes on its own to the same payload. Cameras decode
from individual frames, so any frame that fails (mid-transition, faded, or blinked off)
makes scanning intermittent.

### Can an animated QR code change its destination?

No. Frames with different payloads mean the phone acts on whichever frame its shutter
caught, effectively a random destination. One animation, one payload. To change
destinations over time you need a redirect behind a static payload.

### What format should an animated QR code use?

GIF for universal embedding of flat-colour codes, APNG where gradients need full colour
depth, MP4 or WebM for signage and stream overlays. Whatever the container, verify by
extracting frames and decoding each one.

### Does animation make a QR code scan slower?

A compliant animation (every frame decodable) adds little. Any non-decoding frames force
the camera to wait for a clean grab, multiplying scan latency. Animating position or scale
is worse: it breaks the user's aiming loop entirely.

## Try it

- https://useqr.app/url
- https://useqr.app/validate