2025 countdown animated

[{"id":292,"created_at":"2024-12-31T04:01:27.662554+00:00","html":"

2026

\n\n\n","css":"@import('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');\n\nbody {\n margin: 0;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n background: #000;\n overflow: hidden;\n font-family: 'Archivo Black', sans-serif;\n font-weight: 900;\n}\n\n.aurora-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.aurora {\n position: absolute;\n top: 0;\n left: 0;\n width: 200%;\n height: 200%;\n background: linear-gradient(90deg,\n rgba(0, 255, 171, 0.2) 0%,\n rgba(88, 203, 255, 0.2) 25%,\n rgba(152, 68, 183, 0.2) 50%,\n rgba(121, 219, 164, 0.2) 75%,\n rgba(0, 255, 171, 0.2) 100%);\n filter: blur(50px);\n mix-blend-mode: screen;\n opacity: 0.5;\n transform-origin: center;\n}\n\n.aurora2 {\n position: absolute;\n top: -100%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: linear-gradient(45deg,\n rgba(76, 255, 168, 0.2) 0%,\n rgba(72, 149, 239, 0.2) 30%,\n rgba(123, 63, 228, 0.2) 60%,\n rgba(76, 255, 168, 0.2) 100%);\n filter: blur(50px);\n mix-blend-mode: screen;\n opacity: 0.5;\n transform-origin: center;\n}\n\n.aurora3 {\n position: absolute;\n top: -50%;\n left: -100%;\n width: 200%;\n height: 200%;\n background: linear-gradient(135deg,\n rgba(42, 103, 247, 0.2) 0%,\n rgba(32, 211, 167, 0.2) 40%,\n rgba(167, 32, 211, 0.2) 70%,\n rgba(42, 103, 247, 0.2) 100%);\n filter: blur(50px);\n mix-blend-mode: screen;\n opacity: 0.5;\n transform-origin: center;\n}\n\n.container {\n position: relative;\n width: 100%;\n height: 100%;\n}\n\n.countdown {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 20vw;\n color: #fff;\n text-align: center;\n z-index: 2;\n text-shadow:\n 0 0 20px rgba(255, 255, 255, 0.5),\n 0 0 40px rgba(88, 203, 255, 0.5),\n 0 0 60px rgba(0, 255, 171, 0.3);\n background: linear-gradient(45deg, #fff, #87CEFA);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));\n letter-spacing: -2px;\n\n}\n\n.particle {\n position: absolute;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n pointer-events: none;\n opacity: 0;\n}\n\n.year {\n position: absolute;\n font-size: 25vw;\n opacity: 0;\n width: 100%;\n text-align: center;\n top: 50%;\n transform: translateY(-50%);\n background: linear-gradient(45deg, #fff, #87CEFA, #00ff9d);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n text-shadow:\n 0 0 30px rgba(255, 255, 255, 0.5),\n 0 0 60px rgba(88, 203, 255, 0.5),\n 0 0 90px rgba(0, 255, 171, 0.3);\n filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.4));\n letter-spacing: -5px;\n}\n\n\n","js":"function animateAurora() {\n gsap.to('.aurora', {\n x: '-25%',\n y: '25%',\n rotation: 360,\n duration: 40,\n repeat: -1,\n ease: \"none\"\n });\n\n gsap.to('.aurora2', {\n x: '25%',\n y: '-15%',\n rotation: -360,\n duration: 35,\n repeat: -1,\n ease: \"none\"\n });\n\n gsap.to('.aurora3', {\n x: '-15%',\n y: '20%',\n rotation: 240,\n duration: 45,\n repeat: -1,\n ease: \"none\"\n });\n}\n\nfunction createFirework(x, y) {\n const colors = [\n '#ff0000', '#ffa500', '#ffff00', '#00ff00', '#00ffff',\n '#ff69b4', '#ff1493', '#ff00ff', '#4169e1', '#fff'\n ];\n\n for (let i = 0; i < 50; i++) {\n const particle = document.createElement('div');\n particle.className = 'particle';\n particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\n document.querySelector('.container').appendChild(particle);\n\n const angle = (Math.random() * Math.PI * 2);\n const velocity = 3 + Math.random() * 3;\n const dx = Math.cos(angle) * velocity;\n const dy = Math.sin(angle) * velocity;\n\n gsap.set(particle, {\n x: x,\n y: y,\n opacity: 1\n });\n\n gsap.to(particle, {\n duration: 1 + Math.random(),\n x: x + dx * 100,\n y: y + dy * 100,\n opacity: 0,\n ease: \"power2.out\",\n onComplete: () => particle.remove()\n });\n\n gsap.to(particle, {\n duration: 0.3,\n width: '2px',\n height: '2px',\n repeat: 1,\n yoyo: true\n });\n }\n}\n\nfunction launchFirework() {\n const x = Math.random() * window.innerWidth;\n const startY = window.innerHeight;\n const endY = 100 + Math.random() * (window.innerHeight - 200);\n\n const particle = document.createElement('div');\n particle.className = 'particle';\n particle.style.backgroundColor = '#fff';\n document.querySelector('.container').appendChild(particle);\n\n gsap.fromTo(particle, {\n x: x,\n y: startY,\n opacity: 1\n }, {\n duration: 0.5 + Math.random() * 0.5,\n y: endY,\n ease: \"power1.out\",\n onComplete: () => {\n particle.remove();\n createFirework(x, endY);\n }\n });\n}\n\nfunction startCountdown() {\n animateAurora();\n\n const countdown = document.querySelector('.countdown');\n const year = document.querySelector('.year');\n let count = 5;\n\n const timer = setInterval(() => {\n count--;\n if (count >= 0) {\n gsap.fromTo(countdown, {\n scale: 0,\n opacity: 0,\n rotation: -180\n }, {\n scale: 1,\n opacity: 1,\n rotation: 0,\n duration: 0.5,\n ease: \"back.out\"\n });\n countdown.textContent = count;\n launchFirework();\n } else {\n clearInterval(timer);\n countdown.style.display = 'none';\n\n gsap.to(year, {\n opacity: 1,\n scale: 1.2,\n duration: 1,\n ease: \"elastic.out\",\n onComplete: () => {\n const fireworksFinale = setInterval(() => {\n // for (let i = 0; i < 3; i++) {\n launchFirework();\n launchFirework();\n // }\n }, 200);\n\n setTimeout(() => clearInterval(fireworksFinale), 1000);\n }\n });\n }\n }, 1000);\n}\n\nwindow.onload = startCountdown;\n\n\n","user_id":"4529d7ae-0865-47e6-850e-f9cbf1ed7d3c","project_key":"I6UlIi","description":" 2026 Countdown Animated","plugins":[],"public":true,"config":{"tags": [], "cssProcessor": false, "userImportedJS": ["https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"]},"tags":[],"hide_js":false,"hide_css":false,"messages":"[{\"messageId\":\"DEVCANVAS_INITIAL_MESSAGE\",\"role\":\"user\",\"content\":\"This is my current code\"},{\"messageId\":\"DEVCANVAS_INITIAL_CODE\",\"role\":\"user\",\"content\":\"\\n\\t\\n\\n\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t2025 countdown animated\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\n\\n \\n\\t\\n\\t\\n\\t\\t

\\r\\n

2025

\\r\\n

\\n\\t\\t\\n \\n\\t\\n\"}]","view":[{"views":131}],"profiles":{"username":"abdulmumin"}}]