I SMART QR
Create QR code
Animated QR · Lottie Studio

Animated QR codes,as real Lottie files.

Encode any link, style every module and marker, drop in a logo and frame, then export a scannable .json that plays in any Lottie player — web, mobile, or motion design.

Start building ↓ See use cases
ScannableGradient fillsLogo + frame5 reveal styles.json export
Design
Logo
Upload your own logo (PNG / JPG / SVG)
Frame
#0d0f12
Color
#0d0f12
#0B72E7
#0d9488
#0B72E7
#ffffff
Layout & motion
grid –modules –size –
●A center logo punches a hole in the code — use error correction Q or H so it still scans. Always test the export with a phone.

Guide how & why

A QR code is a grid of squares; a Lottie file is JSON describing vector shapes over time. This tool encodes your text into that grid, turns each module into an animated shape, and exports a self-contained .json any Lottie player can render.

Use cases

  • App & web loading states — a code that draws itself in on splash screens, “scan to continue” handoffs, or device pairing.
  • Marketing & print-to-digital — branded codes (logo + gradient + “SCAN ME” frame) for posters, packaging, cards, and event signage.
  • Onboarding & payments — scan-to-pay, scan-to-download, or table-side menus, where motion draws the eye better than a flat code.
  • Slides & video — drop the Lottie into Keynote, After Effects, or a web embed so the code animates on reveal.
  • Your own products — embed via lottie-react / lottie-web for invoice links, dashboards, or shareable record links.

How to use it

  1. Encode — type a URL or text; the code regenerates live.
  2. Design — pick a Pattern, then Marker border and Marker center for the corner eyes.
  3. Logo — upload an image or pick a watermark; set its size, keep “Clear modules behind” on.
  4. Frame — choose a label style, then set label text, font, size, radius, and color.
  5. Color — solid or gradient fill, optional accent eyes, background or transparent.
  6. Motion — set animation, duration, quiet zone, module gap, and error correction.
  7. Export — Download .json (or Copy) and load it into any Lottie player.

⚠ Before you ship

Bump error correction to Q or H whenever you add a logo or heavy styling — it gives the scanner room to recover the altered area.

Test the actual export by scanning it with a phone. The preview can’t confirm a code decodes — only a real scan can.

Embed the export

// Web component — drop anywhere in HTML
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="qr-lottie.json" autoplay loop style="width:240px"></lottie-player>

// React — lottie-react
import Lottie from "lottie-react";
import data from "./qr-lottie.json";
<Lottie animationData={data} loop />
Copied