Quantum Interface Template Preview

HTML

CSS

:root {
            --primary: #00f3ff;
            --secondary: #ff00f7;
            --bg: #0a0a1a;
        }
        
        body {
            margin: 0;
            overflow: hidden;
            background: var(--bg);
            color: var(--primary);
            font-family: 'Orbitron', 'Arial', sans-serif;
            touch-action: none;
        }
        
        #canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        
        .content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            text-align: center;
            padding: 20px;
            pointer-events: none;
        }
        
        h1 {
            font-size: clamp(2rem, 5vw, 4rem);
            margin-bottom: 1.5rem;
            animation: pulse 2s infinite alternate;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            background-clip: text;
            color: white;
            font-weight: 800;
        }
        
        p {
            font-size: clamp(1rem, 2vw, 1.5rem);
            max-width: 800px;
            line-height: 1.6;
            font-weight: bolder;
            opacity: 0.9;
            color: white;
        }
        
        .ui-element {
            position: absolute;
            border: 1px solid rgba(0, 243, 255, 0.3);
            border-radius: 5px;
            pointer-events: auto;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            background: rgba(10, 10, 26, 0.5);
        }
        
        .ui-element:hover {
            border-color: var(--primary);
            box-shadow: 0 0 15px var(--primary);
        }
        
        @keyframes pulse {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(1.02); opacity: 1; }
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        
        @media (max-width: 768px) {
            h1 {
                font-size: 2.5rem;
            }
            p {
                font-size: 1.2rem;
            }
        }

JavaScript

document.addEventListener('DOMContentLoaded', () => {
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');
            
            // Set canvas to full window size
            function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
            
            window.addEventListener('resize', () => {
                resizeCanvas();
                initSystem();
            });
            
            resizeCanvas();
            
            // Advanced particle system
            let particles = [];
            const particleCount = Math.floor(window.innerWidth * window.innerHeight / 3000);
            const mouse = { x: null, y: null, radius: 150 };
            const touch = { x: null, y: null, radius: 200 };
            
            // Interaction handlers
            window.addEventListener('mousemove', (e) => {
                mouse.x = e.x;
                mouse.y = e.y;
            });
            
            window.addEventListener('mouseout', () => {
                mouse.x = undefined;
                mouse.y = undefined;
            });
            
            window.addEventListener('touchmove', (e) => {
                e.preventDefault();
                touch.x = e.touches[0].clientX;
                touch.y = e.touches[0].clientY;
            }, { passive: false });
            
            window.addEventListener('touchend', () => {
                touch.x = undefined;
                touch.y = undefined;
            });
            
            // 3D Particle class with z-axis
            class QuantumParticle {
                constructor() {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.z = Math.random() * 10;
                    this.size = Math.random() * 3 + 1;
                    this.baseX = this.x;
                    this.baseY = this.y;
                    this.baseZ = this.z;
                    this.speedX = Math.random() * 0.2 - 0.1;
                    this.speedY = Math.random() * 0.2 - 0.1;
                    this.speedZ = Math.random() * 0.1 - 0.05;
                    this.density = (Math.random() * 40) + 10;
                    this.hue = Math.random() * 60 + 180;
                    this.lightness = Math.random() * 30 + 50;
                    this.connections = [];
                    this.life = Math.random() * 100;
                    this.maxLife = 100 + Math.random() * 200;
                }
                
                draw() {
                    // Calculate perspective size
                    const perspective = this.z / 10;
                    const drawSize = this.size * (1 + perspective);
                    
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, drawSize, 0, Math.PI * 2);
                    ctx.closePath();
                    
                    // Glow effect
                    const gradient = ctx.createRadialGradient(
                        this.x, this.y, 0,
                        this.x, this.y, drawSize * 2
                    );
                    gradient.addColorStop(0, `hsla(${this.hue}, 100%, ${this.lightness}%, 1)`);
                    gradient.addColorStop(1, `hsla(${this.hue}, 100%, ${this.lightness}%, 0)`);
                    
                    ctx.fillStyle = gradient;
                    ctx.fill();
                }
                
                update() {
                    // Natural movement
                    this.x += this.speedX;
                    this.y += this.speedY;
                    this.z += this.speedZ;
                    
                    // Boundary checks with wrap-around
                    if (this.x < 0) this.x = canvas.width;
                    if (this.x > canvas.width) this.x = 0;
                    if (this.y < 0) this.y = canvas.height;
                    if (this.y > canvas.height) this.y = 0;
                    
                    // Z-axis boundaries
                    if (this.z < 0) {
                        this.z = 0;
                        this.speedZ *= -1;
                    }
                    if (this.z > 10) {
                        this.z = 10;
                        this.speedZ *= -1;
                    }
                    
                    // Mouse interaction
                    this.interactWithPoint(mouse);
                    
                    // Touch interaction
                    this.interactWithPoint(touch);
                    
                    // Life cycle
                    this.life++;
                    if (this.life > this.maxLife) {
                        this.reincarnate();
                    }
                }
                
                interactWithPoint(point) {
                    if (point.x && point.y) {
                        const dx = point.x - this.x;
                        const dy = point.y - this.y;
                        const distance = Math.sqrt(dx * dx + dy * dy);
                        const maxDistance = point.radius * (1 - this.z/20); // Z-axis affects interaction
                        
                        if (distance < maxDistance) {
                            const forceDirectionX = dx / distance;
                            const forceDirectionY = dy / distance;
                            let force = (maxDistance - distance) / maxDistance;
                            force = Math.pow(force, 2) * 2; // Quadratic falloff
                            
                            const directionX = forceDirectionX * force * this.density;
                            const directionY = forceDirectionY * force * this.density;
                            
                            this.x -= directionX;
                            this.y -= directionY;
                            this.z -= force * 2; // Push particles back in Z-space
                            
                            // Color change on interaction
                            this.hue = (this.hue + force * 10) % 360;
                            this.lightness = 70 + force * 20;
                        }
                    }
                }
                
                reincarnate() {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.z = Math.random() * 10;
                    this.life = 0;
                    this.maxLife = 100 + Math.random() * 200;
                    this.hue = Math.random() * 60 + 180;
                }
            }
            
            // Initialize the system
            function initSystem() {
                particles = [];
                for (let i = 0; i < particleCount; i++) {
                    particles.push(new QuantumParticle());
                }
            }
            
            // Advanced connection system with depth perception
            function createConnections() {
                particles.forEach(particle => {
                    particle.connections = [];
                });
                
                for (let a = 0; a < particles.length; a++) {
                    for (let b = a + 1; b < particles.length; b++) {
                        const dx = particles[a].x - particles[b].x;
                        const dy = particles[a].y - particles[b].y;
                        const dz = Math.abs(particles[a].z - particles[b].z);
                        const distance = Math.sqrt(dx * dx + dy * dy);
                        
                        // Connection probability based on distance and depth
                        const maxDistance = 100 + (20 - dz * 10);
                        if (distance < maxDistance) {
                            const opacity = 1 - (distance / maxDistance) - (dz / 15);
                            if (opacity > 0.1) {
                                particles[a].connections.push({
                                    target: b,
                                    strength: opacity
                                });
                                
                                // Draw connection
                                ctx.beginPath();
                                ctx.moveTo(particles[a].x, particles[a].y);
                                ctx.lineTo(particles[b].x, particles[b].y);
                                
                                // Line glow effect
                                const gradient = ctx.createLinearGradient(
                                    particles[a].x, particles[a].y,
                                    particles[b].x, particles[b].y
                                );
                                const midHue = (particles[a].hue + particles[b].hue) / 2;
                                gradient.addColorStop(0, `hsla(${particles[a].hue}, 100%, 70%, ${opacity * 0.7})`);
                                gradient.addColorStop(0.5, `hsla(${midHue}, 100%, 80%, ${opacity * 0.5})`);
                                gradient.addColorStop(1, `hsla(${particles[b].hue}, 100%, 70%, ${opacity * 0.7})`);
                                
                                ctx.strokeStyle = gradient;
                                ctx.lineWidth = opacity * 2;
                                ctx.stroke();
                            }
                        }
                    }
                }
            }
            
            // Data stream effect
            function renderDataStreams() {
                particles.forEach(particle => {
                    if (particle.connections.length > 0) {
                        const connection = particle.connections[Math.floor(Math.random() * particle.connections.length)];
                        if (connection.strength > 0.3 && Math.random() > 0.7) {
                            const target = particles[connection.target];
                            
                            // Create a data packet moving along the connection
                            const progress = (Date.now() % 2000) / 2000;
                            const x = particle.x + (target.x - particle.x) * progress;
                            const y = particle.y + (target.y - particle.y) * progress;
                            
                            // Draw data packet
                            ctx.beginPath();
                            ctx.arc(x, y, 2 * (1 + particle.z/10), 0, Math.PI * 2);
                            
                            const gradient = ctx.createRadialGradient(
                                x, y, 0,
                                x, y, 5
                            );
                            gradient.addColorStop(0, `hsla(${particle.hue}, 100%, 80%, 1)`);
                            gradient.addColorStop(1, `hsla(${particle.hue}, 100%, 80%, 0)`);
                            
                            ctx.fillStyle = gradient;
                            ctx.fill();
                        }
                    }
                });
            }
            
            // Main animation loop
            function animate() {
                // Clear with semi-transparent for motion trails
                ctx.fillStyle = 'rgba(10, 10, 26, 0.1)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // Update and draw particles
                particles.forEach(particle => {
                    particle.update();
                    particle.draw();
                });
                
                createConnections();
                renderDataStreams();
                
                requestAnimationFrame(animate);
            }
            
            initSystem();
            animate();
            
            // Add floating UI elements
            const uiElements = document.querySelectorAll('.ui-element');
            uiElements.forEach(el => {
                // Initial animation
                el.style.animation = `float ${3 + Math.random() * 4}s ease-in-out infinite`;
                el.style.animationDelay = `${Math.random() * 2}s`;
                
                // Make draggable
                let isDragging = false;
                let offsetX, offsetY;
                
                el.addEventListener('mousedown', (e) => {
                    isDragging = true;
                    offsetX = e.clientX - el.getBoundingClientRect().left;
                    offsetY = e.clientY - el.getBoundingClientRect().top;
                    el.style.animation = 'none';
                    el.style.zIndex = '10';
                });
                
                window.addEventListener('mousemove', (e) => {
                    if (isDragging) {
                        el.style.left = `${e.clientX - offsetX}px`;
                        el.style.top = `${e.clientY - offsetY}px`;
                    }
                });
                
                window.addEventListener('mouseup', () => {
                    if (isDragging) {
                        isDragging = false;
                        el.style.animation = `float ${3 + Math.random() * 4}s ease-in-out infinite`;
                        el.style.zIndex = '2';
                    }
                });
            });
        });

Output Preview