Official Digital Launch
HYDRA CORE Website Launch
HYDRAA INTERACTIVE DASHBOARD INAUGURATION
✂ snip the ribbon to launch

We're Live!

The official HYDRAA INTEGRATED DASHBOARD has been launched

✂
/* ========================================================= ELEMENT REFERENCES ========================================================= */ const starsContainer = document.getElementById('stars-container'); const ribbonArea = document.getElementById('ribbon-area'); const scissors = document.getElementById('scissors'); const ribbonFull = document.getElementById('ribbon-full'); const ribbonLeft = document.getElementById('ribbon-left'); const ribbonRight = document.getElementById('ribbon-right'); const cutFlash = document.getElementById('cut-flash'); const preCut = document.getElementById('pre-cut'); const successMsg = document.getElementById('success-msg'); const redirectBtn = document.getElementById('redirect-btn'); let alreadyCut = false; /* ========================================================= CREATE STARS ========================================================= */ for (let i = 0; i < STAR_COUNT; i++) { const star = document.createElement('div'); star.className = 'star'; const size = Math.random() * 2.8 + 0.8; star.style.width = size + 'px'; star.style.height = size + 'px'; star.style.left = Math.random() * 100 + '%'; star.style.top = Math.random() * 100 + '%'; star.style.animationDelay = Math.random() * 4 + 's'; star.style.animationDuration = 2 + Math.random() * 4 + 's'; starsContainer.appendChild(star); } /* ========================================================= SCISSORS FOLLOW MOUSE ========================================================= */ document.addEventListener('mousemove', function (event) { scissors.style.left = event.clientX + 'px'; scissors.style.top = event.clientY + 'px'; }); /* ========================================================= SHOW SCISSORS ========================================================= */ ribbonArea.addEventListener('mouseenter', function () { if (alreadyCut) return; scissors.style.display = 'block'; document.body.style.cursor = 'none'; ribbonFull.style.display = 'none'; ribbonLeft.style.display = 'flex'; ribbonRight.style.display = 'flex'; ribbonLeft.style.width = '50%'; ribbonRight.style.width = '50%'; }); /* ========================================================= MOVE RIBBON CUT POSITION ========================================================= */ ribbonArea.addEventListener('mousemove', function (event) { if (alreadyCut) return; const rect = ribbonArea.getBoundingClientRect(); const percent = Math.max( 6, Math.min( 94, ((event.clientX - rect.left) / rect.width) * 100 ) ); ribbonLeft.style.width = percent + '%'; ribbonRight.style.width = (100 - percent) + '%'; cutFlash.style.left = percent + '%'; scissors.style.transform = 'translate(-50%, -50%) rotate(-45deg)'; }); /* ========================================================= RESTORE RIBBON ========================================================= */ ribbonArea.addEventListener('mouseleave', function () { if (alreadyCut) return; scissors.style.display = 'none'; document.body.style.cursor = ''; ribbonFull.style.display = 'flex'; ribbonLeft.style.display = 'none'; ribbonRight.style.display = 'none'; }); /* ========================================================= CUT RIBBON EVENT ========================================================= */ ribbonArea.addEventListener('click', function (event) { if (alreadyCut) return; alreadyCut = true; document.body.style.cursor = ''; scissors.style.display = 'none'; const rect = ribbonArea.getBoundingClientRect(); const percent = ((event.clientX - rect.left) / rect.width) * 100; cutFlash.style.left = percent + '%'; /* FLASH */ cutFlash.style.opacity = '1'; cutFlash.style.transition = 'opacity 0.45s ease'; setTimeout(function () { cutFlash.style.opacity = '0'; }, 140); /* RIBBON FALL */ ribbonLeft.style.transition = 'transform 1.15s ease, opacity 0.95s ease'; ribbonRight.style.transition = 'transform 1.15s ease, opacity 0.95s ease'; setTimeout(function () { ribbonLeft.style.transform = 'translate(-55px, 70px) rotate(-16deg)'; ribbonLeft.style.opacity = '0'; ribbonRight.style.transform = 'translate(55px, 70px) rotate(16deg)'; ribbonRight.style.opacity = '0'; }, 70); /* CONFETTI */ launchConfetti(event.clientX, event.clientY); /* SUCCESS SCREEN */ setTimeout(function () { preCut.style.display = 'none'; successMsg.style.display = 'flex'; launchConfetti( window.innerWidth / 2, window.innerHeight / 2 ); setTimeout(function () { launchConfetti( window.innerWidth * 0.23, window.innerHeight * 0.38 ); }, 250); setTimeout(function () { launchConfetti( window.innerWidth * 0.77, window.innerHeight * 0.38 ); }, 450); launchFlowers(); }, 980); }); /* ========================================================= CONFETTI FUNCTION ========================================================= */ function launchConfetti(centerX, centerY) { const colors = [ '#ff3159', '#ffd36b', '#40dfff', '#a855f7', '#34d399', '#fb923c', '#f472b6', '#ffffff', '#ffd700' ]; for (let i = 0; i < CONFETTI_COUNT; i++) { const piece = document.createElement('div'); piece.className = 'confetti-piece'; const color = colors[Math.floor(Math.random() * colors.length)]; const size = Math.random() * 10 + 6; const rectangle = Math.random() > 0.6; piece.style.width = (rectangle ? size * 2 : size) + 'px'; piece.style.height = size + 'px'; piece.style.background = color; piece.style.left = centerX + 'px'; piece.style.top = centerY + 'px'; document.body.appendChild(piece); const angle = Math.random() * 300 - 150; const distance = 160 + Math.random() * 280; const radians = angle * Math.PI / 180; const moveX = Math.cos(radians) * distance; const moveY = Math.sin(radians) * distance - 100; piece.animate([ { transform: 'translate(0,0)', opacity: 1 }, { transform: 'translate(' + moveX + 'px,' + (moveY + 220) + 'px)', opacity: 0 } ], { duration: 1300 + Math.random() * 1000, fill: 'forwards' }); setTimeout(() => piece.remove(), 2800); } } /* ========================================================= FLOWER SHOWER ========================================================= */ function launchFlowers() { const flowers = ['🌸', '🌼', '🌺', '💮', '🌷']; for (let i = 0; i < FLOWER_COUNT; i++) { const flower = document.createElement('div'); flower.className = 'flower-piece'; flower.textContent = flowers[Math.floor(Math.random() * flowers.length)]; flower.style.left = Math.random() * window.innerWidth + 'px'; flower.style.top = '-70px'; flower.style.fontSize = (Math.random() * 18 + 18) + 'px'; flower.style.animationDuration = (Math.random() * 3.8 + 4.2) + 's'; document.body.appendChild(flower); setTimeout(() => flower.remove(), 9000); } } /* ========================================================= VISIT WEBSITE BUTTON ========================================================= */ redirectBtn.addEventListener('click', function () { window.location.href = SITE_URL; });