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

\r\n

2025

\r\n

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