Spaces:
Running
Running
No this is not what i wanted. please make the background one style, i want it to be small particles that becomes the shapes i asked you to make earlier.
b64a36c
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>What Sami Said - Coming Soon</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.dots.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| .crt::before { | |
| content: " "; | |
| display: block; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); | |
| z-index: 999; | |
| pointer-events: none; | |
| background-size: 100% 2px, 3px 100%; | |
| } | |
| .text-gradient { | |
| background: linear-gradient(90deg, #ffffff, #e5e7eb, #d1d5db); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| animation: gradient 8s ease infinite; | |
| background-size: 200% 200%; | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .floating { | |
| animation: floating 6s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .ascii-art { | |
| font-family: 'Courier New', monospace; | |
| font-size: 4px; | |
| line-height: 4px; | |
| color: #00ff00; | |
| white-space: pre; | |
| } | |
| </style> | |
| </head> | |
| <body class="crt bg-black text-white min-h-screen flex items-center justify-center"> | |
| <div id="vanta-background" class="fixed inset-0 z-0"></div> | |
| <div id="ascii-container" class="fixed inset-0 z-0 opacity-50"></div> | |
| <div class="relative z-10 container mx-auto px-6 py-12 max-w-6xl"> | |
| <div class="flex flex-col items-center justify-center text-center"> | |
| <!-- Animated Logo --> | |
| <div class="relative mb-12 floating"> | |
| <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <circle cx="60" cy="60" r="56" stroke="url(#paint0_linear)" stroke-width="8" stroke-dasharray="10 5"/> | |
| <path d="M40 40C40 40 60 80 80 40" stroke="url(#paint1_linear)" stroke-width="8" stroke-linecap="round"/> | |
| <defs> | |
| <linearGradient id="paint0_linear" x1="0" y1="0" x2="120" y2="120" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#4ADE80"/> | |
| <stop offset="0.5" stop-color="#3B82F6"/> | |
| <stop offset="1" stop-color="#A855F7"/> | |
| </linearGradient> | |
| <linearGradient id="paint1_linear" x1="40" y1="40" x2="80" y2="40" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#4ADE80"/> | |
| <stop offset="0.5" stop-color="#3B82F6"/> | |
| <stop offset="1" stop-color="#A855F7"/> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 text-gradient"> | |
| WHAT <span class="text-white">SAMI</span> SAID | |
| </h1> | |
| <p class="text-xl md:text-2xl text-white max-w-2xl mb-12"> | |
| The vocal vortex is coming soon. Experience the sound of transformation. | |
| </p> | |
| <!-- Interactive Soundwave --> | |
| <div class="relative w-full max-w-3xl mb-16"> | |
| <div class="relative h-32 overflow-hidden rounded-xl bg-black/50 border border-gray-800 backdrop-blur-sm"> | |
| <canvas id="soundwave" class="w-full h-full"></canvas> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <button id="playBtn" class="bg-white/10 hover:bg-white/20 backdrop-blur-md rounded-full p-4 transition-all"> | |
| <i data-feather="play" class="text-white w-8 h-8"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between text-gray-400 text-sm"> | |
| <span>Listen to my voice</span> | |
| <span id="timeDisplay">0:00</span> | |
| </div> | |
| </div> | |
| <!-- Social Links --> | |
| <div class="flex space-x-6 mb-12"> | |
| <a href="#" class="bg-white/5 hover:bg-white/10 rounded-full p-4 transition-all"> | |
| <i data-feather="twitter" class="text-white w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="bg-white/5 hover:bg-white/10 rounded-full p-4 transition-all"> | |
| <i data-feather="linkedin" class="text-white w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="bg-white/5 hover:bg-white/10 rounded-full p-4 transition-all"> | |
| <i data-feather="instagram" class="text-white w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="bg-white/5 hover:bg-white/10 rounded-full p-4 transition-all"> | |
| <i data-feather="mail" class="text-white w-6 h-6"></i> | |
| </a> | |
| </div> | |
| <!-- Countdown --> | |
| <div class="grid grid-cols-4 gap-4 max-w-md mb-12"> | |
| <div class="bg-white/5 rounded-lg p-4 text-center"> | |
| <div id="days" class="text-3xl font-bold text-gradient">--</div> | |
| <div class="text-gray-400 text-sm">DAYS</div> | |
| </div> | |
| <div class="bg-white/5 rounded-lg p-4 text-center"> | |
| <div id="hours" class="text-3xl font-bold text-gradient">--</div> | |
| <div class="text-gray-400 text-sm">HOURS</div> | |
| </div> | |
| <div class="bg-white/5 rounded-lg p-4 text-center"> | |
| <div id="minutes" class="text-3xl font-bold text-gradient">--</div> | |
| <div class="text-gray-400 text-sm">MINUTES</div> | |
| </div> | |
| <div class="bg-white/5 rounded-lg p-4 text-center"> | |
| <div id="seconds" class="text-3xl font-bold text-gradient">--</div> | |
| <div class="text-gray-400 text-sm">SECONDS</div> | |
| </div> | |
| </div> | |
| <div class="relative group"> | |
| <div class="absolute -inset-1 bg-gradient-to-r from-green-400 to-blue-600 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-200 animate-tilt"></div> | |
| <button class="relative px-8 py-4 bg-black rounded-lg leading-none flex items-center"> | |
| <span class="font-bold text-white">Join the waiting list</span> | |
| <i data-feather="arrow-right" class="ml-2 text-white w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating particles --> | |
| <div id="particles-js" class="fixed inset-0 z-0"></div> | |
| <script> | |
| // ASCII art patterns | |
| const asciiPatterns = [ | |
| // Building blueprint | |
| `+----------------+ | |
| | | | |
| | FLOOR 1 | | |
| | | | |
| +-------+--------+ | |
| | | |
| | | |
| +-------+--------+ | |
| | | | |
| | FLOOR 2 | | |
| | | | |
| +----------------+`, | |
| // Helicopter | |
| ` .-^-. | |
| /_/_\\_\\ | |
| \\_____/ | |
| | | | |
| /|\\ /|\\ | |
| /_|_|_|_\\`, | |
| // Cityscape | |
| ` | | | | | | | |
| /| |\\ /| |\\ /| |\\ | |
| /_|_|_|_|_|_|_|_|_\\`, | |
| // Circuit board | |
| `+--[ ]--+--[ ]--+ | |
| | | | | |
| +--[ ]--+--[ ]--+ | |
| | | | | |
| +--[ ]--+--[ ]--+` | |
| ]; | |
| // Initialize dynamic ASCII background | |
| const asciiContainer = document.getElementById('ascii-container'); | |
| let currentPattern = 0; | |
| function updateAsciiArt() { | |
| asciiContainer.innerHTML = `<div class="ascii-art">${asciiPatterns[currentPattern]}</div>`; | |
| currentPattern = (currentPattern + 1) % asciiPatterns.length; | |
| } | |
| // Initialize dots background with shape morphing | |
| window.vantaEffect = VANTA.DOTS({ | |
| el: "#vanta-background", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| color: 0x3b82f6, | |
| color2: 0xa855f7, | |
| size: 2.00, | |
| spacing: 40.00, | |
| backgroundAlpha: 0 | |
| }); | |
| // Shape definitions for particles to form | |
| const shapes = { | |
| building: [ | |
| { x: 0.3, y: 0.3 }, { x: 0.7, y: 0.3 }, { x: 0.7, y: 0.7 }, { x: 0.3, y: 0.7 }, | |
| { x: 0.5, y: 0.7 }, { x: 0.5, y: 0.9 }, | |
| { x: 0.3, y: 0.3 }, { x: 0.3, y: 0.7 }, | |
| { x: 0.7, y: 0.3 }, { x: 0.7, y: 0.7 }, | |
| { x: 0.4, y: 0.4 }, { x: 0.6, y: 0.4 }, { x: 0.6, y: 0.6 }, { x: 0.4, y: 0.6 }, { x: 0.4, y: 0.4 }, | |
| { x: 0.4, y: 0.6 }, { x: 0.6, y: 0.6 } | |
| ], | |
| helicopter: [ | |
| { x: 0.5, y: 0.3 }, | |
| { x: 0.4, y: 0.4 }, { x: 0.6, y: 0.4 }, | |
| { x: 0.35, y: 0.5 }, { x: 0.65, y: 0.5 }, | |
| { x: 0.4, y: 0.6 }, { x: 0.6, y: 0.6 }, | |
| { x: 0.3, y: 0.7 }, { x: 0.7, y: 0.7 }, | |
| { x: 0.45, y: 0.8 }, { x: 0.55, y: 0.8 } | |
| ], | |
| cityscape: [ | |
| { x: 0.1, y: 0.4 }, { x: 0.2, y: 0.3 }, { x: 0.3, y: 0.5 }, { x: 0.4, y: 0.4 }, { x: 0.5, y: 0.3 }, { x: 0.6, y: 0.4 }, { x: 0.7, y: 0.3 }, { x: 0.8, y: 0.4 }, { x: 0.9, y: 0.3 }, | |
| { x: 0.1, y: 0.7 }, { x: 0.2, y: 0.6 }, { x: 0.3, y: 0.7 }, { x: 0.4, y: 0.6 }, { x: 0.5, y: 0.7 }, { x: 0.6, y: 0.6 }, { x: 0.7, y: 0.7 }, { x: 0.8, y: 0.6 }, { x: 0.9, y: 0.7 }, | |
| { x: 0.15, y: 0.4 }, { x: 0.15, y: 0.7 }, | |
| { x: 0.25, y: 0.3 }, { x: 0.25, y: 0.6 }, | |
| { x: 0.35, y: 0.5 }, { x: 0.35, y: 0.7 }, | |
| { x: 0.45, y: 0.3 }, { x: 0.45, y: 0.7 }, | |
| { x: 0.55, y: 0.3 }, { x: 0.55, y: 0.7 }, | |
| { x: 0.65, y: 0.3 }, { x: 0.65, y: 0.7 }, | |
| { x: 0.75, y: 0.3 }, { x: 0.75, y: 0.7 }, | |
| { x: 0.85, y: 0.3 }, { x: 0.85, y: 0.7 } | |
| ], | |
| circuit: [ | |
| { x: 0.2, y: 0.2 }, { x: 0.8, y: 0.2 }, { x: 0.8, y: 0.8 }, { x: 0.2, y: 0.8 }, { x: 0.2, y: 0.2 }, | |
| { x: 0.4, y: 0.4 }, { x: 0.6, y: 4 }, { x: 0.6, y: 0.6 }, { x: 0.4, y: 0.6 }, { x: 0.4, y: 0.4 }, | |
| { x: 0.5, y: 0.2 }, { x: 0.5, y: 0.8 }, | |
| { x: 0.2, y: 0.5 }, { x: 0.8, y: 0.5 }, | |
| { x: 0.3, y: 0.3 }, { x: 0.7, y: 0.3 }, { x: 0.7, y: 0.7 }, { x: 0.3, y: 0.7 }, | |
| { x: 0.2, y: 0.2 }, { x: 0.8, y: 0.2 }, { x: 0.8, y: 0.8 }, { x: 0.2, y: 0.8 } | |
| ] | |
| }; | |
| let currentShape = 'building'; | |
| let shapeIndex = 0; | |
| const shapeNames = Object.keys(shapes); | |
| function morphShape() { | |
| currentShape = shapeNames[shapeIndex]; | |
| shapeIndex = (shapeIndex + 1) % shapeNames.length; | |
| // Update the dots positions to form the new shape | |
| if (window.vantaEffect && window.vantaEffect.setOptions) { | |
| const targetPositions = shapes[currentShape]; | |
| window.vantaEffect.setOptions({ | |
| size: 2.5, | |
| spacing: 35, | |
| showLines: true, | |
| points: targetPositions | |
| }); | |
| } | |
| } | |
| // Change shape every 6 seconds | |
| setInterval(morphShape, 6000); | |
| // Initialize countdown to January 1, 2026 at 12:00 | |
| const countdownDate = new Date('January 1, 2026 12:00:00'); | |
| 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; | |
| document.getElementById('hours').textContent = hours; | |
| document.getElementById('minutes').textContent = minutes; | |
| document.getElementById('seconds').textContent = seconds; | |
| } | |
| setInterval(updateCountdown, 1000); | |
| updateCountdown(); | |
| // Enhanced soundscape visualization | |
| const canvas = document.getElementById('soundwave'); | |
| const ctx = canvas.getContext('2d'); | |
| canvas.width = canvas.offsetWidth; | |
| canvas.height = canvas.offsetHeight; | |
| let audioContext; | |
| let isPlaying = false; | |
| let animationId; | |
| function createAmbientSoundscape() { | |
| audioContext = new (window.AudioContext || window.webkitAudioContext)(); | |
| // Create multiple oscillators for richer sound | |
| const oscillators = []; | |
| const frequencies = [220, 330, 440, 550, 660]; // Harmonic series | |
| frequencies.forEach((freq, index) => { | |
| const oscillator = audioContext.createOscillator(); | |
| oscillator.type = 'sine'; | |
| oscillator.frequency.setValueAtTime(freq, audioContext.currentTime); | |
| const gainNode = audioContext.createGain(); | |
| gainNode.gain.value = 0.02; | |
| // Add slight detuning for chorus effect | |
| const detune = (index - 2) * 5; | |
| oscillator.detune.setValueAtTime(detune, audioContext.currentTime); | |
| oscillator.connect(gainNode); | |
| gainNode.connect(audioContext.destination); | |
| oscillators.push({ oscillator, gainNode }); | |
| }); | |
| // Start all oscillators | |
| oscillators.forEach(({ oscillator }) => oscillator.start()); | |
| drawSoundscape(); | |
| return oscillators; | |
| } | |
| function drawSoundscape() { | |
| if (!isPlaying) return; | |
| animationId = requestAnimationFrame(drawSoundscape); | |
| // Clear canvas with semi-transparent background | |
| ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| // Draw dynamic geometric patterns | |
| const time = Date.now() * 0.001; | |
| // Draw multiple layers of patterns | |
| for (let layer = 0; layer < 3; layer++) { | |
| ctx.strokeStyle = `rgba(255, 255, 255, ${0.3 - layer * 0.1})`; | |
| ctx.lineWidth = 1 + layer; | |
| ctx.beginPath(); | |
| for (let i = 0; i < 50; i++) { | |
| const x = (canvas.width / 50) * i; | |
| const y = canvas.height / 2 + Math.sin(time * 2 + i * 0.2 + layer) * 30; | |
| const radius = 10 + Math.sin(time * 3 + i * 0.1 + layer) * 8; | |
| ctx.moveTo(x, y - radius); | |
| ctx.arc(x, y, radius, 0, Math.PI * 2); | |
| } | |
| ctx.stroke(); | |
| } | |
| } | |
| document.getElementById('playBtn').addEventListener('click', function() { | |
| if (!isPlaying) { | |
| createAmbientSoundscape(); | |
| isPlaying = true; | |
| this.innerHTML = '<i data-feather="pause" class="text-white w-8 h-8"></i>'; | |
| feather.replace(); | |
| } else { | |
| if (audioContext) { | |
| audioContext.close(); | |
| audioContext = null; | |
| } | |
| if (animationId) { | |
| cancelAnimationFrame(animationId); | |
| } | |
| isPlaying = false; | |
| this.innerHTML = '<i data-feather="play" class="text-white w-8 h-8"></i>'; | |
| feather.replace(); | |
| } | |
| }); | |
| // Handle window resize | |
| window.addEventListener('resize', function() { | |
| canvas.width = canvas.offsetWidth; | |
| canvas.height = canvas.offsetHeight; | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |