<!DOCTYPE html>

<head>

<title>Happy New Year 2026</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:wght@900&family=Orbitron:wght@700&family=Poppins:wght@300;400&display=swap');

body {

margin: 0;

padding: 0;

overflow: hidden;

/* Dynamic Gradient Background */

background: linear-gradient(-45deg, #0f0c29, #302b63, #24243e, #4a192c);

background-size: 400% 400%;

animation: gradientBG 15s ease infinite;

font-family: 'Poppins', sans-serif;

color: white;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

transition: transform 0.1s;

}

@keyframes gradientBG {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}

/* Shooting Stars */

.shooting-star {

position: absolute;

top: 50%;

left: 50%;

width: 4px;

height: 4px;

background: #fff;

border-radius: 50%;

box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1), 0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 1);

animation: shoot 3s linear infinite;

opacity: 0;

z-index: 1;

}

.shooting-star::before {

content: '';

position: absolute;

top: 50%;

transform: translateY(-50%);

width: 300px;

height: 1px;

background: linear-gradient(90deg, #fff, transparent);

right: 1px;

}

.shooting-star:nth-child(1) { top: 0; left: 20%; animation-delay: 0s; animation-duration: 4s; }

.shooting-star:nth-child(2) { top: 10%; left: 70%; animation-delay: 2s; animation-duration: 6s; }

.shooting-star:nth-child(3) { top: 30%; left: 40%; animation-delay: 1s; animation-duration: 5s; }

@keyframes shoot {

0% { transform: rotate(315deg) translateX(0); opacity: 1; }

70% { opacity: 1; }

100% { transform: rotate(315deg) translateX(-1500px); opacity: 0; }

}

/* Canvas */

#canvas {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 2;

mix-blend-mode: screen;

}

.container {

position: relative;

z-index: 10;

padding: 20px;

width: 100%;

max-width: 1100px;

}

/* Glass Card */

.glass-card {

background: rgba(255, 255, 255, 0.03);

backdrop-filter: blur(25px);

border: 1px solid rgba(255, 255, 255, 0.3);

padding: 70px;

border-radius: 40px;

box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 20px rgba(255,255,255,0.05);

transition: all 0.8s ease;

}

input {

background: transparent;

border: none;

border-bottom: 2px solid #fff;

padding: 15px;

font-size: 1.5rem;

color: #fff;

text-align: center;

width: 60%;

outline: none;

font-family: 'Poppins', sans-serif;

margin-bottom: 30px;

letter-spacing: 2px;

}

input:focus { border-bottom: 2px solid #00d2ff; box-shadow: 0 10px 20px -10px #00d2ff; }

button {

padding: 18px 60px;

font-size: 1.2rem;

background: linear-gradient(45deg, #ff0055, #ff5e00);

border: none;

border-radius: 50px;

color: white;

cursor: pointer;

font-weight: bold;

letter-spacing: 2px;

text-transform: uppercase;

box-shadow: 0 10px 20px rgba(255, 0, 85, 0.4);

transition: transform 0.2s;

}

button:hover { transform: scale(1.05); box-shadow: 0 15px 30px rgba(255, 0, 85, 0.6); }

.hidden { display: none !important; }

/* --- ANIMATION CLASSES --- */

/* Welcome Message */

.name-text {

font-family: 'Great Vibes', cursive;

font-size: 3.5rem;

color: #00d2ff;

text-shadow: 0 0 20px rgba(0, 210, 255, 0.6);

margin-bottom: 20px;

min-height: 80px;

display: flex;

justify-content: center;

flex-wrap: wrap;

}

.letter {

display: inline-block;

opacity: 0;

animation: letterPop 0.5s forwards;

transform: translateY(20px);

}

@keyframes letterPop {

0% { opacity: 0; transform: translateY(20px) scale(0.8); }

100% { opacity: 1; transform: translateY(0) scale(1); }

}

/* Countdown */

.year-text {

font-family: 'Orbitron', sans-serif;

font-size: 8rem;

font-weight: 700;

color: #fff;

text-transform: uppercase;

line-height: 1;

margin: 30px 0;

position: relative;

-webkit-text-stroke: 2px rgba(255,255,255,0.2);

}

.countdown-glow {

color: #ff0055;

text-shadow: 0 0 20px #ff0055;

animation: glitch 0.5s infinite alternate-reverse;

}

@keyframes glitch {

0% { transform: translate(0); }

20% { transform: translate(-2px, 2px); }

40% { transform: translate(-2px, -2px); }

60% { transform: translate(2px, 2px); }

80% { transform: translate(2px, -2px); }

100% { transform: translate(0); }

}

/* 2026 Floating */

.digit-container {

display: inline-block;

}

.digit {

display: inline-block;

font-family: 'Montserrat', sans-serif;

font-size: 8rem;

font-weight: 900;

color: transparent;

background: linear-gradient(to bottom, #fff, #ffd700, #ff5e00);

-webkit-background-clip: text;

background-clip: text;

text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);

opacity: 0;

animation: shockwaveIn 1s forwards, floatDigit 3s ease-in-out infinite;

}

.digit:nth-child(1) { animation-delay: 0s, 0s; }

.digit:nth-child(2) { animation-delay: 0.1s, 0.2s; }

.digit:nth-child(3) { animation-delay: 0.2s, 0.4s; }

.digit:nth-child(4) { animation-delay: 0.3s, 0.1s; }

@keyframes floatDigit {

0%, 100% { transform: translateY(0); }

50% { transform: translateY(-15px); }

}

@keyframes shockwaveIn {

0% { opacity: 0; transform: scale(0) rotate(-45deg); }

60% { opacity: 1; transform: scale(1.2); }

100% { opacity: 1; transform: scale(1); }

}

/* Final Message */

.final-message {

font-size: 1.5rem;

margin-top: 40px;

opacity: 0;

transform: translateY(30px);

background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0));

border-left: 4px solid #00d2ff;

padding: 20px;

}

.final-message.show {

animation: slideUpFade 1.5s forwards;

}

@keyframes slideUpFade {

to { opacity: 1; transform: translateY(0); }

}

/* Shake */

.shake { animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both; }

@keyframes shake {

10%, 90% { transform: translate3d(-1px, 0, 0); }

20%, 80% { transform: translate3d(2px, 0, 0); }

30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }

40%, 60% { transform: translate3d(4px, 0, 0); }

}

@media (max-width: 600px) {

.year-text, .digit { font-size: 4rem; }

.name-text { font-size: 2.5rem; }

.glass-card { padding: 30px; }

}

</style>

</head>

<body>

<h2 style="font-weight:300; margin-bottom:30px; letter-spacing: 3px; text-transform:uppercase;">Enter Name</h2>

<br>

<button onclick="startSequence()">✨ enter your lovely name ✨</button>

</div>

</div>

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

let width, height;

function resize() {

width = canvas.width = window.innerWidth;

height = canvas.height = window.innerHeight;

}

window.addEventListener('resize', resize);

resize();

// --- PARTICLES ---

const colors = ['#ff0055', '#ff5e00', '#ffd700', '#00d2ff', '#ffffff', '#ff00ff'];

// Standard Explosion Particle

class Particle {

constructor(x, y, color, speedMultiplier = 1) {

this.x = x;

this.y = y;

this.color = color;

const angle = Math.random() * Math.PI * 2;

const velocity = Math.random() * 8 * speedMultiplier + 2;

this.dx = Math.cos(angle) * velocity;

this.dy = Math.sin(angle) * velocity;

this.friction = 0.94;

this.gravity = 0.06;

this.alpha = 1;

this.decay = Math.random() * 0.015 + 0.005;

this.size = Math.random() * 3 + 1;

}

update() {

this.dx *= this.friction;

this.dy *= this.friction;

this.dy += this.gravity;

this.x += this.dx;

this.y += this.dy;

this.alpha -= this.decay;

this.draw();

}

draw() {

ctx.save();

ctx.globalAlpha = this.alpha;

ctx.fillStyle = this.color;

ctx.shadowBlur = 15;

ctx.shadowColor = this.color;

ctx.beginPath();

ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);

ctx.fill();

ctx.restore();

}

// Golden Dust (Falling Sparkles)

class GoldDust {

constructor() {

this.x = Math.random() * width;

this.y = -10;

this.size = Math.random() * 2 + 1;

this.speedY = Math.random() * 2 + 1;

this.speedX = (Math.random() - 0.5) * 1;

this.color = `rgba(255, 215, 0, ${Math.random()})`;

}

update() {

this.y += this.speedY;

this.x += this.speedX;

this.draw();

if(this.y > height) {

this.y = -10;

this.x = Math.random() * width;

}

draw() {

ctx.fillStyle = this.color;

ctx.beginPath();

ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);

ctx.fill();

}

let particles = [];

let dusts = [];

// Init some dust

for(let i=0; i<50; i++) dusts.push(new GoldDust());

function animate() {

requestAnimationFrame(animate);

ctx.fillStyle = 'rgba(0, 0, 0, 0.15)'; // Longer trails

ctx.fillRect(0, 0, width, height);

// Update Dust

dusts.forEach(d => d.update());

// Update Particles

particles.forEach((p, index) => {

if (p.alpha > 0) p.update();

else particles.splice(index, 1);

});

}

animate();

function createExplosion(x, y, count = 50, speed = 1) {

const color = colors[Math.floor(Math.random() * colors.length)];

for (let i = 0; i < count; i++) {

particles.push(new Particle(x, y, color, speed));

}

// --- LOGIC ---

function startSequence() {

const name = document.getElementById('userName').value.trim();

if (!name) {

const input = document.getElementById('userName');

input.style.borderBottom = "2px solid red";

setTimeout(()=>input.style.borderBottom = "2px solid #fff", 1000);

return;

}

document.getElementById('inputCard').classList.add('hidden');

const animSection = document.getElementById('animationSection');

animSection.classList.remove('hidden');

animateWelcomeText(name + ", welcome to year 2026...");

}

function animateWelcomeText(text) {

const container = document.getElementById('nameDisplay');

container.innerHTML = "";

const letters = text.split("");

letters.forEach((letter, index) => {

const span = document.createElement("span");

span.innerText = letter === " " ? "\u00A0" : letter; // Handle spaces

span.className = "letter";

span.style.animationDelay = `${index * 0.05}s`; // Staggered delay

container.appendChild(span);

});

// Start countdown after text finishes

setTimeout(() => {

yearReplacementSequence();

}, text.length * 50 + 2000); // Calculate time based on length

}

function yearReplacementSequence() {

const container = document.getElementById('yearContainer');

// 2025 Fade In

container.innerHTML = "2025";

container.classList.remove('digit-container');

container.style.opacity = 0.7;

// Countdown

let count = 3;

const timer = setInterval(() => {

container.innerHTML = count;

container.className = "year-text countdown-glow"; // Add Glitch effect

createExplosion(Math.random() * width, Math.random() * height/2, 20, 0.8);

if (count === 0) {

clearInterval(timer);

triggerExplosionAndSwap(container);

}

count--;

}, 1000);

}

function triggerExplosionAndSwap(container) {

// 1. Massive Visuals

createExplosion(width / 2, height / 2, 200, 2.5);

createExplosion(width * 0.2, height * 0.3, 100, 1.5);

createExplosion(width * 0.8, height * 0.3, 100, 1.5);

// Add More Dust

for(let i=0; i<100; i++) dusts.push(new GoldDust());

// 2. Shake

document.body.classList.add('shake');

setTimeout(() => document.body.classList.remove('shake'), 600);

// 3. Text Swap (Floating Digits)

container.className = "year-text digit-container";

container.innerHTML = "";

const year = "2026";

year.split("").forEach(char => {

const span = document.createElement("span");

span.innerText = char;

span.className = "digit";

container.appendChild(span);

});

// 4. Loop Fireworks

setInterval(() => {

createExplosion(Math.random() * width, Math.random() * height * 0.7, 40, 1);

}, 200);

// 5. Final Message

setTimeout(() => {

const msg = document.getElementById('finalMessage');

msg.innerHTML = " 1 I’m so grateful for our friendship, and I hope the year ahead brings even more opportunities for it to grow, strengthen, and blossom in beautiful ways.

2 We’ve had the best time together this year. Hopefully, the coming year has more fun and adventures in store for us.

3 To my favourite person, I can’t wait to see what the new year has in store for us.

4 What a year! Let’s make 2026 the year of saying yes to every crazy adventure!

5 2026: The year we finally become the best versions of ourselves (or at least, try to). Let’s go!

6 To more questionable decisions next year!

7 Thank you for being a constant in my life. Here’s to a year of happiness and continued success.

8 Another year closer to achieving your dreams. May this year be everything you wish for and more!

9 Wishing you a 2026 full of happiness and heartwarming moments. I feel so blessed to have you in my life!

10 Wishing that each day of 2026 brings you closer to the life you envision. I’m here cheering for you all the way.

<br>✨ You made it to another year! ✨";

msg.classList.add('show');

}, 2000);

}

</script>

</body>

</html>