Blow out the candle 🎂মোমবাতি নিভিয়ে দাও

Happy Birthday !

tap the balloons ✦

Happy Birthday
!

Tap to open

The Day one of My Favorite Person Was Born

Today Is All About You

A Little Letter

You are a moon

And Who could get tired of looking at you?

Message for you

One Last Surprise

Scratch the card above ✨

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Interactive wishing Wall</title>
<style>
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{font-family:Georgia,serif;background:#09050d;color:#fff;touch-action:none}

#scene{
    position:relative;width:100vw;height:100vh;overflow:hidden;
    background-color: #09050d; 
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDRwouPKSB1F2pzZPeVfKpJ9eseMKHDHn5MdZrHHzTV_fsQ80MlbYBPxlml8SHM2vfu4Xqc4UFZ2GsPQ9YcQKACUMbEjg9nGI4ryCqOaZlE2FBhBVPCxJTb3Vo7EOl0CHOnJ1H9-nOtNZ-1nin-eSViKjPsBenH0YI-S67m4IAk1gF_NOxixCMhlHMtFVz/s453/1000353027.gif'); 
    background-size: cover; background-position: center; background-repeat: no-repeat;
}

#hint{position:absolute;z-index:20;top:22px;left:50%;transform:translateX(-50%);
font:13px Arial;color:#f7dbea;background:rgba(0,0,0,0.4);border:1px solid #ffffff20;
padding:9px 15px;border-radius:30px;transition:opacity .8s; white-space:nowrap;}
#world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d; z-index:10;}

.card{position:absolute;width:110px;height:150px;left:-55px;top:-75px;
border-radius:15px;overflow:hidden;backface-visibility:hidden;
border:1px solid rgba(255,255,255,0.2);background:#160b18;
box-shadow:0 10px 25px rgba(0,0,0,0.6);will-change:transform, opacity; transition: opacity 0.5s;}
.card img{width:100%;height:100%;object-fit:cover;display:block;}
.card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,#050207dd)}
.caption{position:absolute;z-index:2;left:12px;right:12px;bottom:12px;font-size:14px;line-height:1.25;text-shadow:0 2px 8px #000}
.small{font:11px Arial;color:#ffd4e9;display:block;margin-top:4px}
.heart{position:absolute;bottom:0;color:#ff8fc6;font-size:18px;opacity:.55;animation:float linear forwards; z-index: 11; will-change: transform;}

@keyframes float{
    0% { transform: translateY(10vh) rotate(0deg); opacity: 0.55; }
    100% { transform: translateY(-110vh) rotate(240deg); opacity: 0; }
}

.btext {
    position: absolute; bottom: 0; font-family: Georgia, serif;
    font-size: clamp(20px, 5vw, 38px); font-weight: bold; color: #fff;
    text-shadow: 0 0 10px #aa44ff, 0 2px 5px rgba(0,0,0,0.8);
    animation: birthdayUp linear forwards; pointer-events: none;
    z-index: 12; text-align: center; will-change: transform, opacity;
}
@keyframes birthdayUp{
    0%{ transform: translateY(10vh); opacity:0 }
    10%{ opacity:1 }
    80%{ opacity:1 }
    100%{ transform: translateY(-110vh); opacity:0 }
}
#held{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font:14px Arial;color:#ffd9e9;opacity:.85;font-weight:bold;white-space:nowrap;text-shadow:0 2px 5px #000; z-index:20;}
</style>
</head>
<body>
<div id="scene">
<div id="hint">👆 Drag around • Hold a card to catch & move it</div>
<div id="world"></div>
<div id="held"></div>
</div>
<script>

const data=[
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlyiFGexbC4MhReH-XM5x8LDIJy2isAELYHewweMByslfGF1A6PPkaKFfwOqH0mnZKVHHEBJNUUAztkEvRnWzm-VNJouDoU1uBE34UAUVbzcu1Ogm8b_6P0EZ5Lf21PmPbeKWrBs5dEFwiwRnAS4merTyd3zdEfgODwxEEKF1eOKltwYSh7HHumo7BI6Md/s960/1000339917.jpg","","Happy Birthday 🎂"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfj6tSYR9i1jvRPzJDNl7F81t9x_uj-wo2hLEsQPPyBiChAYUcikFz-zkWr5F7KiBZ1XH0AFeaIXecg8ty3a0jqL0iRFFQwE07IzzvwDZXhnJRRH0wK_rKvw2sNkwMngbU9Y_Syd4XC-by1nA20cksZSihxQNe9HlI-G2W2ycDHZu7ZEc2KtDokh4NrRto/s1195/1000342276.png","","Have a good day 🌻"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbB_SIyCEzLDlv3lU7tJ2MhXX0cugji92Z7jB3tSh1EkpdglXynh06KJe-0FeXIz1TUHX8__UVKXJBnk8RqyzSXdNEdj8bnPWku0CN0fy_izZptjquW5JN2CBhSSpDIv1rXdRkAUQbpIaHW36pBq-L48qrR90bm1AIialz98wSTf6V_NUGEIPjm6QRAMfX/s1195/1000342270.png","","তাকাইছো কোন দিকে?"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFakeCVwIdOebsuaAOo-goSoyFstR6IoMdhqMRQ0_SaPdeQRqBxza6lQmvmqwzkePHirtE7oT4OIcBOQrwBHnPnoUyZ7uUIqJseS84HliacvPgPGqaZJBCOjkFtX5qocc8hghBzVezupx-6fJ34ne5lomKtLAXISfr1JQEpCdcPNRzwUbd_8J-mRexnBaO/s960/1000339916.jpg","এই হাসিটা সবসময় এমনই থাকুক। 💗","বই পড়ে বোর হাওনা?"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqJ9lRD7MiU2fcr-EHJ9QdY2D66utD8kz6vaq7mDtGdhXKSjR-saF2IP9v64k8HCYv6_ihJvgNsGFHJVZT_zyx0CVamZkIsdaD-q4S7D2r4RXMSIQd11BRiIQ3NYsihD0L_GJy5_GDbJ1QVXssrod0l4x_NrpiCrB7o_u6ZBZk9qEBTE9edk2QUGSALaPm/s1195/1000339954.jpg","শেষে শুধু এটুকুই বলি—তুমি অনেক precious। 💖","সৌন্দর্যের প্রশংসা করা ভালো"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUKPrzJEXdwHH48iZyYocfQhDEiIjCooANgMjVJC7fZI_acZLsrbY3LVeTE8H7xo-RTHmlLA7SySE_bga_qA3RroSdkcInEiLSJu7IxRPf5LXvAJ-UaG4zLPnILjwEjaKkiooNnCJqpnoZo-iN6pJ0AUFFO15VIppNHbKN8o80w1YTAB4XZ983DLc_i30w/s960/1000339915.jpg","বাচ্চা মানুষ🙂‍↕️","সুইট"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKzXaL-W3hFRHya1zpu14kXZUVinIsVCK8QFPGAkDewrW9Hw6kVg9TrtmV20xKn6lc-LQs4VG2QQcQAF_cJhC2z2dyyre-fDmlqHzf3tdFciPcjOE80YrgAHisYK4SaxJbAkJJIrSUfeZLE3HPs4O6aZa_VYVIaw2BbXQrIHVvxweI3rMQVaNFjNlrAImi/s409/1000339910.jpg","",""],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3p4JPxLbctaj8xsCulIPqscLafW2OBLnE8DKVDai4_na76t4MQOax4bReoFfCTe4NTjOYwLujyPiqtWAk8gg78O7txXHFyJlixbHFsBL0Zxj0WQznx4briW7cVArpFA_K3ljRiCUWGB_GuvbkYZZfCZbXiieRKQDCxX-ewfADasY3HPIut6RB3C5qkZwF/s960/1000339911.webp","",""]
];

let angle=0, tilt=0, down=false, lastX=0, lastY=0, held=null, holdTimer=null;
let rotSpeed = 0.002, targetRotSpeed = 0.002; 
let ySpeed = 1.2, targetYSpeed = 1.2;

function layout(t){
 rotSpeed += (targetRotSpeed - rotSpeed) * 0.05; ySpeed += (targetYSpeed - ySpeed) * 0.05;
 angle += rotSpeed;
 cards.forEach((c,i)=>{
   if(c===held) return; 
   let a = angle + i * 0.45; let x = Math.sin(a * 0.85) * 230; let z = Math.cos(a) * 280;
   let scale = 0.65 + (z + 280) / 900; let rot = Math.sin(a) * 18 + tilt;

if (c.hiddenTime > 0) {
       if (Date.now() - c.hiddenTime >= 7000) {
           c.hiddenTime = 0; c.style.opacity = 1; c.style.pointerEvents = 'auto';
           c.customY = (ySpeed >= 0) ? 750 : -750; 
       }
   } else {
       c.customY -= ySpeed;
       if (c.customY < -750 && ySpeed >= 0) { c.hiddenTime = Date.now(); c.style.opacity = 0; c.style.pointerEvents = 'none'; } 
       else if (c.customY > 750 && ySpeed < 0) { c.hiddenTime = Date.now(); c.style.opacity = 0; c.style.pointerEvents = 'none'; }
   }
   c.baseX = x; c.baseY = c.customY; c.baseZ = z; c.baseScale = scale; c.baseRot = rot;
   if (c.hiddenTime === 0) {
       c.style.transform=`translate3d(${x}px,${c.customY}px,${z}px) rotateY(${rot}deg) scale(${scale})`;
       c.style.zIndex=Math.floor(z+500);
   }
 });
 requestAnimationFrame(layout);
}
requestAnimationFrame(layout);

const scene = document.querySelector("#scene");
scene.addEventListener("pointerdown",start);scene.addEventListener("pointermove",move);
scene.addEventListener("pointerup",end);scene.addEventListener("pointercancel",end);
scene.addEventListener("touchstart",start,{passive:false});scene.addEventListener("touchmove",move,{passive:false});
scene.addEventListener("touchend",end);

setInterval(()=>{const h=document.createElement("span");h.className="heart";h.textContent=["♥","♡","✨"][Math.floor(Math.random()*3)];
h.style.left=Math.random()*100+"vw";h.style.animationDuration=9+Math.random()*6+"s";scene.appendChild(h);setTimeout(()=>h.remove(),11000)},1000);

const floatingMessages = [
    "Happy Birthday Mahi 🎂💖",
    "Tahi? Nope Mahi, but Sunflower Will be more exact 🌻",
    "Someone else? ✨",
    "সবসময় এভাবেই হাসিখুশি থেকো ❤️",
    "To infinity and beyond 🚀",
    "Take Love",
    "Care as well"
];

function spawnText() {
    const txt = document.createElement("div"); txt.className = "btext";
    const randomMsg = floatingMessages[Math.floor(Math.random() * floatingMessages.length)];
    txt.innerHTML = randomMsg;
    txt.style.left = Math.floor(5 + Math.random() * 70) + "vw"; 
    txt.style.animationDuration = (14 + Math.random() * 6) + "s"; 
    scene.appendChild(txt); setTimeout(() => txt.remove(), 21000); 
}
setInterval(spawnText, 4500); spawnText(); setTimeout(spawnText, 2000); 
</script>
</body>
</html>

Happy Birthday