-
-
UI
-
Logo
Inspiration
QR codes are everywhere—flat, static, and easy to ignore. We kept seeing them on posters, flyers, packaging, and especially in advertising, where they blend into the background and get zero attention. But motion naturally grabs the eye. What if a QR code could move? What if it could be a visual asset, not just a link? That’s how AnimQR was born: a tool that turns ordinary links into animated, scannable QR codes built for advertising.
What it does
AnimQR is an animated art QR code generator. You paste a link, choose a style, and it creates a QR code that moves, glows, and still scans perfectly. It’s designed for advertising first—digital billboards, social media ads, video pre-rolls, event screens, out-of-home displays, retail screens, and promotional landing pages.
In simpler words, it merges a GIF file with your QR code.
Key features:
Built-in animations: rocket, car, flame (procedural, no external files).
Custom GIF upload: drag and drop your mascot, animated logo, or meme—AnimQR fuses it into the QR while keeping it scannable.
Fancy borders: neon, floral, starry, pixel, circuit, Chinese, gold.
Center logo support, batch generation, error correction levels (L/M/Q/H), module shapes (square, liquid, dot).
Fine-grained rendering controls: detail strength, hue coherence, soften, dark/light luminance, vividness, module size.
Export as GIF or PNG, or share directly.
Monetization: Free preview of every style and premium feature. But if you use any Pro element (custom GIF, premium border, batch mode, center logo) and try to export, a soft paywall appears. Pro unlocks watermark-free HD GIF/PNG exports, unlimited history, and all premium features. Plans include 7-day free trial, monthly, yearly, lifetime, and a limited 3-day Pro pass.
How we built it
We built AnimQR as a single-page web app using vanilla HTML, CSS, and JavaScript, with:
QRCode.js for QR generation.
Canvas for all rendering, including subpixel-level animation (6×6 subpixels per QR module).
gif.js for GIF encoding, with web workers for performance.
RevenueCat (via Capacitor) for in-app purchases on native, with a web mock for UI testing.
A custom GIF decoder (with fallback to ImageDecoder) to parse uploaded GIFs into full frames.
Color science utilities: HSL conversion, hue coherence, palette snapping, luminance capping to keep contrast high enough for scanning.
The core pipeline: Generate QR → decode/load animation frames → map each frame onto QR modules → apply borders, logo, and effects → play in preview → export GIF/PNG
Challenges we ran into
Keeping it scannable: Adding animation, borders, and logos easily breaks QR scanning. We had to enforce quiet zones, luminance caps/floors, and error correction. We also built a “gray-frame color guard” to prevent frames from losing contrast.
Subpixel rendering performance: Rendering 6×6 subpixels per module for every frame on mobile required careful optimization. We used offscreen canvases and typed arrays.
GIF decoding: Browsers don’t natively expose full GIF frames easily. We wrote an inline LZW decoder and a compositor to handle transparency, disposal methods, and interlacing.
Soft paywall UX: We wanted users to try everything for free, but still convert. The challenge was making the paywall appear only on export when Pro features are used—without feeling like a bait-and-switch.
Cross-platform IAP: RevenueCat integration works on native via Capacitor, but on web we needed a mock. We had to design the code to gracefully fall back.
Mobile layout: The QR preview was initially too large on phones, pushing the controls off-screen. We had to rework the mobile CSS to shrink the preview and make it collapsible.
Accomplishments that we're proud of
A fully functional animated QR generator that produces scannable codes even with complex animations and decorative borders.
The soft paywall model: free users can preview every premium feature, but export triggers an upgrade prompt only if they’ve used Pro elements. It feels fair and converts. The subpixel rendering engine that lets you dial detail strength, hue coherence, and luminance while maintaining scanability. A wide range of borders and themes (neon, floral, starry, circuit, Chinese, gold) that are procedurally drawn, not just static images. Custom GIF upload with full frame decoding, so users can bring their own brand assets. A clean, responsive UI that works on desktop and mobile, with sticky export controls and history.
What we learned
QR error correction and quiet zones are non-negotiable. You can push the art far, but you must respect the underlying encoding.
Animation on Canvas is fast, but mobile Safari and low-end Android devices need careful memory management.
A soft paywall is a powerful model: give value first, gate the export. It builds trust and still drives conversions.
GIF encoding is CPU-heavy; web workers and frame count limits are essential.
RevenueCat + Capacitor works well, but testing IAP requires a real device—web mock is fine for UI but not for store review.
Users love customization, but too many sliders can overwhelm. We kept advanced settings collapsed by default.
What's next for AnimQR
More built-in animations (e.g., product demos, seasonal effects, brand-specific loops). Template marketplace for ad campaigns—pre-made animated QR designs for different industries. Video export (MP4/WebM) in addition to GIF, for higher quality on large screens. Direct integrations with ad platforms (e.g., Google Ads, Meta Ads) to generate animated QR codes from campaign links. A/B testing tools to compare scan rates between static and animated QR codes. More Pro features: team collaboration, brand kits, custom watermarks, analytics on scans. Native mobile apps (iOS/Android) with full RevenueCat IAP, offline generation, and camera preview. Open-source contributions: we’re on GitHub and welcome stars, issues, and pull requests.
Additional information
For quick preview, you can just download the index.html in the www folder and open it locally in your browser(certain browser may not support). Npm install the app for full features.
AnimQR – Motion Beyond Pixels. Stop settling for static squares. Bring your links to life.
Log in or sign up for Devpost to join the conversation.