| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>VoidPulse Nebula Navigator</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap'); |
| body { |
| font-family: 'Space Grotesk', sans-serif; |
| scroll-behavior: smooth; |
| } |
| .text-glitch { |
| position: relative; |
| } |
| .text-glitch::before, .text-glitch::after { |
| content: attr(data-text); |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| opacity: 0; |
| } |
| .text-glitch::before { |
| animation: glitch 3s infinite alternate-reverse; |
| clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); |
| } |
| .text-glitch::after { |
| animation: glitch 2s infinite alternate; |
| clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); |
| } |
| @keyframes glitch { |
| 0%, 100% { transform: translate(0); opacity: 0; } |
| 25% { transform: translate(-5px, 5px); opacity: 0.3; } |
| 50% { transform: translate(5px, -5px); opacity: 0.3; } |
| 75% { transform: translate(-5px, -5px); opacity: 0.3; } |
| } |
| .fade-in { |
| opacity: 0; |
| transition: opacity 0.8s ease-in-out; |
| } |
| .visible { |
| opacity: 1; |
| } |
| .contact-option { |
| display: inline-block; |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| .pulse-text { |
| animation: pulse 4s infinite ease-in-out; |
| } |
| @keyframes pulse { |
| 0%, 100% { opacity: 0.2; } |
| 50% { opacity: 1; } |
| } |
| </style> |
| </head> |
| <body class="bg-black text-lime-400 overflow-x-hidden"> |
| <div id="vanta-bg"></div> |
| <div class="container mx-auto px-4 relative z-10"> |
|
|
| |
| <section class="min-h-screen flex flex-col justify-center items-center text-center py-20"> |
| <div id="name-particles" class="text-6xl md:text-8xl font-bold mb-10 tracking-tighter"> |
| <span class="opacity-0">VOIDPULSE</span> |
| </div> |
| <div class="mb-16"> |
| <i data-feather="lock" class="w-12 h-12 mx-auto opacity-0"></i> |
| </div> |
| <h2 class="text-xl md:text-3xl mb-12 max-w-2xl mx-auto opacity-0">Decrypting cosmic-scale problems with quantum solutions</h2> |
| <button class="bg-lime-400 text-black px-8 py-3 rounded-full font-bold tracking-wider transform hover:scale-105 transition-all opacity-0"> |
| INITIATE SEQUENCE |
| </button> |
| </section> |
|
|
| |
| <section class="min-h-screen py-32"> |
| <div class="space-y-40"> |
| |
| <div class="scenario opacity-0"> |
| <div class="text-glitch text-2xl md:text-4xl text-center" data-text="Legacy systems collapsing under gravity of modern demands"> |
| <span class="original-text">Legacy systems collapsing under gravity of modern demands</span> |
| </div> |
| </div> |
| |
| |
| <div class="scenario opacity-0"> |
| <div class="text-glitch text-2xl md:text-4xl text-center" data-text="Security protocols breached by unknown vectors"> |
| <span class="original-text">Security protocols breached by unknown vectors</span> |
| </div> |
| </div> |
| |
| |
| <div class="scenario opacity-0"> |
| <div class="text-glitch text-2xl md:text-4xl text-center" data-text="Data constellations lost in dark matter silos"> |
| <span class="original-text=">Data constellations lost in dark matter silos</span> |
| </div> |
| </div> |
| |
| |
| <div class="scenario opacity-0"> |
| <div class="text-glitch text-2xl md:text-4xl text-center" data-text="User engagement drifting into event horizon"> |
| <span class="original-text">User engagement drifting into event horizon</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="min-h-screen flex items-center justify-center py-20"> |
| <div class="flex flex-wrap justify-center gap-12 md:gap-20 max-w-4xl mx-auto"> |
| <a href="https://sub1.voidpulse" target="_blank" class="subsidiary opacity-0 group"> |
| <div class="text-5xl hover:text-lime-400 transition-colors duration-300">⌘</div> |
| <div class="text-xs mt-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">sub1.voidpulse</div> |
| </a> |
| <a href="https://sub2.voidpulse" target="_blank" class="subsidiary opacity-0 group"> |
| <div class="text-5xl hover:text-lime-400 transition-colors duration-300">⎔</div> |
| <div class="text-xs mt-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">sub2.voidpulse</div> |
| </a> |
| <a href="https://sub3.voidpulse" target="_blank" class="subsidiary opacity-0 group"> |
| <div class="text-5xl hover:text-lime-400 transition-colors duration-300">⍟</div> |
| <div class="text-xs mt-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">sub3.voidpulse</div> |
| </a> |
| <a href="https://sub4.voidpulse" target="_blank" class="subsidiary opacity-0 group"> |
| <div class="text-5xl hover:text-lime-400 transition-colors duration-300">⊛</div> |
| <div class="text-xs mt-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">sub4.voidpulse</div> |
| </a> |
| <a href="https://sub5.voidpulse" target="_blank" class="subsidiary opacity-0 group"> |
| <div class="text-5xl hover:text-lime-400 transition-colors duration-300">⌖</div> |
| <div class="text-xs mt-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">sub5.voidpulse</div> |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section class="min-h-screen flex flex-col items-center justify-center text-center py-20"> |
| <div class="pulse-text text-2xl md:text-4xl mb-16">Need something solved?</div> |
| <div class="flex space-x-8 md:space-x-16"> |
| <div class="contact-option">[signal]</div> |
| <div class="contact-option">[pulse]</div> |
| <div class="contact-option">[transmit]</div> |
| </div> |
| </section> |
| </div> |
|
|
| <script> |
| |
| VANTA.NET({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x84cc16, |
| backgroundColor: 0x000000, |
| points: 12.00, |
| maxDistance: 22.00, |
| spacing: 18.00 |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| feather.replace(); |
| |
| |
| anime({ |
| targets: '#name-particles span', |
| opacity: [0, 1], |
| duration: 1200, |
| easing: 'easeInOutQuad', |
| delay: 500 |
| }); |
| |
| anime({ |
| targets: '[data-feather="lock"]', |
| opacity: [0, 1], |
| duration: 800, |
| easing: 'easeInOutQuad', |
| delay: 1500 |
| }); |
| |
| anime({ |
| targets: 'h2', |
| opacity: [0, 1], |
| duration: 1000, |
| easing: 'easeInOutQuad', |
| delay: 2200 |
| }); |
| |
| anime({ |
| targets: 'button', |
| opacity: [0, 1], |
| duration: 800, |
| easing: 'easeInOutQuad', |
| delay: 3000 |
| }); |
| |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('visible'); |
| |
| if (entry.target.classList.contains('scenario')) { |
| |
| const glitchElement = entry.target.querySelector('.text-glitch'); |
| setTimeout(() => { |
| anime({ |
| targets: glitchElement.querySelector('.original-text'), |
| opacity: [1, 0], |
| duration: 800, |
| easing: 'easeInOutQuad', |
| complete: () => { |
| glitchElement.setAttribute('data-text', |
| glitchElement.getAttribute('data-text').includes('Legacy') ? 'We rebuild foundations with antimatter architecture' : |
| glitchElement.getAttribute('data-text').includes('Security') ? 'We deploy quantum encryption shields' : |
| glitchElement.getAttribute('data-text').includes('Data') ? 'We map dark data with neutrino arrays' : |
| 'We design gravitational engagement orbits' |
| ); |
| anime({ |
| targets: glitchElement.querySelector('.original-text'), |
| opacity: [0, 1], |
| duration: 800, |
| easing: 'easeInOutQuad' |
| }); |
| } |
| }); |
| }, 1000); |
| } |
| } |
| }); |
| }, { threshold: 0.3 }); |
| |
| document.querySelectorAll('.fade-in, .scenario, .subsidiary').forEach(el => { |
| observer.observe(el); |
| }); |
| |
| |
| anime({ |
| targets: '.contact-option', |
| opacity: [0, 1], |
| translateY: [20, 0], |
| delay: anime.stagger(300), |
| duration: 1000, |
| easing: 'easeOutExpo', |
| loop: true, |
| direction: 'alternate' |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
