Glass QR Code

Component 3

About

A QR code rendered on a frosted glass tile with rounded or dotted modules, an optional centered logo or auto-detected site favicon, and an optional drifting glass lens effect.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glass QR Code to your project and fits it to your theme.

Code

How Glass QR Code is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { GlassQRCode } from "@/components/ui/glass-qrcode";

export default function GlassQRCodeDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-gradient-to-br from-indigo-200 via-fuchsia-100 to-emerald-200 p-10 dark:from-indigo-950 dark:via-fuchsia-950 dark:to-emerald-950">
      <GlassQRCode
        value="https://opaline.buildlab.in"
        logo={
          <img
            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+CiAgPGRlZnM+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9Im8iIGN4PSIzMiUiIGN5PSIyNiUiIHI9Ijg2JSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuMyIgc3RvcC1jb2xvcj0iI2ZmZDZlYyIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNTUiIHN0b3AtY29sb3I9IiNjN2Q4ZmYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjgiIHN0b3AtY29sb3I9IiM5ZmU4ZDQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjYjk5Y2ZmIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyIiB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iMSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDxjaXJjbGUgY3g9IjMyIiBjeT0iMzIiIHI9IjI5IiBmaWxsPSJ1cmwoI28pIi8+CiAgPGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMjguNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMWQxZDFmIiBzdHJva2Utb3BhY2l0eT0iMC4xOCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KICA8ZWxsaXBzZSBjeD0iMjMiIGN5PSIxOSIgcng9IjExIiByeT0iNS41IiBmaWxsPSJ1cmwoI3IpIiB0cmFuc2Zvcm09InJvdGF0ZSgtMjggMjMgMTkpIi8+Cjwvc3ZnPg=="
            alt=""
          />
        }
        label="Scan to open"
      />
    </div>
  );
}