67:I[8054,["/_next/static/chunks/0n8co495bugh0.js","/_next/static/chunks/0csmpwpm9scwv.js","/_next/static/chunks/2tf14-0oaa2ok.js","/_next/static/chunks/0i6pfab6ujd9i.js","/_next/static/chunks/32u7gfw7_j3cs.js"],"EffectCard"] 68:Tc53,.fx-modal-lagoon-qr { position: relative; width: 300px; height: 190px; overflow: hidden; border-radius: 14px; border: 1px solid rgba(45, 212, 191, 0.2); background: linear-gradient(160deg, #13211f, #070d0c); perspective: 820px; font-family: system-ui, "Segoe UI", sans-serif; color: #ddf4ef; } .fx-modal-lagoon-qr-gate { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .fx-modal-lagoon-qr-page { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .fx-modal-lagoon-qr-open { padding: 9px 20px; border-radius: 8px; border: 1px solid rgba(45, 212, 191, 0.42); background: rgba(45, 212, 191, 0.1); color: #5eead4; font-size: 12.5px; cursor: pointer; } .fx-modal-lagoon-qr-veil { position: absolute; inset: 0; background: rgba(3, 9, 8, 0.74); opacity: 0; visibility: hidden; pointer-events: none; cursor: pointer; transition: opacity 0.3s ease, visibility 0.3s; } .fx-modal-lagoon-qr-card { position: absolute; inset: 30px 20px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 13px; border: 1px solid rgba(45, 212, 191, 0.28); background: #101c1a; box-shadow: 0 22px 42px rgba(0, 0, 0, 0.66); transform: rotateY(-104deg); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.56s cubic-bezier(0.24, 1, 0.32, 1), opacity 0.22s ease, visibility 0.56s; } .fx-modal-lagoon-qr-close { position: absolute; top: 6px; right: 8px; color: #6d9992; font-size: 14px; line-height: 1; cursor: pointer; } .fx-modal-lagoon-qr-code { position: relative; width: 88px; height: 88px; flex: none; border-radius: 6px; background: #e4fbf5; } .fx-modal-lagoon-qr-mesh { position: absolute; inset: 7px; background-image: conic-gradient(#0a1a18 0 25%, transparent 0 50%, #0a1a18 0 75%, transparent 0), repeating-linear-gradient(90deg, #e4fbf5 0 8px, transparent 8px 32px), repeating-linear-gradient(0deg, #e4fbf5 0 8px, transparent 8px 40px); background-size: 8px 8px, 100% 100%, 100% 100%; } .fx-modal-lagoon-qr-eye { position: absolute; width: 20px; height: 20px; border: 4px solid #0a1a18; border-radius: 3px; box-shadow: inset 0 0 0 3px #e4fbf5; background: #0a1a18; } .fx-modal-lagoon-qr-code .fx-modal-lagoon-qr-eye:nth-child(2) { top: 7px; left: 7px; } .fx-modal-lagoon-qr-code .fx-modal-lagoon-qr-eye:nth-child(3) { top: 7px; right: 7px; } .fx-modal-lagoon-qr-code .fx-modal-lagoon-qr-eye:nth-child(4) { bottom: 7px; left: 7px; } .fx-modal-lagoon-qr-side { display: flex; flex-direction: column; gap: 5px; } .fx-modal-lagoon-qr-title { font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; } .fx-modal-lagoon-qr-sub { font-size: 10px; line-height: 1.5; color: #86ada7; } .fx-modal-lagoon-qr-gate:checked ~ .fx-modal-lagoon-qr-veil { opacity: 1; visibility: visible; pointer-events: auto; } .fx-modal-lagoon-qr-gate:checked ~ .fx-modal-lagoon-qr-card { transform: rotateY(0deg); opacity: 1; visibility: visible; pointer-events: auto; }6:["$","main",null,{"className":"page-shell","children":[["$","script",null,{"type":"application/ld+json","suppressHydrationWarning":true,"dangerouslySetInnerHTML":{"__html":"[{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://librarycss.com/en\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"#qr\",\"item\":\"https://librarycss.com/en/tags/qr\"}]},{\"@context\":\"https://schema.org\",\"@type\":\"CollectionPage\",\"name\":\"qr CSS effects\",\"description\":\"Free CSS effects tagged \\\"qr\\\".\",\"url\":\"https://librarycss.com/en/tags/qr\",\"inLanguage\":\"en-US\",\"mainEntity\":{\"@type\":\"ItemList\",\"numberOfItems\":1,\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Lagoon QR Modal\",\"url\":\"https://librarycss.com/en/effects/modal-lagoon-qr\"}]}}]"}}],["$","div",null,{"className":"page-container max-w-[1500px]","children":[["$","nav",null,{"aria-label":"Breadcrumbs","className":"min-w-0","children":["$","ol",null,{"className":"flex flex-wrap items-center gap-1 text-xs text-[color:var(--muted)]","children":[["$","li","/en",{"className":"flex min-w-0 items-center gap-1","children":[false,["$","$L18",null,{"href":"/en","className":"truncate hover:text-[color:var(--foreground)]","children":"Home"}]]}],["$","li","/en/tags/qr",{"className":"flex min-w-0 items-center gap-1","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":12,"height":12,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-right shrink-0 text-[color:var(--faint)]","aria-hidden":true,"children":[["$","path","mthhwq",{"d":"m9 18 6-6-6-6"}],"$undefined"]}],["$","span",null,{"className":"truncate font-medium text-[color:var(--foreground)]","aria-current":"page","children":"#qr"}]]}]]}]}],["$","header",null,{"className":"mt-4","children":[["$","h1",null,{"className":"text-3xl font-bold tracking-[-0.04em] text-[color:var(--foreground)] sm:text-4xl","children":["#","qr"," CSS effects"]}],["$","p",null,{"className":"mt-3 max-w-3xl text-sm leading-6 text-[color:var(--muted)]","children":["1"," free, pure-CSS effects match the \"","qr","\" tag. Each is copy-ready and needs no library or build step."]}]]}],[["$","h2",null,{"className":"sr-only","children":"Effects tagged #qr"}],["$","div",null,{"className":"mt-7 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4","children":[["$","$L67","modal-lagoon-qr",{"effect":{"id":"modal-lagoon-qr","title":"Lagoon QR Modal","category":"Modals","description":"A pass panel flips on its vertical axis to reveal a scannable code block and claim line.","tags":["modal","qr","flip","rotate"],"html":"","css":"$68","previewVideoUrl":null},"hrefPrefix":"/en/effects","locale":"en"}]]}]],"$L69","$L6a",null]}]]}]

Effects tagged #qr

Lagoon QR Modal

Popular tags