Holographic QR Code Generator
About this app
Create and animate holographic QR codes with a premium shimmering overlay. Perfect for events and modern marketing.
Holographic QR Code Generator Holographic QR Code Generator Scan the QR code above for more!
Put this on your site
Related apps
VoiceSong Studio - Créez votre propre hit !
Baccara Suite Master - Prédiction 1xBet & Casino
Elite Baccarat - Professional Casino Experience
YTPMV Scan - Ultimate Meme Sequencer
YTPMV Scan - Ultimate Audio Visual Sequencer
Pro-Roulette 0-14 Predictor | Advanced Strategic Analytics
Twelve - The Ultimate 12-Step Daily Harmony Planner
Otter Python - Calc Runner Game
Harmony - Гид по здоровым отношениям и романтике
LoopTube 2016 - Infinite Video Looper & Repeater
VoxTransform - 50+ Pro Video Voice Effects
TinyTip | Simple Tip Calculator & Bill Splitter
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Holographic QR Code Generator</title>
<meta name="description" content="Create and animate holographic QR codes with a premium shimmering overlay. Perfect for events and modern marketing.">
<meta name="keywords" content="QR Code, Holographic, Animation, Shimmer, Expo, React Native, Web App">
<!-- Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
// App Javascript Goes Here
function generateQRCode(text) {
const size = 256;
const qrCode = new QRious({
element: document.getElementById('qr-code'),
value: text,
size: size
});
}
function startShimmer() {
const shimmer = document.getElementById('shimmer');
shimmer.classList.add('shimmer-animation');
shimmer.style.visibility = 'visible';
}
document.addEventListener("DOMContentLoaded", function() {
generateQRCode("https://example.com");
startShimmer();
});
} catch (error) {
throw error;
}
</script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(115deg, #6D5B93, #B49BC8);
color: white;
}
#main-container {
text-align: center;
}
#qr-code {
border: 8px solid transparent;
border-radius: 15px;
position: relative;
overflow: hidden;
animation: rotateY 3s infinite alternate;
}
#shimmer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(270deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
visibility: hidden;
}
@keyframes rotateY {
0% { transform: perspective(800px) rotateY(0deg); }
100% { transform: perspective(800px) rotateY(20deg); }
}
.shimmer-animation {
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% {
background-position: -200px 0;
}
100% {
background-position: 200px 0;
}
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Holographic QR Code Generator</h1>
<div id="qr-code">
<canvas id="qr-code"></canvas>
<div id="shimmer"></div>
</div>
<p>Scan the QR code above for more!</p>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!