QR Code Demo

Interactive QR code component with animated verification states. Switch between 16+ and 18+ thresholds, simulate verification, and see the live animations.

scannable-qr

Locked: waiting for verifier scan… (QR is live & scannable)

How to Use

  • 1. Switch Thresholds: Click "16+" or "18+" buttons to change the QR code URL and see it update in real-time.
  • 2. Scan QR Code: The QR code is fully functional and scannable. It uses a live QR code API.
  • 3. Simulate Verify: Click "Simulate Verify" to see the verification animation (A-legs fade, ring draws, checkmark appears).
  • 4. Reset: Click "Reset to Locked" to return to the initial locked state with the blue orbiting dot.
  • 5. Custom URL: Edit the URL input field to generate a QR code for any custom link.

🎨 Visual Features

  • • Animated SVG logo with SMIL animations
  • • 3D orbital effect with depth modulation
  • • Smooth state transitions (locked ↔ verified)
  • • Tight feathered mask over scannable QR

⚙️ Technical Features

  • • Vanilla ES module (no dependencies)
  • • Live QR code generation via API
  • • Fully scannable with overlays
  • • Console assertions for runtime checks