Hero effects can transform a website's first impression, captivating visitors from the moment they land on the page. These dynamic visual elements not only enhance aesthetics but also improve user engagement.
In this article, we'll explore ten stunning hero effect examples that can elevate your web design. Each example showcases unique techniques to inspire your next project.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Subframe's drag-and-drop interface and intuitive, responsive canvas make it effortless to design pixel-perfect hero effects. Loved by designers and developers alike, it ensures stunning results every time.
Start for free and elevate your web design today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your web design? With Subframe, you can create pixel-perfect UIs and stunning hero effects effortlessly. Our drag-and-drop editor ensures efficiency and precision.
Don't wait! Start for free and begin designing immediately. Transform your ideas into reality with Subframe today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic E-commerce Entrance</title> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&family=Poppins:wght@400;600;800&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } :root { --primary: #ff3e6c; --secondary: #3e8eff; --accent: #ffbf3e; --dark: #2a2a2a; --light: #f8f9fa; --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } body { width: 100%; height: 100vh; background-color: var(--light); overflow: hidden; } .container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; position: relative; } .hero { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 2; opacity: 0; transform: translateY(20px); animation: fadeIn 1s forwards 0.5s; } .title { font-size: 2.8rem; font-weight: 800; color: var(--dark); text-align: center; margin-bottom: 10px; position: relative; overflow: hidden; } .title span { display: inline-block; transform: translateY(100%); animation: slideUp 0.8s forwards; animation-delay: calc(0.1s * var(--i)); } .subtitle { font-size: 1.2rem; font-weight: 400; color: #555; text-align: center; margin-bottom: 30px; opacity: 0; animation: fadeIn 1s forwards 1s; } .products-showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; max-width: 650px; margin-top: 20px; } .product-card { position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; transform: translateY(40px); opacity: 0; animation: slideUpFade 0.6s forwards; animation-delay: calc(1.2s + (var(--order) * 0.2s)); transition: var(--transition); background: white; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } .product-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); } .product-card:hover .product-image { transform: scale(1.08); } .product-card:hover::before { opacity: 1; } .product-card::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent)); z-index: -1; border-radius: 18px; opacity: 0; transition: opacity 0.5s ease; } .product-image-container { width: 100%; height: 160px; overflow: hidden; border-radius: 12px 12px 0 0; } .product-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .product-details { padding: 15px; background: white; } .product-title { font-size: 1rem; font-weight: 600; margin-bottom: 5px; color: var(--dark); } .product-price { font-size: 0.9rem; font-weight: 500; color: var(--primary); display: flex; align-items: center; justify-content: space-between; } .discount { font-size: 0.75rem; color: #888; text-decoration: line-through; margin-right: 5px; } .btn-explore { margin-top: 35px; padding: 14px 32px; background: var(--dark); color: white; border: none; border-radius: 50px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: var(--transition); opacity: 0; transform: translateY(20px); animation: fadeIn 1s forwards 2s; position: relative; overflow: hidden; z-index: 1; } .btn-explore:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } .btn-explore::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, var(--primary), var(--secondary)); z-index: -1; transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; } .btn-explore:hover::before { transform: scaleX(1); } .particles-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .particle { position: absolute; background: var(--primary); border-radius: 50%; pointer-events: none; opacity: 0; } .featured-badge { position: absolute; top: 10px; right: 10px; background: var(--accent); color: var(--dark); font-size: 0.65rem; font-weight: 600; padding: 4px 8px; border-radius: 12px; z-index: 2; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .add-to-cart { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #f0f0f0; transition: var(--transition); } .add-to-cart:hover { background: var(--primary); color: white; } .progress-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: rgba(0, 0, 0, 0.1); z-index: 10; } .progress { height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); width: 0; transition: width 0.2s linear; } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { to { transform: translateY(0); } } @keyframes slideUpFade { to { opacity: 1; transform: translateY(0); } } @media (max-width: 600px) { .title { font-size: 2rem; } .subtitle { font-size: 1rem; } .products-showcase { grid-template-columns: repeat(2, 1fr); } .product-image-container { height: 120px; } } @media (max-width: 400px) { .products-showcase { grid-template-columns: 1fr; max-width: 250px; } .product-image-container { height: 180px; } } </style> </head> <body> <div class="container"> <div class="particles-container" id="particles"></div> <div class="hero"> <h1 class="title"> <span style="--i:1">S</span> <span style="--i:2">e</span> <span style="--i:3">a</span> <span style="--i:4">s</span> <span style="--i:5">o</span> <span style="--i:6">n</span> <span style="--i:7">a</span> <span style="--i:8">l</span> <span style="--i:9"> </span> <span style="--i:10">T</span> <span style="--i:11">r</span> <span style="--i:12">e</span> <span style="--i:13">n</span> <span style="--i:14">d</span> <span style="--i:15">s</span> </h1> <p class="subtitle">Discover curated collections at unbeatable prices</p> <div class="products-showcase"> <div class="product-card" style="--order:1"> <span class="featured-badge">NEW IN</span> <div class="product-image-container"> <img src="https://images.unsplash.com/photo-1544441893-675973e31985?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80" alt="Premium Jacket" class="product-image"> </div> <div class="product-details"> <h3 class="product-title">Premium Denim Jacket</h3> <div class="product-price"> <div> <span class="discount">$129.99</span> $89.99 </div> <div class="add-to-cart">+</div> </div> </div> </div> <div class="product-card" style="--order:2"> <div class="product-image-container"> <img src="https://images.unsplash.com/photo-1543163521-1bf539c55dd2?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80" alt="Wireless Headphones" class="product-image"> </div> <div class="product-details"> <h3 class="product-title">Echo Wireless Buds</h3> <div class="product-price"> <div> <span class="discount">$199.99</span> $149.99 </div> <div class="add-to-cart">+</div> </div> </div> </div> <div class="product-card" style="--order:3"> <span class="featured-badge">BESTSELLER</span> <div class="product-image-container"> <img src="https://images.unsplash.com/photo-1560343090-f0409e92791a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80" alt="Smartwatch" class="product-image"> </div> <div class="product-details"> <h3 class="product-title">Pulse Smartwatch</h3> <div class="product-price"> <div> <span class="discount">$249.99</span> $179.99 </div> <div class="add-to-cart">+</div> </div> </div> </div> </div> <button class="btn-explore">Explore Collection</button> </div> <div class="progress-bar"> <div class="progress" id="progress"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Create particles on load createParticles(); // Handle progress bar startProgressBar(); // Add hover interactions to products const productCards = document.querySelectorAll('.product-card'); productCards.forEach(card => { card.addEventListener('mouseenter', () => { createBurstParticles(card); }); card.addEventListener('click', (e) => { if (e.target.classList.contains('add-to-cart')) { const plusElement = e.target; plusElement.innerHTML = '✓'; setTimeout(() => { plusElement.innerHTML = '+'; }, 1500); // Create burst particles on add to cart createCartParticles(e.target); e.stopPropagation(); } }); }); // Explore button interaction const exploreBtn = document.querySelector('.btn-explore'); exploreBtn.addEventListener('click', () => { // Create a wave of particles on button click createWaveParticles(); // Reset progress bar to simulate a page transition effect resetProgressBar(); }); }); function createParticles() { const particlesContainer = document.getElementById('particles'); const colors = ['#ff3e6c', '#3e8eff', '#ffbf3e']; for (let i = 0; i < 50; i++) { const size = Math.random() * 15 + 5; const particle = document.createElement('div'); particle.classList.add('particle'); const x = Math.random() * 100; const y = Math.random() * 100; const delay = Math.random() * 4; const duration = Math.random() * 8 + 4; const color = colors[Math.floor(Math.random() * colors.length)]; particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.left = `${x}%`; particle.style.top = `${y}%`; particle.style.background = color; particle.style.opacity = '0'; particle.style.animation = `fadeIn 1s forwards ${delay}s`; // Add floating animation particle.style.animation = ` fadeIn 1s forwards ${delay}s, float ${duration}s ease-in-out infinite ${delay}s `; // Add keyframes for floating animation const keyframes = ` @keyframes float { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(${Math.random() * 40 - 20}px, ${Math.random() * 40 - 20}px) rotate(${Math.random() * 40 - 20}deg); } 100% { transform: translate(0, 0) rotate(0deg); } } `; const style = document.createElement('style'); style.textContent = keyframes; document.head.appendChild(style); particlesContainer.appendChild(particle); } } function createBurstParticles(element) { const rect = element.getBoundingClientRect(); const x = rect.left + rect.width / 2; const y = rect.top + rect.height / 2; for (let i = 0; i < 8; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); const size = Math.random() * 6 + 3; const angle = (i / 8) * Math.PI * 2; const distance = Math.random() * 60 + 20; particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.background = getComputedStyle(document.documentElement).getPropertyValue('--accent'); particle.style.position = 'fixed'; particle.style.left = `${x}px`; particle.style.top = `${y}px`; particle.style.opacity = '1'; document.body.appendChild(particle); // Animate the particle setTimeout(() => { particle.style.transition = 'all 0.8s cubic-bezier(0.16, 1, 0.3, 1)'; particle.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`; particle.style.opacity = '0'; }, 10); // Remove the particle after animation setTimeout(() => { particle.remove(); }, 1000); } } function createCartParticles(element) { const rect = element.getBoundingClientRect(); const x = rect.left + rect.width / 2; const y = rect.top + rect.height / 2; for (let i = 0; i < 15; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); const size = Math.random() * 8 + 4; const angle = Math.random() * Math.PI * 2; const distance = Math.random() * 80 + 30; particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.background = getComputedStyle(document.documentElement).getPropertyValue('--primary'); particle.style.position = 'fixed'; particle.style.left = `${x}px`; particle.style.top = `${y}px`; particle.style.opacity = '1'; document.body.appendChild(particle); // Animate the particle setTimeout(() => { particle.style.transition = 'all 0.8s cubic-bezier(0.16, 1, 0.3, 1)'; particle.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`; particle.style.opacity = '0'; }, 10); // Remove the particle after animation setTimeout(() => { particle.remove(); }, 1000); } } function createWaveParticles() { const button = document.querySelector('.btn-explore'); const rect = button.getBoundingClientRect(); const colors = ['var(--primary)', 'var(--secondary)', 'var(--accent)']; for (let i = 0; i < 40; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); const size = Math.random() * 12 + 8; const angle = Math.random() * Math.PI * 2; const distance = Math.random() * 200 + 50; const delay = Math.random() * 0.5; particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.background = colors[Math.floor(Math.random() * colors.length)]; particle.style.position = 'fixed'; particle.style.left = `${rect.left + rect.width / 2}px`; particle.style.top = `${rect.top + rect.height / 2}px`; particle.style.opacity = '0'; document.body.appendChild(particle); // Animate the particle setTimeout(() => { particle.style.transition = `all 1.2s cubic-bezier(0.16, 1, 0.3, 1) ${delay}s`; particle.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`; particle.style.opacity = '1'; setTimeout(() => { particle.style.opacity = '0'; }, 700); }, 10); // Remove the particle after animation setTimeout(() => { particle.remove(); }, 2000); } } function startProgressBar() { const progress = document.getElementById('progress'); let width = 0; const interval = setInterval(() => { if (width >= 100) { clearInterval(interval); } else { width += 0.5; progress.style.width = `${width}%`; } }, 50); } function resetProgressBar() { const progress = document.getElementById('progress'); progress.style.width = '0'; setTimeout(() => { startProgressBar(); }, 200); } </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Corporate Kinetic Typography</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } body { background-color: #f8f9fa; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; } .container { width: 100%; max-width: 700px; height: 700px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(145deg, #ffffff, #f0f4f8); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); padding: 40px 30px; position: relative; overflow: hidden; } .background-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.03; z-index: 0; background-image: radial-gradient(#2d50a7 1px, transparent 1px); background-size: 20px 20px; } .hero-content { position: relative; z-index: 2; text-align: center; width: 100%; } .progress-bar { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 80%; height: 4px; background-color: rgba(45, 80, 167, 0.1); border-radius: 4px; overflow: hidden; } .progress-indicator { height: 100%; width: 0; background-color: #2d50a7; border-radius: 4px; transition: width 0.5s ease; } .kinetic-text-container { height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .kinetic-text { font-size: 48px; font-weight: 800; color: #2d50a7; position: absolute; opacity: 0; transform: translateY(20px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); line-height: 1.2; text-align: center; width: 100%; } .kinetic-text.active { opacity: 1; transform: translateY(0); } .kinetic-text.exit { opacity: 0; transform: translateY(-20px); } .secondary-text { font-size: 20px; font-weight: 400; color: #4a5568; margin-top: 40px; max-width: 85%; line-height: 1.6; opacity: 0; transform: translateY(10px); transition: all 0.5s ease-out 0.3s; } .secondary-text.active { opacity: 1; transform: translateY(0); } .cta-button { margin-top: 50px; padding: 14px 32px; font-size: 16px; font-weight: 600; color: white; background-color: #2d50a7; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; transform: scale(0.95); opacity: 0; box-shadow: 0 4px 12px rgba(45, 80, 167, 0.2); position: relative; overflow: hidden; } .cta-button.active { transform: scale(1); opacity: 1; } .cta-button:hover { background-color: #1e3a87; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(45, 80, 167, 0.25); } .cta-button .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); transform: scale(0); animation: ripple 0.6s linear; } @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } .controls { position: absolute; bottom: 60px; display: flex; gap: 15px; z-index: 5; } .control-btn { width: 36px; height: 36px; border: none; background-color: rgba(45, 80, 167, 0.1); border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.2s ease; } .control-btn:hover { background-color: rgba(45, 80, 167, 0.2); } .control-btn svg { width: 16px; height: 16px; fill: #2d50a7; } .dot-indicators { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 5; } .dot { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(45, 80, 167, 0.2); cursor: pointer; transition: all 0.3s ease; } .dot.active { background-color: #2d50a7; transform: scale(1.2); } .company-logo { position: absolute; top: 30px; left: 40px; font-size: 20px; font-weight: 800; color: #2d50a7; display: flex; align-items: center; gap: 8px; } .company-logo svg { width: 24px; height: 24px; fill: #2d50a7; } @media (max-width: 600px) { .container { padding: 25px 20px; } .kinetic-text { font-size: 36px; } .secondary-text { font-size: 16px; margin-top: 30px; } .company-logo { left: 20px; font-size: 18px; } } @media (max-width: 400px) { .kinetic-text { font-size: 28px; } .secondary-text { font-size: 14px; } } </style> </head> <body> <div class="container"> <div class="background-pattern"></div> <div class="company-logo"> <svg viewBox="0 0 24 24"> <path d="M3.055 11H5a2 2 0 0 1 2 2v1a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-1a2 2 0 0 1 2-2h1.945M15 7h1a2 2 0 0 1 2 2v1M9 17h1a2 2 0 0 0 2-2v-1"></path> </svg> <span>NEXUS</span> </div> <div class="hero-content"> <div class="kinetic-text-container"> <div class="kinetic-text" data-index="0">Transform Information Into Engagement</div> <div class="kinetic-text" data-index="1">Tell Your Story With Impact</div> <div class="kinetic-text" data-index="2">Capture Attention Through Motion</div> <div class="kinetic-text" data-index="3">Elevate Brand Communication</div> </div> <div class="secondary-text"> Our kinetic typography solutions bring your corporate messaging to life, creating memorable experiences that resonate with your audience and drive meaningful engagement. </div> <button class="cta-button"> Explore Solutions </button> </div> <div class="controls"> <button class="control-btn prev-btn"> <svg viewBox="0 0 24 24"> <path d="M15 18l-6-6 6-6"></path> </svg> </button> <button class="control-btn next-btn"> <svg viewBox="0 0 24 24"> <path d="M9 18l6-6-6-6"></path> </svg> </button> </div> <div class="dot-indicators"></div> <div class="progress-bar"> <div class="progress-indicator"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const kineticTexts = document.querySelectorAll('.kinetic-text'); const secondaryText = document.querySelector('.secondary-text'); const ctaButton = document.querySelector('.cta-button'); const prevBtn = document.querySelector('.prev-btn'); const nextBtn = document.querySelector('.next-btn'); const progressIndicator = document.querySelector('.progress-indicator'); const dotIndicatorsContainer = document.querySelector('.dot-indicators'); let currentIndex = 0; let intervalId; const autoPlayDuration = 5000; // 5 seconds per slide const totalTexts = kineticTexts.length; // Create dot indicators for (let i = 0; i < totalTexts; i++) { const dot = document.createElement('div'); dot.classList.add('dot'); dot.setAttribute('data-index', i); dotIndicatorsContainer.appendChild(dot); dot.addEventListener('click', () => { goToText(i); }); } const dots = document.querySelectorAll('.dot'); // Initialize function init() { showText(currentIndex); startAutoPlay(); updateProgressBar(0); } function showText(index) { // Hide all texts kineticTexts.forEach((text, i) => { text.classList.remove('active', 'exit'); if (i === currentIndex) { text.classList.add('exit'); } }); // Update dots dots.forEach((dot, i) => { dot.classList.toggle('active', i === index); }); // Show current text setTimeout(() => { kineticTexts.forEach((text, i) => { text.classList.remove('exit'); if (i === index) { text.classList.add('active'); } }); // Also animate the secondary text and CTA button if (!secondaryText.classList.contains('active')) { secondaryText.classList.add('active'); } if (!ctaButton.classList.contains('active')) { ctaButton.classList.add('active'); } currentIndex = index; }, 500); } function updateProgressBar(startTime) { const elapsed = Date.now() - startTime; const progress = Math.min(elapsed / autoPlayDuration * 100, 100); progressIndicator.style.width = `${progress}%`; if (progress < 100) { requestAnimationFrame(() => updateProgressBar(startTime)); } } function startAutoPlay() { clearInterval(intervalId); const startTime = Date.now(); updateProgressBar(startTime); intervalId = setInterval(() => { const newIndex = (currentIndex + 1) % totalTexts; goToText(newIndex); }, autoPlayDuration); } function goToText(index) { if (index === currentIndex) return; showText(index); startAutoPlay(); } // Button controls prevBtn.addEventListener('click', () => { const newIndex = (currentIndex - 1 + totalTexts) % totalTexts; goToText(newIndex); }); nextBtn.addEventListener('click', () => { const newIndex = (currentIndex + 1) % totalTexts; goToText(newIndex); }); // Create ripple effect on button click ctaButton.addEventListener('click', function(e) { const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const ripple = document.createElement('span'); ripple.classList.add('ripple'); ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); // Restart autoplay when user interacts with container const container = document.querySelector('.container'); container.addEventListener('mouseenter', () => { clearInterval(intervalId); progressIndicator.style.width = '100%'; }); container.addEventListener('mouseleave', () => { startAutoPlay(); }); // Start the animation sequence init(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cinematic Video Highlight</title> <style> @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Orbitron:wght@400;500;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --neon-pink: #ff00ff; --neon-blue: #00ffff; --neon-purple: #9900ff; --dark-bg: rgba(0, 0, 0, 0.75); --darker-bg: rgba(0, 0, 0, 0.9); } body { font-family: 'Roboto', sans-serif; height: 100%; width: 100%; overflow: hidden; position: relative; color: white; } .hero-container { position: relative; width: 100%; height: 700px; overflow: hidden; } .video-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--darker-bg) 0%, var(--dark-bg) 100%); z-index: 1; } .content { position: relative; z-index: 2; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 2rem; } .title { font-family: 'Orbitron', sans-serif; font-size: 3.5rem; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 3px; position: relative; display: inline-block; } .neon-text { text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue), 0 0 30px var(--neon-blue); color: white; } .subtitle { font-size: 1.2rem; margin-bottom: 2.5rem; max-width: 600px; line-height: 1.6; font-weight: 300; } .cta-container { display: flex; gap: 1.5rem; margin-top: 1rem; flex-wrap: wrap; justify-content: center; } .cta-button { padding: 0.8rem 2rem; border: none; border-radius: 30px; font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease; } .cta-primary { background-color: transparent; color: white; border: 2px solid var(--neon-blue); box-shadow: 0 0 10px var(--neon-blue); } .cta-primary:hover { background-color: var(--neon-blue); color: black; box-shadow: 0 0 20px var(--neon-blue); } .cta-secondary { background-color: transparent; color: white; border: 2px solid var(--neon-pink); box-shadow: 0 0 10px var(--neon-pink); } .cta-secondary:hover { background-color: var(--neon-pink); color: black; box-shadow: 0 0 20px var(--neon-pink); } .timeline { position: absolute; bottom: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink), var(--neon-purple)); z-index: 3; transition: width 0.1s linear; } .scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 3; opacity: 0.8; animation: bounce 2s infinite; } .scroll-indicator svg { width: 40px; height: 40px; fill: white; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } 40% { transform: translateY(-20px) translateX(-50%); } 60% { transform: translateY(-10px) translateX(-50%); } } .glitch-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 1; opacity: 0; pointer-events: none; } .scene-indicator { position: absolute; top: 20px; right: 20px; z-index: 3; display: flex; align-items: center; font-family: 'Orbitron', sans-serif; font-size: 0.8rem; } .rec-dot { width: 12px; height: 12px; border-radius: 50%; background-color: var(--neon-pink); margin-right: 8px; animation: blink 1.5s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } .noise { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAL9UlEQVRogX1aW67dNg5lJ5mZtNPbTm8n6fQa0GnaZAEFlmYBvdM0O9OCepvcPF4vloqkJDuHH0Zs2ZJ4rL0pUifl37/9TER0AoC99/OQc/YhIua99/n5+bn9fOlnMRGxtTYrZj6LiJkAYJZzHB3HcZ5SSofGOw45xzEJSU7OOYYQzv1+p5zzGR+89/N5v9/P53g+5zzXWud4rXUupcx1OAB4AD4/c849XkSeiIib4zhyKeV8f39PpZRzGGPklNKZc0a99r7PJHN/Psy9fYwxdsL4NfCttdnhm8/nCcdxxBhjT7lJn0JdtN77eRxHV1W/2+12lFLOUgqmXyM5iqLn2C9iPiOqQyDWIecmCEAQEXnDz6L3UUqZQ69jOUK/o/WeUkpdb7eUUjq11t5aO2KMHX6GYa8jPWgYBo7jmIccY0S6Pd9FzAPLvfcOxgAA3O/303sf92Nc9MJ9CgGnEMIZY5y99xJjPGOMHTYKfH9/P0spOI7jbK2dKLaUcoYQuHq4RdFmCDDG2Dnnft7vXb1Y9UKhTJCxASI2ZgGjYB9j2MEaY0opHS7JMDI/88LBrj0AvffjOA4Q1zCCYYNP0rHR3RljYN9l5lNE4qnqSUSnBXHOh8SttfkPhZjDd1mj1Drz/XZTuFQsQucYY2/J6b3LVnHFQLNQAZlzzmdrrddau3x/cA40aK2dKMKlEgOw23t3IYbzHscRxxi9937GGM/WWu/AKqV0Wm6A+CIyx8cYz1LK3JRSOnvveMi/UAAGBs651Dn2YwbDJUQ89Vz0Mc9zzrPWOktVDDJXGQBASmmec57Merl6r2RfcNq+EQ/IHOdpgGOMHpCgvD3GcDzed3rnYW+EkFJKD2FHJZYMkHKAA9hzhGNMnwixTylx732GgDHGc86ZlBMPJBKROBzDV1WWNTqwVa78UBWzjPcYo9daX9nnhbLW2h1CQBD33jtvhDqdOedTVWdAGkIAMmKMk9Qip8VRSoHWsQn0GpSXlNIUdHpZnYdE6r0jhNCBD22g7ZzzCQwskHxTCPM7hMC8a61dSZN5w3IuCNJ7P+/3+1RilTnS5mRcCvFQV+qQTQiw1vpijFRKOd/f31/WzzlPBu29d/DKOXfOOZWcLz10w5AxAMSsQo1BQZTtTYgdRZ9CPDB0I/yQEX9LKdN3QgiLumMX7ODWN9bJfhZjnAEBRFXYexcGIKNBKXVJCwGMMQJovNlH1X3Zr9Z6cs6nCplhk2qnwqZRcAEhhLCsBbgcQ5gCtdZ6KaUvHw0hdBxcqQN6AiHHGHZtMveuEAPKMQYUwXbHcXTnXF+5O+d83u/3HV8o5fQYY3pR773HGHuM8YXvdUkXPwFmkS4EaK11rN97pxjjAl0hhGXdnHMH0SBiLcmO4+jOudMYpKouXEYrjAgw59zVmVVSVWYr8CKzqtZTVbDmfUy31kYIJdY6B4pJ5Jwnvtm5iIhbQGrGIDJDQbmMMaZgMcYFi/HdB3KbWqsKAqfZwhIK3Hmjy9LrOMbopZQlGPh2XWPrnM0y7LQhxNRiXQtJ4aWqZ2ttLRxCmJR9jHFqG04Q0lISKCVYZQshdCNbXyzknOs+TJAQAhzFx8CU+957V9WrTcDCrErGGCelp6osjpMQiGklVVjFOXeSMnPOU+OkWkQW/9M0LZBO2S6EcKpqx3foOwwIbsP3fAjhqLVOWmEoQCGo/TjPAZ33pxDHxKaEYbZizDSEvZBlFYMUDC+MMZbERKTnnLv3fjZorWmp9V4V9AQRZ/7/HNwYIKVE6NqWQM5Zr5zJqC8Koe+o42R4Yc55KW6YOAYc7K8FPAsDphhZQVVP8BpoCXtkuqhtAnpjYfGnuQmIUOWcs2utV+WsdHiM0fkAcGkRxDJ4pmlC1YT0TXObZDVTBCAEYxGr8/3Qat7EHNf2YK+2rKWSElrBgSm0jVR+t0xsIVs9Y+0ZQoDQPcY4rN4TkhXpQgh2MrY0kjGvpZ/3z1TVOVBr7eScTzmMGJPmK60gZcVx4QBU9cyYZdkhhCUrcwCRcw4DqWDaKUQI4YXblTeQ5iOI3F+zrwUzlXOO73UYqKJdPQfXoO+FcnzvwAIZFiRaKhD/DCF0O6+UcjnFNJVzXlq1tfZCKmOMs9baS60dnpdNsChACEQMkEwS0KRgmOmijTqdpvfaVKDvU1VW3C6kwlSCBuU7QhRsYLeLgcQpMBYCrQGxirDtPzunccT9fn+5Dh2fDQx24Gg4bfCklBbXARugjfx+v3eiXUoJ3nJBV2MMU/aQEgXCbM65mfPbzf2wxAUY9HvFBAiKTG2h01qbXEfJ93OWUiapEFEQ7MWS+06ZCXcRERLSDsvYqqVEKpxSmo4jvEKDZeZTLBdrPaHfYlzBhDPfuWM5gvtgWe5/oOpZP5u+JOk/OoQQWBJwrXUS9JwzpZQmE0spLQEOZkL5DiJKKR0iMjP06XSjwCsH1SLOxp1TLUQABDkrYITVQcbMZ/TeDWvOVJw9J/EsBLTWuhVgCMxMoLDWMHW3kDu9mIh0VU2l1VQ99KHfJqgRQlCsj6Y4XwcBmCq+qbV2qbXOtlGtdQpw9YkhBAT92BVlMBCKQb3J/hjztGOvYXnDiVRV6rwWo7/nWWpipWkHIVshbYj4z34/f34+Vwvf2jpX/T7P9c+L/4H0RWQZs35VwTaC+55vPh/8YBJTrACshRITVmG0LVnKqDnl1UfWMeKdnYkxLk3d1toBxNfRDFtNe2e7YCOBTZtgHUvQD3PYQWxpbUDnc5ByLWLpxHq2qioaGtrEfOSUSfPgK1wj9SuUYiNjuA9j4oD+5UXlwW4JC2ABNZxaVadfQACr/GQXWms9zpWa7wrbNVT13O/35U3HBtMichdZrRRCmEQ059xC8GZ/YLBBdDLnzERnKaXnnM8Yw9RQ5KXptMh5Xf7cTNNTVuBcmGufSC2mthPHWdw8n8/piBCCU2g4AAvDX9Y3nC/K7zzXBn8XYphxkVIUuPdOnHObMNVaW0gFAgEPCRdhWPHsOfqLDlA/hXjYglHLMKJ3Hmq91zq6htTXOr/+TKqcVKGqZ1jTaGCEMAd9pJRCC+bEi/WXZXTaADDHbPUiDpjZJyUAgLUOiOUywrXUMpDX+paxIAgTD6XAXXzXHbY2UkpJ8K0Xq+oyNJDpK+yRG5pmdX39jnzEkAMxZQhhyOOvuUetteeca4yxK2WPMw3Bh0BjjMkjVXVGiVLKHMcxtSJFABYDmkjX2Qpg6n01W3UeYNzPLANDCNMuuIoL6WTfBYvY7OQ7H7Mzq7PvgvA7qfUlF/pUa0a9Xz6ZHixGrrQgv7HpAzD/kRVl6yNj/TA3fZQF4KTlrIp/j2k+5WQ3tE13TfV+kZP5l6m4FLNVlRj+L2KiENNbcDzp/VUW8xXnXNcwYlv8NU/4CG9bPL7fhzF+ZjFW9EY2YjbvT7aDfjnv6EFhBBEZeWOMAWV+m0FaqH35pDmPa26Q/cPWqLV2pJRWv15rXeSOZQkJwnG87edsQMGrxrCm3G1YEcS+sQNYXY4g2FY2OhCtIEWfVtcVAjHF1tqRUuqwIZPMN5gjGnUxFsH7sA+EZKcx5gQS/99CCKTm42xWy/Dvv0ZC4Bwr2pX6l1I6MMXqW5jrNsaE5nwBE1WakvRW9S+2YbfLxhiXRgP7QF5zCBPMFTMY03bZnrECrxhnOSb+aqBWQ0HrzN8YE/i+nkPIQpfGvp4yXhVdwmX5h4d9cJLh2N+N0l4zqNI4+Rlt1FJdX6PFMq90Yjmy7k0S5Pt/AOTDBTrfPQqpAAAAAElFTkSuQmCC'); opacity: 0.03; z-index: 2; pointer-events: none; } /* Media queries for responsiveness */ @media (max-width: 600px) { .title { font-size: 2.5rem; } .subtitle { font-size: 1rem; } .cta-container { gap: 1rem; } .cta-button { padding: 0.6rem 1.5rem; font-size: 0.9rem; } } @media (max-width: 400px) { .title { font-size: 2rem; } .subtitle { font-size: 0.9rem; } .cta-button { padding: 0.5rem 1.2rem; font-size: 0.8rem; } } </style> </head> <body> <div class="hero-container"> <video class="video-background" autoplay muted loop playsinline> <source src="https://assets.mixkit.co/videos/preview/mixkit-futuristic-urban-traffic-at-night-44855-large.mp4" type="video/mp4"> </video> <div class="overlay"></div> <div class="noise"></div> <div class="content"> <h1 class="title neon-text">NEON HORIZON</h1> <p class="subtitle">Experience the cutting edge of digital cinematography with our revolutionary 8K capture system. Pushing boundaries in visual storytelling for directors who demand the extraordinary.</p> <div class="cta-container"> <button class="cta-button cta-primary" id="demo-btn">REQUEST DEMO</button> <button class="cta-button cta-secondary" id="specs-btn">TECH SPECS</button> </div> </div> <div class="timeline" id="timeline"></div> <div class="scene-indicator"> <div class="rec-dot"></div> <span>LIVE CAPTURE</span> </div> <div class="scroll-indicator"> <svg viewBox="0 0 24 24"> <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"/> </svg> </div> <div class="glitch-effect" id="glitch"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Video timeline progress const video = document.querySelector('.video-background'); const timeline = document.getElementById('timeline'); video.addEventListener('timeupdate', function() { const percent = (video.currentTime / video.duration) * 100; timeline.style.width = percent + '%'; }); // Glitch effect on CTA hover const glitchEffect = document.getElementById('glitch'); const buttons = document.querySelectorAll('.cta-button'); buttons.forEach(button => { button.addEventListener('mouseenter', function() { applyGlitchEffect(); }); }); function applyGlitchEffect() { glitchEffect.style.opacity = 0.1; glitchEffect.style.background = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAAZSURBVHjaYmCAAGM0GjfHGEMGAAAA//8DACm0ATMe8beGAAAAAElFTkSuQmCC)'; // Random glitch animations let count = 0; const glitchInterval = setInterval(() => { const randomOffset = Math.random() * 10 - 5; glitchEffect.style.transform = `translateX(${randomOffset}px)`; glitchEffect.style.opacity = Math.random() * 0.2; count++; if (count > 10) { clearInterval(glitchInterval); glitchEffect.style.transform = 'translateX(0)'; glitchEffect.style.opacity = 0; } }, 50); } // Simulated modal interactions const demoBtn = document.getElementById('demo-btn'); const specsBtn = document.getElementById('specs-btn'); demoBtn.addEventListener('click', function(e) { e.preventDefault(); // Create a floating notification instead of alert const notification = document.createElement('div'); notification.textContent = 'Demo request submitted! Our team will contact you soon.'; notification.style.position = 'absolute'; notification.style.bottom = '80px'; notification.style.left = '50%'; notification.style.transform = 'translateX(-50%)'; notification.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; notification.style.color = 'white'; notification.style.padding = '15px 25px'; notification.style.borderRadius = '5px'; notification.style.fontFamily = 'Roboto, sans-serif'; notification.style.zIndex = '10'; notification.style.boxShadow = '0 0 10px var(--neon-blue)'; notification.style.border = '1px solid var(--neon-blue)'; document.querySelector('.hero-container').appendChild(notification); setTimeout(() => { notification.style.opacity = '0'; notification.style.transition = 'opacity 0.5s ease'; setTimeout(() => notification.remove(), 500); }, 3000); applyGlitchEffect(); }); specsBtn.addEventListener('click', function() { // Toggle specs panel let specsPanel = document.getElementById('specs-panel'); if (specsPanel) { specsPanel.remove(); } else { specsPanel = document.createElement('div'); specsPanel.id = 'specs-panel'; specsPanel.style.position = 'absolute'; specsPanel.style.bottom = '80px'; specsPanel.style.right = '20px'; specsPanel.style.backgroundColor = 'rgba(0, 0, 0, 0.85)'; specsPanel.style.color = 'white'; specsPanel.style.padding = '20px'; specsPanel.style.borderRadius = '5px'; specsPanel.style.fontFamily = 'Roboto, sans-serif'; specsPanel.style.zIndex = '10'; specsPanel.style.maxWidth = '300px'; specsPanel.style.boxShadow = '0 0 15px var(--neon-pink)'; specsPanel.style.border = '1px solid var(--neon-pink)'; specsPanel.innerHTML = ` <h3 style="font-family: 'Orbitron', sans-serif; margin-bottom: 15px; color: var(--neon-pink);">TECHNICAL SPECS</h3> <ul style="list-style-type: none; padding: 0; margin: 0; font-size: 0.9rem; line-height: 1.5;"> <li>• 8K CMOS Ultra-Resolution Sensor</li> <li>• 24-bit RAW Capture Format</li> <li>• 120fps at Full Resolution</li> <li>• 18-stop Dynamic Range</li> <li>• Neural Processing Unit</li> <li>• Carbon Fiber Chassis (1.2kg)</li> </ul> <div style="text-align: right; margin-top: 15px;"> <span style="cursor: pointer; color: var(--neon-pink);" id="close-specs">CLOSE</span> </div> `; document.querySelector('.hero-container').appendChild(specsPanel); document.getElementById('close-specs').addEventListener('click', function() { specsPanel.remove(); }); } applyGlitchEffect(); }); // Cursor effect const content = document.querySelector('.content'); content.addEventListener('mousemove', function(e) { const mouseX = e.clientX; const mouseY = e.clientY; const rect = content.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; const moveX = (mouseX - centerX) / 50; const moveY = (mouseY - centerY) / 50; document.querySelector('.title').style.transform = `translate(${moveX}px, ${moveY}px)`; document.querySelector('.subtitle').style.transform = `translate(${moveX * 0.5}px, ${moveY * 0.5}px)`; }); }); </script> </body> </html>
<html> <head> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; overflow-x: hidden; background-color: #0F0F0F; color: #FFFFFF; height: 100vh; width: 100%; } .container { width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; } .split-section { display: flex; width: 100%; height: 100%; position: relative; overflow: hidden; } .left-panel, .right-panel { position: relative; width: 50%; height: 100%; display: flex; align-items: center; justify-content: center; transition: transform 0.7s cubic-bezier(0.645, 0.045, 0.355, 1); } .left-panel { background-color: #101820; transform: translateX(-100%); padding: 2rem; } .right-panel { background-color: #FEE715; transform: translateX(100%); } .content { position: relative; z-index: 1; max-width: 90%; } .text-content { color: #FFFFFF; } h1 { font-size: 3rem; line-height: 1.1; font-weight: 800; margin-bottom: 1rem; background: linear-gradient(90deg, #FEE715, #FF4E00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; transform: translateY(30px); transition: opacity 0.5s ease, transform 0.5s ease; transition-delay: 0.7s; } p { font-size: 1rem; margin-bottom: 1.5rem; line-height: 1.6; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; transition-delay: 0.9s; } .cta-btn { display: inline-block; padding: 0.8rem 2rem; background: linear-gradient(90deg, #FEE715, #FF4E00); color: #101820; text-decoration: none; font-weight: 600; border-radius: 30px; border: none; cursor: pointer; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease; transition-delay: 1.1s; position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(254, 231, 21, 0.3); } .cta-btn:hover { box-shadow: 0 7px 20px rgba(254, 231, 21, 0.5); } .cta-btn:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: 0.5s; } .cta-btn:hover:before { left: 100%; } .image-wrapper { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .image-stack { position: relative; width: 80%; height: 80%; opacity: 0; transform: scale(0.8); transition: opacity 0.8s ease, transform 0.8s ease; transition-delay: 0.7s; } .image-item { position: absolute; background-color: #101820; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); overflow: hidden; transition: transform 0.5s ease; } .image-item-1 { width: 65%; height: 65%; top: 5%; left: 5%; z-index: 3; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400"><rect width="600" height="400" fill="%23101820"/><path d="M0,200 Q150,50 300,200 T600,200" stroke="%23FEE715" stroke-width="8" fill="none"/><circle cx="200" cy="150" r="40" fill="%23FF4E00"/><rect x="350" y="120" width="200" height="40" fill="%23FEE715"/></svg>'); background-size: cover; } .image-item-2 { width: 55%; height: 55%; bottom: 5%; right: 5%; z-index: 2; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400"><rect width="600" height="400" fill="%23101820"/><circle cx="300" cy="200" r="100" fill="none" stroke="%23FEE715" stroke-width="10"/><rect x="250" y="150" width="100" height="100" fill="%23FF4E00"/></svg>'); background-size: cover; } .image-item:hover { transform: translateY(-10px); } .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .particle { position: absolute; background-color: #FEE715; border-radius: 50%; opacity: 0; animation: float 3s infinite ease-in-out; } @keyframes float { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100px) rotate(360deg); opacity: 0; } } .active .left-panel, .active .right-panel { transform: translateX(0); } .active h1, .active p, .active .cta-btn { opacity: 1; transform: translateY(0); } .active .image-stack { opacity: 1; transform: scale(1); } .intro-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0F0F0F; display: flex; align-items: center; justify-content: center; z-index: 10; transition: transform 0.7s cubic-bezier(0.645, 0.045, 0.355, 1); } .intro-text { font-size: 3rem; font-weight: 800; background: linear-gradient(90deg, #FEE715, #FF4E00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .intro-overlay.hide { transform: translateY(-100%); } @media screen and (max-width: 700px) { .split-section { flex-direction: column; } .left-panel, .right-panel { width: 100%; height: 50%; } .left-panel { transform: translateY(-100%); } .right-panel { transform: translateY(100%); } .active .left-panel, .active .right-panel { transform: translateY(0); } h1 { font-size: 2rem; } p { font-size: 0.9rem; } .image-stack { width: 90%; height: 85%; } } </style> </head> <body> <div class="container"> <div class="intro-overlay"> <h2 class="intro-text">LaunchPad</h2> </div> <div class="split-section"> <div class="left-panel"> <div class="content text-content"> <h1>Split the Ordinary.<br>Reveal Your Future.</h1> <p>LaunchPad helps startups break through the noise with cutting-edge web presence that captures attention in milliseconds. Our split-reveal technology creates 37% higher engagement and converts visitors to customers 2.4x faster.</p> <button class="cta-btn">Start Your Revolution</button> </div> </div> <div class="right-panel"> <div class="image-wrapper"> <div class="image-stack"> <div class="image-item image-item-1"></div> <div class="image-item image-item-2"></div> </div> <div class="particles"></div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Create particles const particlesContainer = document.querySelector('.particles'); const particleCount = 20; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); // Random positioning const size = Math.random() * 6 + 2; particle.style.width = `${size}px`; particle.style.height = `${size}px`; // Random positioning particle.style.left = `${Math.random() * 100}%`; particle.style.top = `${Math.random() * 100}%`; // Random animation delay particle.style.animationDelay = `${Math.random() * 2}s`; particlesContainer.appendChild(particle); } // Intro animation setTimeout(() => { document.querySelector('.intro-overlay').classList.add('hide'); setTimeout(() => { document.querySelector('.split-section').classList.add('active'); }, 700); }, 1500); // Button interaction const ctaBtn = document.querySelector('.cta-btn'); ctaBtn.addEventListener('click', () => { // Create ripple effect const ripple = document.createElement('span'); ripple.style.position = 'absolute'; ripple.style.borderRadius = '50%'; ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.3)'; ripple.style.transform = 'scale(0)'; ripple.style.animation = 'ripple 0.6s linear'; ripple.style.pointerEvents = 'none'; ctaBtn.appendChild(ripple); // Set ripple position const rect = ctaBtn.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; // Clean up setTimeout(() => { ripple.remove(); }, 600); // Execute specific action (without page reload) console.log('CTA clicked'); }); // Add hover effect to image items const imageItems = document.querySelectorAll('.image-item'); imageItems.forEach(item => { item.addEventListener('mouseenter', () => { // Create some additional particles on hover for (let i = 0; i < 5; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); const size = Math.random() * 6 + 2; particle.style.width = `${size}px`; particle.style.height = `${size}px`; const rect = item.getBoundingClientRect(); const parentRect = particlesContainer.getBoundingClientRect(); const left = (rect.left - parentRect.left) + Math.random() * rect.width; const top = (rect.top - parentRect.top) + Math.random() * rect.height; particle.style.left = `${left}px`; particle.style.top = `${top}px`; particle.style.animationDelay = '0s'; particlesContainer.appendChild(particle); setTimeout(() => { particle.remove(); }, 3000); } }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Digital Agency Morphing Shapes</title> <style> @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Space Grotesk', sans-serif; overflow: hidden; background-color: #f0f0f5; color: #333; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: default; } .container { position: relative; width: 100%; height: 100%; max-width: 700px; max-height: 700px; overflow: hidden; } .canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .content { position: relative; z-index: 1; padding: 2rem; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1rem 0; } .logo { font-weight: 600; font-size: 1.5rem; letter-spacing: -0.5px; color: #333; display: flex; align-items: center; position: relative; } .logo::before { content: ''; display: inline-block; width: 12px; height: 12px; background-color: #fd7eb6; border-radius: 50%; margin-right: 8px; transition: transform 0.3s ease; } .logo:hover::before { transform: scale(1.5); } .nav { display: flex; gap: 1.5rem; } .nav-item { position: relative; cursor: pointer; font-weight: 500; font-size: 0.9rem; opacity: 0.8; transition: opacity 0.3s ease; } .nav-item:hover { opacity: 1; } .nav-item::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: #7eb6fd; transition: width 0.3s ease; } .nav-item:hover::after { width: 100%; } .hero { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 65%; text-align: center; max-width: 600px; margin: 0 auto; } .tagline { font-size: clamp(0.8rem, 5vw, 1rem); font-weight: 500; color: #7eb6fd; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1rem; opacity: 0; animation: fadeIn 0.8s forwards 0.5s; } .title { font-size: clamp(2rem, 10vw, 3.5rem); font-weight: 600; line-height: 1.1; margin-bottom: 1.5rem; letter-spacing: -1px; opacity: 0; animation: fadeIn 0.8s forwards 0.8s; background: linear-gradient(90deg, #fd7eb6, #7eb6fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .description { font-size: clamp(0.9rem, 4vw, 1.1rem); line-height: 1.6; margin-bottom: 2rem; opacity: 0; animation: fadeIn 0.8s forwards 1.1s; max-width: 500px; } .cta-container { display: flex; gap: 1rem; justify-content: center; opacity: 0; animation: fadeIn 0.8s forwards 1.4s; } .cta { padding: 0.8rem 1.5rem; border-radius: 100px; background-color: #333; color: white; font-weight: 500; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; border: none; outline: none; font-family: 'Space Grotesk', sans-serif; } .cta::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.7s ease; } .cta:hover::before { left: 100%; } .cta.primary { background: linear-gradient(90deg, #fd7eb6, #7eb6fd); } .cta.secondary { background-color: transparent; border: 1px solid #333; color: #333; } .footer { width: 100%; display: flex; justify-content: space-between; padding: 1rem 0; font-size: 0.8rem; opacity: 0.7; } .social-icons { display: flex; gap: 1rem; } .social-icon { cursor: pointer; transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0.7; } .social-icon:hover { transform: translateY(-3px); opacity: 1; } .blob-cursor { position: fixed; width: 40px; height: 40px; background-color: rgba(126, 182, 253, 0.2); border-radius: 50%; pointer-events: none; mix-blend-mode: multiply; z-index: 9999; transition: transform 0.1s ease; backdrop-filter: blur(5px); transform: translate(-50%, -50%); } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 600px) { .nav { display: none; } .hero { height: 75%; } .cta-container { flex-direction: column; align-items: center; } .footer { flex-direction: column; gap: 1rem; align-items: center; } } </style> </head> <body> <div class="blob-cursor"></div> <div class="container"> <div class="canvas-container"> <canvas id="morphCanvas"></canvas> </div> <div class="content"> <div class="header"> <div class="logo">morphify</div> <div class="nav"> <div class="nav-item">Work</div> <div class="nav-item">Services</div> <div class="nav-item">About</div> <div class="nav-item">Contact</div> </div> </div> <div class="hero"> <div class="tagline">Digital Experience Agency</div> <h1 class="title">Shape-shifting experiences for the digital future</h1> <p class="description">We craft fluid, avant-garde digital experiences where design morphs with purpose. Our interactive solutions transform abstract concepts into tangible user journeys.</p> <div class="cta-container"> <button class="cta primary" id="changeShapeBtn">Morph Experience</button> <button class="cta secondary">View Our Work</button> </div> </div> <div class="footer"> <div>© 2023 Morphify Digital Studio</div> <div class="social-icons"> <div class="social-icon">Tw</div> <div class="social-icon">In</div> <div class="social-icon">Fb</div> <div class="social-icon">Dr</div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Setup canvas const canvas = document.getElementById('morphCanvas'); const ctx = canvas.getContext('2d'); // Set canvas dimensions to match container function resizeCanvas() { canvas.width = canvas.parentElement.clientWidth; canvas.height = canvas.parentElement.clientHeight; } resizeCanvas(); window.addEventListener('resize', resizeCanvas); // Blob cursor const blobCursor = document.querySelector('.blob-cursor'); let cursorX = 0, cursorY = 0; let mouseX = 0, mouseY = 0; document.addEventListener('mousemove', function(e) { mouseX = e.clientX; mouseY = e.clientY; }); function updateCursor() { cursorX += (mouseX - cursorX) * 0.1; cursorY += (mouseY - cursorY) * 0.1; if(blobCursor) { blobCursor.style.left = cursorX + 'px'; blobCursor.style.top = cursorY + 'px'; } requestAnimationFrame(updateCursor); } updateCursor(); // Morphing shapes class Shape { constructor(x, y, radius, points, color) { this.x = x; this.y = y; this.radius = radius; this.targetRadius = radius; this.points = points; this.color = color; this.angles = []; this.radii = []; this.targetRadii = []; // Initialize angles and radii for (let i = 0; i < this.points; i++) { this.angles[i] = (Math.PI * 2 / this.points) * i; this.radii[i] = this.radius * (0.8 + Math.random() * 0.4); this.targetRadii[i] = this.radii[i]; } } setTarget() { for (let i = 0; i < this.points; i++) { this.targetRadii[i] = this.radius * (0.7 + Math.random() * 0.6); } this.targetRadius = this.radius * (0.9 + Math.random() * 0.2); } update() { for (let i = 0; i < this.points; i++) { this.radii[i] += (this.targetRadii[i] - this.radii[i]) * 0.1; } this.radius += (this.targetRadius - this.radius) * 0.1; } draw(ctx) { ctx.beginPath(); const x1 = this.x + Math.cos(this.angles[0]) * this.radii[0]; const y1 = this.y + Math.sin(this.angles[0]) * this.radii[0]; ctx.moveTo(x1, y1); for (let i = 1; i < this.points; i++) { const x = this.x + Math.cos(this.angles[i]) * this.radii[i]; const y = this.y + Math.sin(this.angles[i]) * this.radii[i]; const xPrev = this.x + Math.cos(this.angles[i-1]) * this.radii[i-1]; const yPrev = this.y + Math.sin(this.angles[i-1]) * this.radii[i-1]; const xMid = (x + xPrev) / 2; const yMid = (y + yPrev) / 2; ctx.quadraticCurveTo(xPrev, yPrev, xMid, yMid); } const xLast = this.x + Math.cos(this.angles[this.points-1]) * this.radii[this.points-1]; const yLast = this.y + Math.sin(this.angles[this.points-1]) * this.radii[this.points-1]; const xFirst = this.x + Math.cos(this.angles[0]) * this.radii[0]; const yFirst = this.y + Math.sin(this.angles[0]) * this.radii[0]; const xMid = (xLast + xFirst) / 2; const yMid = (yLast + yFirst) / 2; ctx.quadraticCurveTo(xLast, yLast, xMid, yMid); ctx.fillStyle = this.color; ctx.fill(); } } // Create shapes with pastel colors const shapes = []; const colors = [ 'rgba(253, 126, 182, 0.15)', // Pastel pink 'rgba(126, 182, 253, 0.15)', // Pastel blue 'rgba(182, 253, 126, 0.15)', // Pastel green 'rgba(253, 216, 126, 0.15)' // Pastel yellow ]; function initShapes() { shapes.length = 0; // Calculate positions based on canvas size const centerX = canvas.width / 2; const centerY = canvas.height / 2; const sizeMultiplier = Math.min(canvas.width, canvas.height) / 700; // Create shapes shapes.push(new Shape(centerX, centerY, 130 * sizeMultiplier, 8, colors[0])); shapes.push(new Shape(centerX + 50 * sizeMultiplier, centerY - 30 * sizeMultiplier, 100 * sizeMultiplier, 7, colors[1])); shapes.push(new Shape(centerX - 70 * sizeMultiplier, centerY + 50 * sizeMultiplier, 120 * sizeMultiplier, 6, colors[2])); shapes.push(new Shape(centerX - 20 * sizeMultiplier, centerY - 60 * sizeMultiplier, 90 * sizeMultiplier, 5, colors[3])); } initShapes(); window.addEventListener('resize', initShapes); function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Update and draw shapes shapes.forEach(shape => { shape.update(); shape.draw(ctx); }); requestAnimationFrame(animate); } animate(); // Periodically change shape targets function morphShapes() { shapes.forEach(shape => shape.setTarget()); } let morphInterval = setInterval(morphShapes, 2000); // Interactive elements const changeShapeBtn = document.getElementById('changeShapeBtn'); changeShapeBtn.addEventListener('click', function() { clearInterval(morphInterval); morphShapes(); morphInterval = setInterval(morphShapes, 2000); // Button animation this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = 'scale(1)'; }, 200); }); // Mouse interaction with shapes canvas.addEventListener('mousemove', function(e) { const rect = canvas.getBoundingClientRect(); const mouseX = e.clientX - rect.left; const mouseY = e.clientY - rect.top; shapes.forEach((shape, index) => { const dx = mouseX - shape.x; const dy = mouseY - shape.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < shape.radius * 1.5) { // Repel shapes slightly const angle = Math.atan2(dy, dx); shape.x -= Math.cos(angle) * 2; shape.y -= Math.sin(angle) * 2; } }); }); // Interactive elements hover effects const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('mouseenter', () => { blobCursor.style.transform = 'translate(-50%, -50%) scale(1.5)'; blobCursor.style.backgroundColor = 'rgba(126, 182, 253, 0.3)'; }); item.addEventListener('mouseleave', () => { blobCursor.style.transform = 'translate(-50%, -50%) scale(1)'; blobCursor.style.backgroundColor = 'rgba(126, 182, 253, 0.2)'; }); }); const ctaButtons = document.querySelectorAll('.cta'); ctaButtons.forEach(btn => { btn.addEventListener('mouseenter', () => { blobCursor.style.transform = 'translate(-50%, -50%) scale(1.5)'; blobCursor.style.backgroundColor = 'rgba(253, 126, 182, 0.3)'; }); btn.addEventListener('mouseleave', () => { blobCursor.style.transform = 'translate(-50%, -50%) scale(1)'; blobCursor.style.backgroundColor = 'rgba(126, 182, 253, 0.2)'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CyberSynth - Tech Exploration</title> <style> :root { --primary-bg: #0a0e17; --secondary-bg: #151c28; --neon-primary: #0dffb5; --neon-secondary: #00b3ff; --neon-tertiary: #ff2a6d; --text-primary: #f2f2f2; --text-secondary: #a7b1c2; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--primary-bg); color: var(--text-primary); overflow-x: hidden; height: 700px; width: 700px; max-width: 100%; position: relative; } .container { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 1.5rem; position: relative; overflow: hidden; } .particle-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .hero-content { position: relative; z-index: 2; max-width: 100%; padding-top: 2rem; } .logo-container { display: flex; align-items: center; margin-bottom: 1.5rem; } .logo { font-size: 1.8rem; font-weight: 700; background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 1px; } nav { margin-left: auto; } .nav-links { display: flex; gap: 1.5rem; list-style: none; } .nav-links li a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; font-weight: 500; position: relative; transition: color 0.3s ease; } .nav-links li a:hover { color: var(--neon-primary); } .nav-links li a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary)); transition: width 0.3s ease; } .nav-links li a:hover::after { width: 100%; } .hero-text { margin-top: 3.5rem; max-width: 600px; } h1 { font-size: 3.2rem; line-height: 1.1; margin-bottom: 1.5rem; font-weight: 800; letter-spacing: -1px; } h1 span { background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .lead { font-size: 1.1rem; line-height: 1.6; color: var(--text-secondary); margin-bottom: 2.5rem; max-width: 85%; } .cta-buttons { display: flex; gap: 1rem; flex-wrap: wrap; } .btn { padding: 0.8rem 1.8rem; border-radius: 5px; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; border: none; z-index: 1; } .btn:hover { transform: translateY(-3px); } .btn-primary { background: linear-gradient(45deg, var(--neon-primary), var(--neon-secondary)); color: var(--primary-bg); box-shadow: 0 0 15px rgba(13, 255, 181, 0.4); } .btn-primary:hover { box-shadow: 0 0 25px rgba(13, 255, 181, 0.6); } .btn-secondary { background-color: transparent; color: var(--text-primary); border: 2px solid var(--neon-secondary); box-shadow: 0 0 10px rgba(0, 179, 255, 0.3); } .btn-secondary:hover { box-shadow: 0 0 20px rgba(0, 179, 255, 0.5); } .featured-card { margin-top: 2.5rem; background-color: var(--secondary-bg); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.05); padding: 1.5rem; display: flex; gap: 1.5rem; flex-wrap: wrap; box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; } .featured-card:hover { transform: translateY(-5px); box-shadow: 0 20px 30px rgba(0, 0, 0, 0.4); } .featured-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary), var(--neon-tertiary)); } .featured-icon { width: 50px; height: 50px; background: rgba(13, 255, 181, 0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--neon-primary); font-size: 1.5rem; flex-shrink: 0; } .featured-content { flex: 1; } .featured-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; } .featured-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; } .glow-effect { position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(13, 255, 181, 0.15) 0%, rgba(13, 255, 181, 0) 70%); pointer-events: none; z-index: 1; transition: opacity 0.3s ease; opacity: 0; } .topics-row { display: flex; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; } .topic-pill { padding: 0.5rem 1rem; background-color: rgba(255, 255, 255, 0.05); border-radius: 20px; font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; transition: all 0.3s ease; } .topic-pill:hover { background-color: rgba(13, 255, 181, 0.1); color: var(--neon-primary); transform: translateY(-3px); } @media (max-width: 700px) { .container { padding: 1rem; } .logo { font-size: 1.5rem; } .nav-links { gap: 1rem; } h1 { font-size: 2.5rem; } .hero-text { margin-top: 2rem; } .lead { font-size: 1rem; max-width: 100%; } .featured-card { padding: 1.2rem; gap: 1rem; } } @media (max-width: 500px) { .logo-container { flex-direction: column; align-items: flex-start; gap: 1rem; } nav { margin-left: 0; } h1 { font-size: 2.2rem; } .btn { padding: 0.7rem 1.4rem; font-size: 0.9rem; } .featured-icon { width: 40px; height: 40px; font-size: 1.2rem; } } </style> </head> <body> <div class="container"> <canvas class="particle-canvas" id="particleCanvas"></canvas> <div class="glow-effect" id="glowEffect"></div> <section class="hero-content"> <div class="logo-container"> <div class="logo">CyberSynth</div> <nav> <ul class="nav-links"> <li><a href="#">Articles</a></li> <li><a href="#">Resources</a></li> <li><a href="#">Explore</a></li> </ul> </nav> </div> <div class="hero-text"> <h1>Quantum Computing's <span>Next Frontier</span></h1> <p class="lead">Exploring the intersection of particle physics and computational architecture that's reshaping how we process information in the AI-driven future.</p> <div class="cta-buttons"> <button class="btn btn-primary">Explore Technology</button> <button class="btn btn-secondary">Subscribe to Updates</button> </div> <div class="topics-row"> <div class="topic-pill">#QuantumComputing</div> <div class="topic-pill">#ParticlePhysics</div> <div class="topic-pill">#FutureTech</div> <div class="topic-pill">#DataScience</div> </div> </div> <div class="featured-card"> <div class="featured-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="M8 14s1.5 2 4 2 4-2 4-2"></path> <line x1="9" y1="9" x2="9.01" y2="9"></line> <line x1="15" y1="9" x2="15.01" y2="9"></line> </svg> </div> <div class="featured-content"> <h3 class="featured-title">Latest: Breakthrough in Quantum Entanglement</h3> <p class="featured-desc">Scientists at MIT have demonstrated a novel approach to quantum entanglement that could revolutionize secure communications and dramatically accelerate machine learning algorithms.</p> </div> </div> </section> </div> <script> // Particle system class Particle { constructor(canvas, options) { this.canvas = canvas; this.ctx = canvas.getContext('2d'); this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.vx = (Math.random() - 0.5) * options.speed; this.vy = (Math.random() - 0.5) * options.speed; this.radius = Math.random() * options.maxSize; this.originalColor = options.colors[Math.floor(Math.random() * options.colors.length)]; this.color = this.originalColor; this.options = options; this.opacity = Math.random() * 0.8 + 0.2; this.active = Math.random() > 0.1; // Only some particles are active initially } draw() { this.ctx.beginPath(); this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); this.ctx.fillStyle = this.color.replace('1)', `${this.opacity})`); this.ctx.fill(); } update(mouseX, mouseY) { // Move the particle this.x += this.vx; this.y += this.vy; // Bounce off the edges if (this.x < 0 || this.x > this.canvas.width) { this.vx = -this.vx; } if (this.y < 0 || this.y > this.canvas.height) { this.vy = -this.vy; } // Calculate distance to mouse const dx = mouseX - this.x; const dy = mouseY - this.y; const distance = Math.sqrt(dx * dx + dy * dy); // Activate particles near the mouse if (distance < this.options.activationDistance) { this.active = true; // Particles move away from cursor const angle = Math.atan2(dy, dx); const force = (this.options.activationDistance - distance) / this.options.activationDistance; this.vx -= Math.cos(angle) * force * this.options.repelStrength; this.vy -= Math.sin(angle) * force * this.options.repelStrength; // Change color based on proximity if (distance < this.options.activationDistance * 0.5) { this.color = this.options.activeColor; this.opacity = 0.9; } else { this.color = this.originalColor; this.opacity = 0.6 + (this.options.activationDistance - distance) / this.options.activationDistance * 0.4; } } else { // Gradually return to original state if (this.active) { this.color = this.originalColor; if (this.opacity > 0.2) this.opacity -= 0.01; } } // Apply some friction to slow particles this.vx *= 0.98; this.vy *= 0.98; // Maintain a minimum speed for active particles if (this.active) { const currentSpeed = Math.sqrt(this.vx * this.vx + this.vy * this.vy); if (currentSpeed < this.options.minSpeed) { const angle = Math.random() * Math.PI * 2; this.vx = Math.cos(angle) * this.options.minSpeed; this.vy = Math.sin(angle) * this.options.minSpeed; } // Chance to become inactive if (Math.random() < 0.001) { this.active = false; } } else { // Chance to become active even without mouse if (Math.random() < 0.0005) { this.active = true; } } // Update radius based on activity if (this.active) { if (this.radius < this.options.maxSize) { this.radius += 0.1; } } else { if (this.radius > this.options.minSize) { this.radius -= 0.05; } } } } class ParticleSystem { constructor(canvasId) { this.canvas = document.getElementById(canvasId); this.ctx = this.canvas.getContext('2d'); this.particles = []; this.mouseX = 0; this.mouseY = 0; this.isMouseMoving = false; this.mouseTimer = null; this.options = { particleCount: 100, colors: [ 'rgba(13, 255, 181, 1)', // Neon green 'rgba(0, 179, 255, 1)', // Neon blue 'rgba(255, 42, 109, 1)' // Neon pink ], activeColor: 'rgba(255, 255, 255, 1)', speed: 0.5, maxSize: 4, minSize: 0.5, activationDistance: 150, repelStrength: 0.05, minSpeed: 0.1 }; this.init(); } init() { // Set canvas size this.resizeCanvas(); window.addEventListener('resize', () => this.resizeCanvas()); // Create particles this.createParticles(); // Mouse tracking document.addEventListener('mousemove', (e) => this.trackMouse(e)); document.addEventListener('touchmove', (e) => this.trackTouch(e)); // Start animation loop this.animate(); // Add periodic wave effect setInterval(() => this.createWave(), 5000); } resizeCanvas() { this.canvas.width = this.canvas.parentElement.clientWidth; this.canvas.height = this.canvas.parentElement.clientHeight; // Recreate particles when canvas is resized if (this.particles.length > 0) { this.createParticles(); } } createParticles() { this.particles = []; // Adjust particle count based on screen size const area = this.canvas.width * this.canvas.height; const density = area / 200000; const count = Math.min(Math.max(Math.floor(this.options.particleCount * density), 50), 200); for (let i = 0; i < count; i++) { this.particles.push(new Particle(this.canvas, this.options)); } } trackMouse(e) { const rect = this.canvas.getBoundingClientRect(); this.mouseX = e.clientX - rect.left; this.mouseY = e.clientY - rect.top; this.isMouseMoving = true; clearTimeout(this.mouseTimer); this.mouseTimer = setTimeout(() => { this.isMouseMoving = false; }, 100); // Update glow effect position this.updateGlowEffect(); } trackTouch(e) { if (e.touches.length > 0) { const rect = this.canvas.getBoundingClientRect(); this.mouseX = e.touches[0].clientX - rect.left; this.mouseY = e.touches[0].clientY - rect.top; this.isMouseMoving = true; clearTimeout(this.mouseTimer); this.mouseTimer = setTimeout(() => { this.isMouseMoving = false; }, 100); // Update glow effect position this.updateGlowEffect(); } } updateGlowEffect() { const glowEffect = document.getElementById('glowEffect'); glowEffect.style.left = `${this.mouseX - 100}px`; glowEffect.style.top = `${this.mouseY - 100}px`; glowEffect.style.opacity = '1'; clearTimeout(this.glowTimer); this.glowTimer = setTimeout(() => { glowEffect.style.opacity = '0'; }, 1000); } createWave() { // Create a ripple effect from a random point const centerX = Math.random() * this.canvas.width; const centerY = Math.random() * this.canvas.height; this.particles.forEach(particle => { const dx = particle.x - centerX; const dy = particle.y - centerY; const distance = Math.sqrt(dx * dx + dy * dy); const angle = Math.atan2(dy, dx); // Apply a force based on distance setTimeout(() => { const force = Math.max(0, (300 - distance) / 300); particle.vx += Math.cos(angle) * force * 2; particle.vy += Math.sin(angle) * force * 2; particle.active = true; }, distance * 3); // Delayed based on distance for a wave effect }); } drawConnections() { this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)'; this.ctx.lineWidth = 0.5; for (let i = 0; i < this.particles.length; i++) { const particleA = this.particles[i]; if (!particleA.active) continue; for (let j = i + 1; j < this.particles.length; j++) { const particleB = this.particles[j]; if (!particleB.active) continue; const dx = particleA.x - particleB.x; const dy = particleA.y - particleB.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < 100) { this.ctx.beginPath(); this.ctx.moveTo(particleA.x, particleA.y); this.ctx.lineTo(particleB.x, particleB.y); // Line opacity based on distance const opacity = (100 - distance) / 100 * 0.2; this.ctx.strokeStyle = `rgba(255, 255, 255, ${opacity})`; this.ctx.stroke(); } } } } animate() { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); // Update and draw particles this.particles.forEach(particle => { particle.update(this.mouseX, this.mouseY); particle.draw(); }); // Draw connections between nearby particles this.drawConnections(); requestAnimationFrame(() => this.animate()); } } // Initialize the system when the window loads window.addEventListener('load', () => { const particleSystem = new ParticleSystem('particleCanvas'); // Interactive elements const buttons = document.querySelectorAll('.btn'); buttons.forEach(btn => { btn.addEventListener('mouseenter', () => { btn.style.transform = 'translateY(-5px)'; }); btn.addEventListener('mouseleave', () => { btn.style.transform = 'translateY(0)'; }); btn.addEventListener('click', (e) => { e.preventDefault(); // Create ripple effect on button click const ripple = document.createElement('span'); ripple.classList.add('ripple'); btn.appendChild(ripple); const rect = btn.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${e.clientX - rect.left - size/2}px`; ripple.style.top = `${e.clientY - rect.top - size/2}px`; ripple.classList.add('active'); setTimeout(() => { ripple.remove(); }, 500); }); }); // Topic pills interaction const topicPills = document.querySelectorAll('.topic-pill'); topicPills.forEach(pill => { pill.addEventListener('mouseenter', () => { pill.style.transform = 'translateY(-5px) scale(1.05)'; }); pill.addEventListener('mouseleave', () => { pill.style.transform = 'translateY(0) scale(1)'; }); pill.addEventListener('click', () => { // Toggle active state pill.classList.toggle('active'); if (pill.classList.contains('active')) { pill.style.backgroundColor = 'rgba(13, 255, 181, 0.2)'; pill.style.color = '#0dffb5'; } else { pill.style.backgroundColor = 'rgba(255, 255, 255, 0.05)'; pill.style.color = '#a7b1c2'; } }); }); // Featured card hover effect const featuredCard = document.querySelector('.featured-card'); featuredCard.addEventListener('mouseenter', () => { featuredCard.style.transform = 'translateY(-8px)'; featuredCard.style.boxShadow = '0 25px 35px rgba(0, 0, 0, 0.5)'; }); featuredCard.addEventListener('mouseleave', () => { featuredCard.style.transform = 'translateY(0)'; featuredCard.style.boxShadow = '0 15px 25px rgba(0, 0, 0, 0.3)'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DataFlow - Intelligent Data Pipeline Management</title> <style> :root { --primary: #2e72ea; --secondary: #5e17eb; --accent: #00dbde; --dark: #121429; --light: #f9faff; --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body, html { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--dark); color: var(--light); height: 100%; overflow: hidden; line-height: 1.6; } .app-container { width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; max-width: 700px; max-height: 700px; margin: 0 auto; } .gradient-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; } .gradient-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .noise-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E"); opacity: 0.3; pointer-events: none; } .content { position: relative; padding: 2rem; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; } .logo { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.5rem; } .logo-icon { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 6px; width: 28px; height: 28px; position: relative; overflow: hidden; } .logo-icon::before { content: ''; position: absolute; width: 16px; height: 16px; background-color: var(--dark); border-radius: 50%; transform: scale(0); transition: var(--transition); } .logo:hover .logo-icon::before { transform: scale(1); } .hero { margin-top: 2rem; margin-bottom: 2rem; max-width: 580px; } .subtitle { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; background: linear-gradient(90deg, var(--accent), var(--primary)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 1rem; position: relative; padding-left: 1.25rem; } .subtitle::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 2px; background: linear-gradient(90deg, var(--accent), var(--primary)); } h1 { font-size: 3rem; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 1.5rem; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.7)); -webkit-background-clip: text; background-clip: text; color: transparent; } .description { font-size: 1.125rem; margin-bottom: 2rem; opacity: 0.8; max-width: 500px; } .features { display: flex; gap: 2rem; margin-bottom: 2rem; } .feature { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; opacity: 0.8; } .feature svg { width: 16px; height: 16px; flex-shrink: 0; } .cta-group { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.75rem; font-weight: 600; border-radius: 8px; transition: var(--transition); border: none; cursor: pointer; font-size: 1rem; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%); opacity: 0; transition: opacity 0.4s; } .btn:hover::before { opacity: 1; } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; box-shadow: 0 6px 20px rgba(94, 23, 235, 0.2); } .btn-primary:hover { box-shadow: 0 8px 25px rgba(94, 23, 235, 0.35); transform: translateY(-2px); } .btn-secondary { background: rgba(255, 255, 255, 0.08); color: white; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.12); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); } .btn svg { width: 18px; height: 18px; transition: transform 0.3s ease; } .btn:hover svg { transform: translateX(3px); } .stats-container { display: flex; gap: 2rem; margin-top: 2rem; } .stat { flex: 1; } .stat-value { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; letter-spacing: -0.02em; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.7)); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat-label { font-size: 0.85rem; opacity: 0.7; } .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .footer { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; font-size: 0.875rem; opacity: 0.6; } .scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0.6; font-size: 0.875rem; animation: bounceY 2s infinite; } @keyframes bounceY { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-10px); } } .cursor-glow { position: fixed; width: 200px; height: 200px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(94, 23, 235, 0.15) 0%, rgba(0, 0, 0, 0) 70%); transform: translate(-50%, -50%); z-index: 0; opacity: 0; transition: opacity 0.3s ease; } /* Responsive styles */ @media (max-width: 600px) { .content { padding: 1.5rem; } h1 { font-size: 2.25rem; } .description { font-size: 1rem; } .features { flex-direction: column; gap: 1rem; } .stats-container { flex-direction: column; gap: 1rem; } .cta-group { flex-direction: column; gap: 1rem; } .btn { width: 100%; } } /* Floating elements animation */ .floating-element { position: absolute; border-radius: 50%; filter: blur(15px); opacity: 0.3; z-index: -1; } /* Animated gradient border */ .gradient-border { position: relative; } .gradient-border::after { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent), var(--primary)); background-size: 400% 400%; z-index: -1; border-radius: 10px; animation: borderGradient 6s ease infinite; opacity: 0; transition: opacity 0.3s ease; } .gradient-border:hover::after { opacity: 1; } @keyframes borderGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Switch indicator */ .switch-container { display: flex; align-items: center; gap: 0.75rem; background: rgba(255, 255, 255, 0.05); border-radius: 6px; padding: 0.25rem; margin-top: 1.5rem; } .switch-option { padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: var(--transition); } .switch-option.active { background: rgba(255, 255, 255, 0.1); } /* Data point visualization */ .data-visual { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; } .data-circle { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); animation: pulseAndRotate 8s infinite linear; } .data-circle:nth-child(1) { width: 100%; height: 100%; border-color: rgba(46, 114, 234, 0.3); } .data-circle:nth-child(2) { width: 75%; height: 75%; border-color: rgba(94, 23, 235, 0.3); animation-duration: 10s; animation-direction: reverse; } .data-circle:nth-child(3) { width: 50%; height: 50%; border-color: rgba(0, 219, 222, 0.3); animation-duration: 6s; } .data-node { position: absolute; width: 6px; height: 6px; background: white; border-radius: 50%; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); } @keyframes pulseAndRotate { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.05); } 100% { transform: rotate(360deg) scale(1); } } @media (max-width: 768px) { .data-visual { display: none; } } </style> </head> <body> <div class="app-container"> <div class="gradient-background"> <canvas class="gradient-canvas" id="gradient-canvas"></canvas> <div class="noise-overlay"></div> </div> <div class="content"> <div class="header"> <div class="logo"> <div class="logo-icon"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none"> <path d="M12 4L4 8L12 12L20 8L12 4Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M4 16L12 20L20 16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M4 12L12 16L20 12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> DataFlow </div> </div> <div class="hero"> <span class="subtitle">AI-Powered</span> <h1>Transform your data pipelines from chaos to clarity</h1> <p class="description">DataFlow intelligently manages your ETL processes with real-time monitoring, automated error recovery, and predictive scaling to prevent bottlenecks before they happen.</p> <div class="features"> <div class="feature"> <svg viewBox="0 0 24 24" fill="none"> <path d="M5 13L9 17L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <span>99.99% uptime guarantee</span> </div> <div class="feature"> <svg viewBox="0 0 24 24" fill="none"> <path d="M5 13L9 17L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <span>Self-healing workflows</span> </div> <div class="feature"> <svg viewBox="0 0 24 24" fill="none"> <path d="M5 13L9 17L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <span>Enterprise-grade security</span> </div> </div> <div class="switch-container"> <div class="switch-option active" data-option="enterprise">Enterprise</div> <div class="switch-option" data-option="startup">Startup</div> <div class="switch-option" data-option="developer">Developer</div> </div> <div class="cta-group"> <button class="btn btn-primary gradient-border"> <span>Start free trial</span> <svg viewBox="0 0 24 24" fill="none"> <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 5L19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <button class="btn btn-secondary"> <span>Live demo</span> </button> </div> <div class="stats-container"> <div class="stat"> <div class="stat-value" id="stat-1">0</div> <div class="stat-label">Data sources integrated</div> </div> <div class="stat"> <div class="stat-value" id="stat-2">0%</div> <div class="stat-label">Average time saved</div> </div> <div class="stat"> <div class="stat-value" id="stat-3">0+</div> <div class="stat-label">Active users</div> </div> </div> </div> <div class="data-visual"> <div class="data-circle"></div> <div class="data-circle"></div> <div class="data-circle"></div> <div class="data-node" style="top: 0; left: 50%;"></div> <div class="data-node" style="top: 50%; right: 0;"></div> <div class="data-node" style="bottom: 0; left: 50%;"></div> <div class="data-node" style="top: 50%; left: 0;"></div> </div> <div class="cursor-glow" id="cursor-glow"></div> <div class="footer"> <div>SOC 2 & GDPR Compliant</div> <div>© 2023 DataFlow Inc.</div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Gradient animation const canvas = document.getElementById('gradient-canvas'); const ctx = canvas.getContext('2d'); let width, height; function resizeCanvas() { width = canvas.width = canvas.offsetWidth; height = canvas.height = canvas.offsetHeight; } window.addEventListener('resize', resizeCanvas); resizeCanvas(); const colors = [ { r: 46, g: 114, b: 234 }, // primary { r: 94, g: 23, b: 235 }, // secondary { r: 0, g: 219, b: 222 }, // accent { r: 18, g: 20, b: 41 } // dark ]; const points = []; const numPoints = 6; const pointRadius = Math.max(width, height) / 2; for (let i = 0; i < numPoints; i++) { points.push({ x: Math.random() * width, y: Math.random() * height, vx: (Math.random() - 0.5) * 0.3, vy: (Math.random() - 0.5) * 0.3, color: colors[Math.floor(Math.random() * colors.length)] }); } function drawGradient() { ctx.clearRect(0, 0, width, height); // Move points points.forEach(point => { point.x += point.vx; point.y += point.vy; // Bounce on edges if (point.x < 0 || point.x > width) point.vx *= -1; if (point.y < 0 || point.y > height) point.vy *= -1; }); // Create gradient for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { let r = 0, g = 0, b = 0; let totalWeight = 0; points.forEach(point => { const dx = x - point.x; const dy = y - point.y; const distance = Math.sqrt(dx * dx + dy * dy); // Inverse square falloff const weight = Math.max(0, 1 - (distance / pointRadius)); totalWeight += weight; r += point.color.r * weight; g += point.color.g * weight; b += point.color.b * weight; }); if (totalWeight > 0) { r /= totalWeight; g /= totalWeight; b /= totalWeight; } ctx.fillStyle = `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`; ctx.fillRect(x, y, 1, 1); } } requestAnimationFrame(drawGradient); } // For performance, we actually draw a blurred version with less resolution // and scale it up function optimizedGradient() { ctx.clearRect(0, 0, width, height); // Move points points.forEach(point => { point.x += point.vx; point.y += point.vy; // Bounce on edges if (point.x < 0 || point.x > width) point.vx *= -1; if (point.y < 0 || point.y > height) point.vy *= -1; }); // Create radial gradients for each point ctx.globalCompositeOperation = 'source-over'; ctx.clearRect(0, 0, width, height); // Background fill ctx.fillStyle = 'rgb(18, 20, 41)'; ctx.fillRect(0, 0, width, height); ctx.globalCompositeOperation = 'lighter'; points.forEach(point => { const gradient = ctx.createRadialGradient( point.x, point.y, 0, point.x, point.y, pointRadius ); gradient.addColorStop(0, `rgba(${point.color.r}, ${point.color.g}, ${point.color.b}, 0.8)`); gradient.addColorStop(1, `rgba(${point.color.r}, ${point.color.g}, ${point.color.b}, 0)`); ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(point.x, point.y, pointRadius, 0, Math.PI * 2); ctx.fill(); }); requestAnimationFrame(optimizedGradient); } optimizedGradient(); // Cursor glow effect const cursorGlow = document.getElementById('cursor-glow'); document.addEventListener('mousemove', e => { const x = e.clientX; const y = e.clientY; cursorGlow.style.left = `${x}px`; cursorGlow.style.top = `${y}px`; cursorGlow.style.opacity = '1'; clearTimeout(window.cursorTimeout); window.cursorTimeout = setTimeout(() => { cursorGlow.style.opacity = '0'; }, 1000); }); // Button hover effect const buttons = document.querySelectorAll('.btn'); buttons.forEach(btn => { btn.addEventListener('mousemove', function(e) { const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const xPercent = Math.round((x / rect.width) * 100); const yPercent = Math.round((y / rect.height) * 100); this.style.setProperty('--x', `${xPercent}%`); this.style.setProperty('--y', `${yPercent}%`); }); }); // Counter animation function animateValue(id, start, end, duration, format = '') { const obj = document.getElementById(id); const range = end - start; const minTimer = 50; let stepTime = Math.abs(Math.floor(duration / range)); stepTime = Math.max(stepTime, minTimer); const startTime = new Date().getTime(); const endTime = startTime + duration; let timer; function run() { const now = new Date().getTime(); const remaining = Math.max((endTime - now) / duration, 0); const value = Math.round(end - (remaining * range)); obj.innerHTML = value + format; if (value == end) { clearInterval(timer); } } timer = setInterval(run, stepTime); run(); } // Start counter animations after a delay setTimeout(() => { animateValue('stat-1', 0, 57, 1500); animateValue('stat-2', 0, 73, 1500, '%'); animateValue('stat-3', 0, 10000, 2000, '+'); }, 500); // Switch functionality const switchOptions = document.querySelectorAll('.switch-option'); switchOptions.forEach(option => { option.addEventListener('click', function() { switchOptions.forEach(opt => opt.classList.remove('active')); this.classList.add('active'); }); }); // Create floating elements for additional visual interest function createFloatingElements() { const container = document.querySelector('.app-container'); const colors = ['rgba(46, 114, 234, 0.15)', 'rgba(94, 23, 235, 0.15)', 'rgba(0, 219, 222, 0.15)']; for (let i = 0; i < 5; i++) { const element = document.createElement('div'); element.classList.add('floating-element'); const size = 100 + Math.random() * 200; const colorIndex = Math.floor(Math.random() * colors.length); element.style.width = `${size}px`; element.style.height = `${size}px`; element.style.background = colors[colorIndex]; element.style.left = `${Math.random() * 100}%`; element.style.top = `${Math.random() * 100}%`; // Random animation const duration = 15 + Math.random() * 30; const xMovement = 10 + Math.random() * 20; const yMovement = 10 + Math.random() * 20; const delay = Math.random() * 5; element.style.animation = ` float ${duration}s ease-in-out ${delay}s infinite alternate `; // Create keyframes dynamically const keyframes = ` @keyframes float { 0% { transform: translate(0, 0); } 100% { transform: translate(${xMovement}px, ${yMovement}px); } } `; const styleElement = document.createElement('style'); styleElement.innerHTML = keyframes; document.head.appendChild(styleElement); container.appendChild(element); } } createFloatingElements(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&display=swap'); body { overflow: hidden; background-color: #111; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider-container { position: relative; width: 700px; height: 700px; overflow: hidden; } .progress-bar { position: absolute; bottom: 30px; left: 30px; z-index: 100; display: flex; gap: 15px; } .progress-item { width: 50px; height: 3px; background: rgba(255, 255, 255, 0.3); cursor: pointer; position: relative; transition: all 0.3s ease; } .progress-item::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: #fff; transition: width 5s linear; } .progress-item.active::after { width: 100%; } .progress-item:hover { background: rgba(255, 255, 255, 0.5); } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transform: translateY(50px); transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1); pointer-events: none; } .slide.active { opacity: 1; transform: translateY(0); pointer-events: auto; } .slide-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .slide-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1)); z-index: 2; } .slide-content { position: absolute; z-index: 3; left: 50px; bottom: 120px; width: 60%; } .slide-subtitle { font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); margin-bottom: 10px; transform: translateY(30px); opacity: 0; transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s; } .slide-title { font-family: 'Playfair Display', serif; font-size: 48px; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 20px; transform: translateY(30px); opacity: 0; transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s; } .slide-text { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); margin-bottom: 30px; max-width: 90%; transform: translateY(30px); opacity: 0; transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0.7s; } .slide-btn { display: inline-block; padding: 12px 30px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; background: transparent; color: #fff; border: 2px solid #fff; cursor: pointer; position: relative; overflow: hidden; transform: translateY(30px); opacity: 0; transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0.9s; } .slide-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: #fff; transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); z-index: -1; } .slide-btn:hover { color: #000; } .slide-btn:hover::before { left: 0; } .slide.active .slide-subtitle, .slide.active .slide-title, .slide.active .slide-text, .slide.active .slide-btn { transform: translateY(0); opacity: 1; } .slide-shape { position: absolute; z-index: 2; pointer-events: none; } .shape-1 { top: 40px; right: 40px; width: 120px; height: 120px; border: 10px solid rgba(255, 87, 34, 0.4); transform: rotate(45deg) scale(0); transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s; } .shape-2 { bottom: 100px; right: 60px; width: 150px; height: 150px; border-radius: 50%; border: 15px solid rgba(33, 150, 243, 0.3); transform: scale(0); transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s; } .shape-3 { top: 30%; right: 30%; width: 80px; height: 80px; background: rgba(156, 39, 176, 0.3); transform: scale(0) rotate(45deg); transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s; } .shape-4 { top: 20%; left: 10%; width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 193, 7, 0.4); transform: scale(0); transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.8s; } .slide.active .shape-1, .slide.active .shape-2, .slide.active .shape-3, .slide.active .shape-4 { transform: scale(1) rotate(0); } .nav-arrows { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; z-index: 10; transform: translateY(-50%); padding: 0 20px; } .nav-arrow { width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; } .nav-arrow:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.1); } .nav-arrow svg { width: 24px; height: 24px; fill: #fff; } .slide-bg-image { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 7s ease-in-out; } .slide.active .slide-bg-image { transform: scale(1); } @media (max-width: 768px) { .slide-content { left: 30px; bottom: 100px; width: 80%; } .slide-title { font-size: 32px; } .slide-text { font-size: 14px; max-width: 100%; } .shape-1, .shape-3 { display: none; } .shape-2 { width: 100px; height: 100px; right: 30px; } .shape-4 { width: 40px; height: 40px; } .progress-bar { bottom: 20px; left: 20px; } .progress-item { width: 40px; } } @media (max-width: 480px) { .slide-content { left: 20px; bottom: 90px; width: 85%; } .slide-title { font-size: 28px; margin-bottom: 10px; } .slide-text { margin-bottom: 20px; } .slide-btn { padding: 10px 20px; font-size: 12px; } .shape-2 { width: 70px; height: 70px; } } </style> </head> <body> <div class="slider-container"> <div class="nav-arrows"> <div class="nav-arrow prev"> <svg viewBox="0 0 24 24"> <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" /> </svg> </div> <div class="nav-arrow next"> <svg viewBox="0 0 24 24"> <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" /> </svg> </div> </div> <div class="progress-bar"> <div class="progress-item active"></div> <div class="progress-item"></div> <div class="progress-item"></div> <div class="progress-item"></div> </div> <!-- Slide 1 --> <div class="slide active"> <div class="slide-bg"> <img src="https://images.unsplash.com/photo-1558655146-9f40138edfeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80" alt="Creative Design" class="slide-bg-image"> </div> <div class="slide-overlay"></div> <div class="slide-shape shape-1"></div> <div class="slide-shape shape-2"></div> <div class="slide-shape shape-3"></div> <div class="slide-shape shape-4"></div> <div class="slide-content"> <div class="slide-subtitle">Strategic Branding</div> <h2 class="slide-title">Reshape Your Brand Narrative</h2> <p class="slide-text">We craft multi-dimensional identities that transcend traditional branding. Our layered approach builds depth into every touchpoint, creating memorable interactions that evolve with your audience.</p> <button class="slide-btn">Explore Studio</button> </div> </div> <!-- Slide 2 --> <div class="slide"> <div class="slide-bg"> <img src="https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2274&q=80" alt="Digital Experience" class="slide-bg-image"> </div> <div class="slide-overlay"></div> <div class="slide-shape shape-1"></div> <div class="slide-shape shape-2"></div> <div class="slide-shape shape-3"></div> <div class="slide-shape shape-4"></div> <div class="slide-content"> <div class="slide-subtitle">Interactive Design</div> <h2 class="slide-title">Digital Experiences That Resonate</h2> <p class="slide-text">Beyond static visuals, we architect interactive journeys that respond to human intuition. Each layer reveals new dimensions of your story through thoughtful motion and meaningful interactions.</p> <button class="slide-btn">See Projects</button> </div> </div> <!-- Slide 3 --> <div class="slide"> <div class="slide-bg"> <img src="https://images.unsplash.com/photo-1551503766-ac63dfa6401c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80" alt="Art Direction" class="slide-bg-image"> </div> <div class="slide-overlay"></div> <div class="slide-shape shape-1"></div> <div class="slide-shape shape-2"></div> <div class="slide-shape shape-3"></div> <div class="slide-shape shape-4"></div> <div class="slide-content"> <div class="slide-subtitle">Art Direction</div> <h2 class="slide-title">Visual Narratives That Captivate</h2> <p class="slide-text">We compose visual symphonies that harmonize color, typography, and form. Our art direction creates atmospheric spaces where your brand's unique perspective can unfold across multiple dimensions.</p> <button class="slide-btn">View Portfolio</button> </div> </div> <!-- Slide 4 --> <div class="slide"> <div class="slide-bg"> <img src="https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2274&q=80" alt="Motion Design" class="slide-bg-image"> </div> <div class="slide-overlay"></div> <div class="slide-shape shape-1"></div> <div class="slide-shape shape-2"></div> <div class="slide-shape shape-3"></div> <div class="slide-shape shape-4"></div> <div class="slide-content"> <div class="slide-subtitle">Motion Design</div> <h2 class="slide-title">Movement That Evokes Emotion</h2> <p class="slide-text">Through choreographed animation, we breathe life into static elements. Our motion philosophy creates depth through parallax, timing, and spatial relationships, inviting audiences to explore rather than observe.</p> <button class="slide-btn">Watch Showreel</button> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Variables const slides = document.querySelectorAll('.slide'); const progressItems = document.querySelectorAll('.progress-item'); const prevArrow = document.querySelector('.prev'); const nextArrow = document.querySelector('.next'); let currentSlide = 0; let slideInterval; let isTransitioning = false; // Functions function goToSlide(index) { if (isTransitioning) return; isTransitioning = true; // Remove active class from all slides and progress items slides.forEach(slide => { slide.classList.remove('active'); }); progressItems.forEach(item => { item.classList.remove('active'); }); // Reset progress animation progressItems[currentSlide].style.transition = 'none'; progressItems[currentSlide].querySelector('::after').style.width = '0%'; // Add active class to current slide and progress item currentSlide = (index + slides.length) % slides.length; slides[currentSlide].classList.add('active'); progressItems[currentSlide].classList.add('active'); // Wait for transition to complete setTimeout(() => { isTransitioning = false; }, 800); // Restart the slideshow resetInterval(); } function nextSlide() { goToSlide(currentSlide + 1); } function prevSlide() { goToSlide(currentSlide - 1); } function resetInterval() { clearInterval(slideInterval); slideInterval = setInterval(nextSlide, 5000); } // Event Listeners prevArrow.addEventListener('click', prevSlide); nextArrow.addEventListener('click', nextSlide); progressItems.forEach((item, index) => { item.addEventListener('click', () => { goToSlide(index); }); }); // Initialize slideshow resetInterval(); // Interactive hover effects for the buttons const buttons = document.querySelectorAll('.slide-btn'); buttons.forEach(btn => { btn.addEventListener('mouseenter', function() { // Create a ripple effect on hover const ripple = document.createElement('span'); ripple.style.position = 'absolute'; ripple.style.top = '50%'; ripple.style.left = '50%'; ripple.style.transform = 'translate(-50%, -50%)'; ripple.style.width = '0'; ripple.style.height = '0'; ripple.style.borderRadius = '50%'; ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.3)'; ripple.style.transition = 'all 0.6s ease-out'; this.appendChild(ripple); setTimeout(() => { ripple.style.width = '300px'; ripple.style.height = '300px'; ripple.style.opacity = '0'; }, 10); setTimeout(() => { ripple.remove(); }, 600); }); }); // Add parallax effect on mouse move document.querySelector('.slider-container').addEventListener('mousemove', function(e) { const container = this.getBoundingClientRect(); const x = e.clientX - container.left; const y = e.clientY - container.top; const moveX = (x - container.width / 2) / 30; const moveY = (y - container.height / 2) / 30; const activeSlide = document.querySelector('.slide.active'); const shapes = activeSlide.querySelectorAll('.slide-shape'); shapes.forEach((shape, index) => { const factor = (index + 1) * 0.6; shape.style.transform = `translate(${moveX * factor}px, ${moveY * factor}px) scale(1)`; }); const content = activeSlide.querySelector('.slide-content'); content.style.transform = `translate(${moveX * -0.3}px, ${moveY * -0.3}px)`; }); // Reset transforms when mouse leaves document.querySelector('.slider-container').addEventListener('mouseleave', function() { const activeSlide = document.querySelector('.slide.active'); const shapes = activeSlide.querySelectorAll('.slide-shape'); shapes.forEach(shape => { shape.style.transform = ''; }); const content = activeSlide.querySelector('.slide-content'); content.style.transform = ''; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D Perspective Architectural Showcase</title> <style> :root { --primary: #2c3e50; --secondary: #ecf0f1; --accent: #3498db; --accent2: #e74c3c; --shadow: rgba(0, 0, 0, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--secondary); color: var(--primary); overflow: hidden; height: 100vh; perspective: 1200px; display: flex; justify-content: center; align-items: center; } .container { width: 100%; max-width: 700px; height: 700px; position: relative; transform-style: preserve-3d; display: flex; justify-content: center; align-items: center; } .showcase { width: 100%; height: 100%; transform-style: preserve-3d; position: relative; } .building { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateY(0deg); transition: transform 0.8s ease-out; cursor: grab; } .face { position: absolute; transform-style: preserve-3d; backface-visibility: hidden; background-color: var(--secondary); border: 1px solid rgba(44, 62, 80, 0.2); box-shadow: 0 4px 15px var(--shadow); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; transition: all 0.3s ease; overflow: hidden; } .face:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .face::before { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(52, 152, 219, 0.05) 0%, rgba(231, 76, 60, 0.05) 100%); transform: translateZ(-1px); } .face.front { width: 300px; height: 400px; transform: translateZ(150px); } .face.back { width: 300px; height: 400px; transform: translateZ(-150px) rotateY(180deg); } .face.right { width: 300px; height: 400px; transform: translateX(150px) rotateY(90deg); } .face.left { width: 300px; height: 400px; transform: translateX(-150px) rotateY(-90deg); } .face.top { width: 300px; height: 300px; transform: translateY(-200px) rotateX(90deg); } .face.bottom { width: 300px; height: 300px; transform: translateY(200px) rotateX(-90deg); } .face img { width: 100%; height: 180px; object-fit: cover; border-radius: 4px; margin-bottom: 15px; box-shadow: 0 4px 8px var(--shadow); transition: transform 0.3s ease; } .face:hover img { transform: scale(1.05); } .face h2 { font-size: 1.5rem; margin-bottom: 10px; font-weight: 600; color: var(--primary); } .face p { font-size: 0.9rem; line-height: 1.5; color: var(--primary); text-align: center; margin-bottom: 15px; } .face .btn { padding: 8px 20px; background-color: var(--accent); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; transition: all 0.3s ease; text-decoration: none; display: inline-block; } .face .btn:hover { background-color: #2980b9; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; z-index: 10; } .control-btn { width: 40px; height: 40px; border-radius: 50%; background-color: var(--primary); color: var(--secondary); border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 8px var(--shadow); transition: all 0.3s ease; } .control-btn:hover { background-color: var(--accent); transform: translateY(-2px); } .grid-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(44, 62, 80, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(44, 62, 80, 0.05) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; z-index: -1; opacity: 0.6; } .info-panel { position: absolute; top: 20px; left: 20px; background-color: rgba(255, 255, 255, 0.9); padding: 15px; border-radius: 8px; box-shadow: 0 4px 15px var(--shadow); max-width: 200px; transform: translateZ(100px); z-index: 2; } .info-panel h3 { margin-bottom: 8px; font-size: 1rem; color: var(--accent); } .info-panel p { font-size: 0.8rem; line-height: 1.4; } .loading { position: absolute; width: 100%; height: 100%; background-color: var(--secondary); display: flex; justify-content: center; align-items: center; z-index: 100; transition: opacity 0.5s ease, visibility 0.5s ease; } .loading.hidden { opacity: 0; visibility: hidden; } .loading-circle { width: 60px; height: 60px; border: 5px solid rgba(52, 152, 219, 0.2); border-top: 5px solid var(--accent); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 700px) { .face.front, .face.back, .face.left, .face.right { width: 240px; height: 320px; } .face.front { transform: translateZ(120px); } .face.back { transform: translateZ(-120px) rotateY(180deg); } .face.right { transform: translateX(120px) rotateY(90deg); } .face.left { transform: translateX(-120px) rotateY(-90deg); } .face.top, .face.bottom { width: 240px; height: 240px; } .face.top { transform: translateY(-160px) rotateX(90deg); } .face.bottom { transform: translateY(160px) rotateX(-90deg); } .face h2 { font-size: 1.2rem; } .face p { font-size: 0.8rem; } .info-panel { max-width: 150px; } } </style> </head> <body> <div class="loading"> <div class="loading-circle"></div> </div> <div class="container"> <div class="grid-overlay"></div> <div class="info-panel"> <h3>Interactive 3D Showcase</h3> <p>Rotate the building to explore different architectural perspectives. Click on any face to zoom in.</p> </div> <div class="showcase"> <div class="building"> <div class="face front"> <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Modern Glass Facade"> <h2>Prismatic Tower</h2> <p>A revolutionary glass structure with parametric facade design, maximizing natural light while minimizing energy consumption.</p> <a href="#" class="btn view-project">Explore Design</a> </div> <div class="face back"> <img src="https://images.unsplash.com/photo-1481026469463-66327c86e544?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Interior Architecture"> <h2>Open Atrium</h2> <p>The central void creates a dramatic vertical connection between floors, featuring a suspended art installation that changes with daylight.</p> <a href="#" class="btn view-project">View Interior</a> </div> <div class="face left"> <img src="https://images.unsplash.com/photo-1487958449943-2429e8be8625?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Sustainable Elements"> <h2>Living Walls</h2> <p>Integrated vertical gardens purify air and regulate temperature, while collecting rainwater for sustainable building operations.</p> <a href="#" class="btn view-project">Sustainability Details</a> </div> <div class="face right"> <img src="https://images.unsplash.com/photo-1464146072230-91cabc968266?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Urban Context"> <h2>Urban Integration</h2> <p>The seamless transition from public plaza to private space creates a new urban ecosystem that engages with the surrounding cityscape.</p> <a href="#" class="btn view-project">Urban Analysis</a> </div> <div class="face top"> <img src="https://images.unsplash.com/photo-1516156008625-3a9d6067fab5?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Rooftop Design"> <h2>Sky Garden</h2> <p>The rooftop incorporates photovoltaic canopies alongside recreation spaces, creating an elevated microclimate with panoramic views.</p> <a href="#" class="btn view-project">Rooftop Features</a> </div> <div class="face bottom"> <img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Foundation Plan"> <h2>Foundation Systems</h2> <p>Advanced structural engineering allows the building to hover above ground level, creating a permeable public space beneath.</p> <a href="#" class="btn view-project">Engineering Details</a> </div> </div> </div> <div class="controls"> <button class="control-btn rotate-left">←</button> <button class="control-btn rotate-up">↑</button> <button class="control-btn rotate-down">↓</button> <button class="control-btn rotate-right">→</button> <button class="control-btn reset">⟳</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Hide loader after content is loaded setTimeout(function() { document.querySelector('.loading').classList.add('hidden'); }, 1500); const building = document.querySelector('.building'); const container = document.querySelector('.container'); const faces = document.querySelectorAll('.face'); let isDragging = false; let previousTouchX = 0; let previousTouchY = 0; let rotationX = 0; let rotationY = 0; let zoomedIn = false; let zoomedFace = null; // Button controls document.querySelector('.rotate-left').addEventListener('click', function() { if (!zoomedIn) { rotationY -= 45; updateRotation(); } }); document.querySelector('.rotate-right').addEventListener('click', function() { if (!zoomedIn) { rotationY += 45; updateRotation(); } }); document.querySelector('.rotate-up').addEventListener('click', function() { if (!zoomedIn) { rotationX += 45; if (rotationX > 90) rotationX = 90; updateRotation(); } }); document.querySelector('.rotate-down').addEventListener('click', function() { if (!zoomedIn) { rotationX -= 45; if (rotationX < -90) rotationX = -90; updateRotation(); } }); document.querySelector('.reset').addEventListener('click', function() { if (zoomedIn) { zoomOut(); } else { rotationX = 0; rotationY = 0; updateRotation(); // Add a little animation flair on reset building.style.transition = 'transform 1s cubic-bezier(0.34, 1.56, 0.64, 1)'; setTimeout(() => { building.style.transition = 'transform 0.3s ease-out'; }, 1000); } }); // Click on face to zoom in faces.forEach(face => { face.addEventListener('click', function(e) { if (e.target.classList.contains('btn') || e.target.classList.contains('view-project')) { e.preventDefault(); e.stopPropagation(); // Simulate button click effect e.target.style.transform = 'scale(0.95)'; setTimeout(() => { e.target.style.transform = ''; }, 150); return; } if (!zoomedIn) { zoomIn(this); } else if (zoomedFace === this) { zoomOut(); } }); }); // Mouse controls for drag rotation container.addEventListener('mousedown', function(e) { if (!zoomedIn) { isDragging = true; previousTouchX = e.clientX; previousTouchY = e.clientY; building.style.cursor = 'grabbing'; } }); document.addEventListener('mousemove', function(e) { if (isDragging) { const deltaX = e.clientX - previousTouchX; const deltaY = e.clientY - previousTouchY; rotationY += deltaX * 0.5; rotationX -= deltaY * 0.5; // Limit vertical rotation if (rotationX > 90) rotationX = 90; if (rotationX < -90) rotationX = -90; updateRotation(); previousTouchX = e.clientX; previousTouchY = e.clientY; } }); document.addEventListener('mouseup', function() { isDragging = false; building.style.cursor = 'grab'; }); // Touch controls for mobile container.addEventListener('touchstart', function(e) { if (!zoomedIn) { isDragging = true; previousTouchX = e.touches[0].clientX; previousTouchY = e.touches[0].clientY; } }); container.addEventListener('touchmove', function(e) { if (isDragging) { const deltaX = e.touches[0].clientX - previousTouchX; const deltaY = e.touches[0].clientY - previousTouchY; rotationY += deltaX * 0.5; rotationX -= deltaY * 0.5; // Limit vertical rotation if (rotationX > 90) rotationX = 90; if (rotationX < -90) rotationX = -90; updateRotation(); previousTouchX = e.touches[0].clientX; previousTouchY = e.touches[0].clientY; } e.preventDefault(); // Prevent page scrolling when rotating the building }); container.addEventListener('touchend', function() { isDragging = false; }); // Helper functions function updateRotation() { building.style.transform = `translate(-50%, -50%) rotateX(${rotationX}deg) rotateY(${rotationY}deg)`; } function zoomIn(face) { zoomedIn = true; zoomedFace = face; // Store the current rotation face.dataset.originalTransform = face.style.transform; // Get face type (front, back, etc.) const faceType = Array.from(face.classList).find(c => c !== 'face'); // Reset building rotation smoothly building.style.transition = 'transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)'; // Set specific rotation based on which face was clicked switch(faceType) { case 'front': rotationX = 0; rotationY = 0; break; case 'back': rotationX = 0; rotationY = 180; break; case 'left': rotationX = 0; rotationY = -90; break; case 'right': rotationX = 0; rotationY = 90; break; case 'top': rotationX = 90; rotationY = 0; break; case 'bottom': rotationX = -90; rotationY = 0; break; } updateRotation(); // Add a slight scale to the zoomed face setTimeout(() => { face.style.zIndex = '10'; face.style.transform = face.style.transform.replace('translateZ', 'scale(1.1) translateZ'); }, 400); // Hide other faces faces.forEach(f => { if (f !== face) { f.style.opacity = '0.2'; } }); } function zoomOut() { zoomedIn = false; if (zoomedFace) { // Restore original transform zoomedFace.style.zIndex = ''; zoomedFace.style.transform = zoomedFace.dataset.originalTransform; // Show all faces faces.forEach(face => { face.style.opacity = '1'; }); zoomedFace = null; } } // Auto rotation for idle state let autoRotateTimeout; let isAutoRotating = false; let autoRotateInterval; function startAutoRotate() { if (!isAutoRotating && !isDragging && !zoomedIn) { isAutoRotating = true; autoRotateInterval = setInterval(() => { rotationY += 0.3; updateRotation(); }, 30); } } function stopAutoRotate() { isAutoRotating = false; clearInterval(autoRotateInterval); resetAutoRotateTimer(); } function resetAutoRotateTimer() { clearTimeout(autoRotateTimeout); autoRotateTimeout = setTimeout(startAutoRotate, 5000); } container.addEventListener('mousedown', stopAutoRotate); container.addEventListener('touchstart', stopAutoRotate); container.addEventListener('mousemove', function() { if (isAutoRotating) stopAutoRotate(); }); // Start auto-rotation after a delay resetAutoRotateTimer(); // Initial automatic rotation to demonstrate the 3D effect let initialRotation = 0; const initialInterval = setInterval(() => { initialRotation += 1; rotationY = initialRotation; updateRotation(); if (initialRotation >= 360) { clearInterval(initialInterval); rotationY = 0; updateRotation(); resetAutoRotateTimer(); } }, 10); // Add subtle parallax effect to grid overlay document.addEventListener('mousemove', function(e) { const xAxis = (window.innerWidth / 2 - e.pageX) / 25; const yAxis = (window.innerHeight / 2 - e.pageY) / 25; document.querySelector('.grid-overlay').style.transform = `translate(${xAxis}px, ${yAxis}px)`; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TechSummit 2024 - Reveal</title> <style> /* Reset & Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } :root { --primary: #FF4D4D; --secondary: #4D6CFF; --accent: #FFD166; --dark: #2D2D40; --light: #F7F8FF; --gradient: linear-gradient(135deg, var(--primary), var(--secondary)); } body { background-color: var(--light); color: var(--dark); overflow-x: hidden; width: 100%; height: 100vh; position: relative; } .container { max-width: 700px; height: 700px; margin: 0 auto; padding: 1rem; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; } /* Hero Section */ .hero { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--gradient); border-radius: 12px; overflow: hidden; } .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none"/><path d="M0,0l100,100M20,0l80,100M40,0l60,100M60,0l40,100M80,0l20,100M0,20l80,80M0,40l60,60M0,60l40,40M0,80l20,20" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>'); opacity: 0.5; z-index: 1; } .hero-content { position: relative; z-index: 2; text-align: center; padding: 2rem; width: 100%; max-width: 600px; opacity: 0; transform: translateY(30px); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .hero-content.visible { opacity: 1; transform: translateY(0); } .hero-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--dark); transform-origin: bottom; z-index: 10; } /* Typography */ h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 1rem; color: white; line-height: 1.1; letter-spacing: -0.03em; position: relative; display: inline-block; } h1 span { color: var(--accent); position: relative; display: inline-block; } h1 span::after { content: ''; position: absolute; bottom: 8px; left: 0; width: 100%; height: 6px; background-color: var(--accent); opacity: 0.3; z-index: -1; } .subheader { font-size: 1.25rem; font-weight: 500; margin-bottom: 2rem; color: rgba(255, 255, 255, 0.9); max-width: 80%; margin-left: auto; margin-right: auto; } /* Event Details */ .event-details { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2.5rem; } .detail-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: rgba(255, 255, 255, 0.15); border-radius: 50px; backdrop-filter: blur(10px); transition: all 0.3s ease; opacity: 0; transform: translateY(20px); } .detail-item.visible { opacity: 1; transform: translateY(0); } .detail-item:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-5px); } .detail-item svg { width: 20px; height: 20px; fill: white; } .detail-item span { font-size: 0.95rem; font-weight: 600; color: white; letter-spacing: 0.02em; } /* CTA Button */ .cta-button { display: inline-block; padding: 1rem 2.5rem; background: var(--accent); color: var(--dark); font-weight: 700; font-size: 1.1rem; border-radius: 50px; border: none; cursor: pointer; text-decoration: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; z-index: 1; box-shadow: 0 8px 30px rgba(255, 209, 102, 0.3); opacity: 0; transform: scale(0.9); } .cta-button.visible { opacity: 1; transform: scale(1); } .cta-button:hover { background: #FFE066; transform: translateY(-3px); box-shadow: 0 12px 40px rgba(255, 209, 102, 0.4); } .cta-button::before { content: ''; position: absolute; top: 50%; left: 50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%); transform: translate(-50%, -50%) scale(0); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); z-index: -1; pointer-events: none; } .cta-button:hover::before { transform: translate(-50%, -50%) scale(1); } /* Floating Elements */ .floating-element { position: absolute; background: var(--accent); border-radius: 50%; filter: blur(20px); opacity: 0.15; z-index: 0; animation: float 15s infinite ease-in-out; } .element-1 { width: 150px; height: 150px; top: -30px; left: -30px; background: var(--primary); animation-delay: 0s; } .element-2 { width: 100px; height: 100px; bottom: 20%; right: 10%; background: var(--secondary); animation-delay: -5s; } .element-3 { width: 80px; height: 80px; bottom: -20px; left: 30%; background: var(--accent); animation-delay: -10s; } @keyframes float { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(10px, 10px); } 50% { transform: translate(5px, -5px); } 75% { transform: translate(-10px, 5px); } } /* Countdown Timer */ .countdown { display: flex; gap: 1rem; margin-top: 1.5rem; opacity: 0; transform: translateY(20px); transition: all 0.5s ease; } .countdown.visible { opacity: 1; transform: translateY(0); } .countdown-item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .countdown-value { font-size: 2rem; font-weight: 700; color: white; background: rgba(255, 255, 255, 0.15); border-radius: 8px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .countdown-value::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); } .countdown-label { font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.05em; } /* Responsive Styles */ @media (max-width: 600px) { h1 { font-size: 2.5rem; } .subheader { font-size: 1rem; max-width: 95%; } .event-details { gap: 0.75rem; } .detail-item { padding: 0.5rem 1rem; } .detail-item span { font-size: 0.85rem; } .countdown-value { font-size: 1.5rem; width: 50px; height: 50px; } .countdown-label { font-size: 0.65rem; } .cta-button { padding: 0.75rem 2rem; font-size: 1rem; } } @media (max-width: 400px) { h1 { font-size: 2rem; } .event-details { flex-direction: column; gap: 0.5rem; } } </style> </head> <body> <div class="container"> <div class="hero"> <div class="hero-bg"></div> <div class="floating-element element-1"></div> <div class="floating-element element-2"></div> <div class="floating-element element-3"></div> <div class="hero-content"> <h1>TechSummit <span>2024</span></h1> <p class="subheader">Where innovation meets opportunity: Join industry leaders in shaping the future of technology</p> <div class="event-details"> <div class="detail-item"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M19,4H17V3a1,1,0,0,0-2,0V4H9V3A1,1,0,0,0,7,3V4H5A3,3,0,0,0,2,7V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V7A3,3,0,0,0,19,4Zm1,15a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V10H20Zm0-11H4V7A1,1,0,0,1,5,6H7V7A1,1,0,0,0,9,7V6h6V7a1,1,0,0,0,2,0V6h2a1,1,0,0,1,1,1Z"/> </svg> <span>June 15-17, 2024</span> </div> <div class="detail-item"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20ZM16,11H13V8a1,1,0,0,0-2,0v4a1,1,0,0,0,1,1h4a1,1,0,0,0,0-2Z"/> </svg> <span>9:00 AM - 6:00 PM</span> </div> <div class="detail-item"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12,2A8,8,0,0,0,4,10c0,4.41,7,10.75,7.32,11.08a1,1,0,0,0,1.35,0C13,20.75,20,14.41,20,10A8,8,0,0,0,12,2Zm0,17.19C10.39,17.58,6,13.44,6,10a6,6,0,0,1,12,0C18,13.44,13.61,17.58,12,19.19ZM12,6a4,4,0,1,0,4,4A4,4,0,0,0,12,6Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,12Z"/> </svg> <span>Tech Center, San Francisco</span> </div> </div> <div class="countdown"> <div class="countdown-item"> <div class="countdown-value" id="days">00</div> <div class="countdown-label">Days</div> </div> <div class="countdown-item"> <div class="countdown-value" id="hours">00</div> <div class="countdown-label">Hours</div> </div> <div class="countdown-item"> <div class="countdown-value" id="minutes">00</div> <div class="countdown-label">Minutes</div> </div> <div class="countdown-item"> <div class="countdown-value" id="seconds">00</div> <div class="countdown-label">Seconds</div> </div> </div> <button class="cta-button">Register Now</button> </div> <div class="hero-mask"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Animation sequence on page load const heroMask = document.querySelector('.hero-mask'); const heroContent = document.querySelector('.hero-content'); const detailItems = document.querySelectorAll('.detail-item'); const ctaButton = document.querySelector('.cta-button'); const countdownEl = document.querySelector('.countdown'); // Reveal animation setTimeout(() => { heroMask.style.transition = 'transform 1.2s cubic-bezier(0.7, 0, 0.3, 1)'; heroMask.style.transform = 'scaleY(0)'; setTimeout(() => { heroContent.classList.add('visible'); // Staggered animation for detail items detailItems.forEach((item, index) => { setTimeout(() => { item.classList.add('visible'); }, 200 + (index * 150)); }); // Show countdown setTimeout(() => { countdownEl.classList.add('visible'); }, 800); // Show CTA setTimeout(() => { ctaButton.classList.add('visible'); }, 1100); }, 400); }, 300); // Countdown Timer const countdownDate = new Date('June 15, 2024 09:00:00').getTime(); function updateCountdown() { const now = new Date().getTime(); const distance = countdownDate - now; const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); document.getElementById('days').textContent = days.toString().padStart(2, '0'); document.getElementById('hours').textContent = hours.toString().padStart(2, '0'); document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0'); document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0'); if (distance < 0) { clearInterval(countdown); document.getElementById('days').textContent = '00'; document.getElementById('hours').textContent = '00'; document.getElementById('minutes').textContent = '00'; document.getElementById('seconds').textContent = '00'; } } updateCountdown(); const countdown = setInterval(updateCountdown, 1000); // Button hover effect ctaButton.addEventListener('mousemove', (e) => { const rect = e.target.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; ctaButton.style.setProperty('--x', `${x}px`); ctaButton.style.setProperty('--y', `${y}px`); }); // Prevent actual form submission ctaButton.addEventListener('click', (e) => { e.preventDefault(); // Animation when clicked ctaButton.style.transform = 'scale(0.98)'; setTimeout(() => { ctaButton.style.transform = ''; ctaButton.textContent = 'Registration Opening Soon!'; setTimeout(() => { ctaButton.textContent = 'Register Now'; }, 2000); }, 150); }); }); </script> </body> </html>
