Webleb - fragmentos de código

HTML CSS JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>AEGIS NEXUS // Global OS</title>
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Space+Grotesk:wght@300;400;500;600;700&family=Syncopate:wght@400;700&display=swap" rel="stylesheet">

/* ==========================================================================
           2. RESET & GLOBAL STYLES
           ========================================================================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            cursor: none;
        }

body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: var(--bg-base);
            color: var(--text-primary);
            font-family: 'Share Tech Mono', monospace;
            touch-action: none;
            -webkit-font-smoothing: antialiased;
        }

h1, h2, h3, .font-display {
            font-family: 'Space Grotesk', sans-serif;
            text-transform: uppercase;
        }

/* ==========================================================================
           3. BACKGROUND & OVERLAYS (Scanlines, Vignette)
           ========================================================================== */
        #canvas-container {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            z-index: 0;
            pointer-events: none;
        }

#vignette {
            position: fixed; inset: 0;
            background: radial-gradient(ellipse at center, transparent 20%, rgba(2,5,10,0.9) 100%);
            pointer-events: none; z-index: 1;
        }

#scanlines {
            position: fixed; inset: 0; pointer-events: none; z-index: 2;
            background: repeating-linear-gradient(
                to bottom,
                transparent, transparent 2px,
                rgba(0, 240, 255, 0.03) 3px, rgba(0, 0, 0, 0.2) 4px
            );
        }

/* Sci-Fi Corners */
        .corner {
            position: fixed; width: 30px; height: 30px; z-index: 100; pointer-events: none;
        }
        .corner::before, .corner::after {
            content: ''; position: absolute; background: var(--cyan-glow); box-shadow: var(--shadow-cyan);
        }
        .corner::before { width: 100%; height: 2px; top: 0; left: 0; }
        .corner::after  { width: 2px; height: 100%; top: 0; left: 0; }
        .c-tl { top: 20px; left: 20px; }
        .c-tr { top: 20px; right: 20px; transform: scaleX(-1); }
        .c-bl { bottom: 20px; left: 20px; transform: scaleY(-1); }
        .c-br { bottom: 20px; right: 20px; transform: scale(-1,-1); }

/* Custom Cursor */
        #cursor-dot {
            width: 4px; height: 4px; background: var(--cyan-glow);
            border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999;
            transform: translate(-50%, -50%); box-shadow: var(--shadow-cyan);
        }
        #cursor-ring {
            width: 30px; height: 30px; border: 1px solid rgba(0, 240, 255, 0.5);
            border-radius: 50%; position: fixed; pointer-events: none; z-index: 9998;
            transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s, border-color 0.2s;
        }
        body.hovering #cursor-ring {
            width: 50px; height: 50px; border-color: var(--orange-glow); border-style: dashed;
            animation: spin 4s linear infinite;
        }
        @keyframes spin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

/* ==========================================================================
           4. HUD HEADER & TELEMETRY
           ========================================================================== */
        .hud-header {
            position: fixed; top: 0; left: 0; right: 0; height: 80px;
            display: flex; justify-content: space-between; align-items: flex-start;
            padding: 30px 50px; z-index: 100; pointer-events: none;
        }

.hud-logo {
            font-family: 'Syncopate', sans-serif; font-size: 1.2rem; font-weight: 700;
            color: var(--text-primary); text-shadow: var(--shadow-cyan); letter-spacing: 0.1em;
            display: flex; align-items: center; gap: 10px;
        }
        .status-dot {
            width: 8px; height: 8px; background: var(--orange-glow); border-radius: 50%;
            box-shadow: var(--shadow-orange); animation: blink 1.5s infinite;
        }
        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

.telemetry-block {
            text-align: right; font-size: 0.65rem; color: var(--text-secondary); line-height: 1.6;
        }
        .telemetry-block span { display: block; }
        .tele-alert { color: var(--orange-glow); }

.progress-bar-container {
            position: fixed; bottom: 30px; left: 50px; right: 50px; height: 2px;
            background: rgba(0, 240, 255, 0.1); z-index: 100; pointer-events: none;
        }
        .progress-bar {
            height: 100%; width: 0%; background: var(--cyan-glow);
            box-shadow: var(--shadow-cyan); transition: width 0.1s linear;
        }

/* ==========================================================================
           5. LAYOUT & SCROLL ENGINE
           ========================================================================== */
        .ui-wrapper { position: fixed; inset: 0; z-index: 10; }
        .scroll-container {
            position: absolute; top: 0; left: 0; height: 100%; display: flex;
            align-items: center; padding: 0 10vw; gap: 15vw; will-change: transform;
        }
        .panel {
            flex-shrink: 0; width: 80vw; max-width: 1100px; height: 80vh;
            display: flex; flex-direction: column; justify-content: center; position: relative;
            perspective: 2000px;
        }

/* ==========================================================================
           6. GLASS CARDS & SCI-FI UI ELEMENTS
           ========================================================================== */
        .glass-card {
            background: var(--bg-surface);
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            box-shadow: inset 0 0 20px rgba(0,240,255,0.02), 0 20px 40px rgba(0,0,0,0.8);
            position: relative; overflow: hidden; transform-style: preserve-3d;
        }
        /* Tech Corners on Cards */
        .glass-card::after {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            border: 1px solid transparent; pointer-events: none;
            background: linear-gradient(to right, var(--cyan-glow) 2px, transparent 2px) 0 0,
                        linear-gradient(to bottom, var(--cyan-glow) 2px, transparent 2px) 0 0,
                        linear-gradient(to left, var(--orange-glow) 2px, transparent 2px) 100% 100%,
                        linear-gradient(to top, var(--orange-glow) 2px, transparent 2px) 100% 100%;
            background-repeat: no-repeat; background-size: 15px 15px; opacity: 0.5;
        }

.interactive-card { transition: transform 0.1s ease-out; will-change: transform; }
        .bracket-label {
            font-size: 0.75rem; letter-spacing: 0.3em; color: var(--text-secondary); margin-bottom: 20px;
        }
        .bracket-label::before { content: '/// '; color: var(--cyan-glow); }

/* ==========================================================================
           7. PANELS SPECIFICS
           ========================================================================== */
        
        /* PANEL 1: HERO */
        .hero-title {
            font-size: clamp(3rem, 7vw, 7rem); line-height: 0.9; font-weight: 700;
            text-shadow: 0 0 30px rgba(0, 240, 255, 0.3); margin-bottom: 20px;
        }
        .hero-title .highlight { color: var(--orange-glow); text-shadow: var(--shadow-orange); }
        .hero-data {
            font-size: 0.8rem; color: var(--text-tertiary); max-width: 400px; line-height: 1.8;
            border-left: 2px solid var(--orange-glow); padding-left: 15px; margin-bottom: 40px;
        }
        .cyber-btn {
            background: transparent; border: 1px solid var(--cyan-glow); color: var(--cyan-glow);
            padding: 15px 40px; font-family: 'Space Grotesk'; font-weight: 600; letter-spacing: 0.2em;
            position: relative; overflow: hidden; text-transform: uppercase; pointer-events: auto;
        }
        .cyber-btn::before {
            content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
            background: var(--cyan-glow); transition: left 0.3s ease; z-index: -1;
        }
        .cyber-btn:hover { color: var(--bg-base); box-shadow: var(--shadow-cyan); }
        .cyber-btn:hover::before { left: 0; }

/* PANEL 2: ATMOSPHERIC / GLOBAL DATA (Like Image 2) */
        .dashboard-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 30px; height: 60vh;
        }
        .dash-col { display: flex; flex-direction: column; gap: 30px; }
        .widget { flex: 1; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; }
        
        .widget-header { display: flex; justify-content: space-between; font-size: 0.7rem; border-bottom: 1px solid rgba(0,240,255,0.2); padding-bottom: 10px;}
        .widget-value { font-family: 'Space Grotesk'; font-size: 3.5rem; font-weight: 300; margin: 10px 0; }
        .widget-value span { font-size: 1rem; color: var(--text-secondary); }
        
        .radar-box { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; }
        .radar-circle {
            width: 150px; height: 150px; border-radius: 50%;
            border: 1px dashed var(--cyan-glow); position: relative;
            animation: spin 10s linear infinite;
        }
        .radar-circle::after {
            content: ''; position: absolute; top: 50%; left: 50%; width: 120px; height: 120px;
            border-radius: 50%; border: 2px solid rgba(255,85,0,0.5); transform: translate(-50%, -50%);
        }

/* PANEL 3: DATABASE / TASKS (Like Image 1 HUD) */
        .sys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .sys-node { padding: 20px; border-left: 3px solid var(--cyan-glow); background: rgba(0,240,255,0.03); }
        .sys-node.warning { border-color: var(--orange-glow); background: rgba(255,85,0,0.03); }
        .node-title { font-size: 0.9rem; margin-bottom: 10px; color: var(--text-primary); font-family: 'Space Grotesk'; }
        .node-bar-track { height: 4px; background: rgba(255,255,255,0.1); margin-top: 15px; }
        .node-bar-fill { height: 100%; background: var(--cyan-glow); }
        .sys-node.warning .node-bar-fill { background: var(--orange-glow); }

/* Mobile */
        @media (max-width: 768px) {
            .hud-header { padding: 20px; }
            .telemetry-block { display: none; }
            .hero-title { font-size: 3rem; }
            .panel { width: 90vw; height: 85vh; }
            .scroll-container { gap: 10vw; padding: 0 5vw; }
            .dashboard-grid { grid-template-columns: 1fr; height: auto; }
            .sys-grid { grid-template-columns: 1fr; }
        }
    </style>
    
    
    <script type="importmap">
    {
        "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
        }
    }
    </script>
</head>
<body>

<div id="canvas-container"></div>

<div id="vignette"></div>
    <div id="scanlines"></div>

<div class="corner c-tl"></div>
    <div class="corner c-tr"></div>
    <div class="corner c-bl"></div>
    <div class="corner c-br"></div>

<div id="cursor-dot"></div>
    <div id="cursor-ring"></div>

<header class="hud-header">
        <div class="hud-logo">
            <div class="status-dot"></div>
            AEGIS NEXUS
        </div>
        <div class="telemetry-block">
            <span>SYS.VER // 9.4.2a</span>
            <span>MEMBRANE // ACTIVE</span>
            <span>ORBITAL SYNC // <span class="tele-alert" id="sync-val">45.02%</span></span>
            <span style="margin-top: 10px; opacity: 0.5;">LAT: 34.0522 N | LON: 118.2437 W</span>
        </div>
    </header>

<div class="progress-bar-container">
        <div class="progress-bar" id="progress-bar"></div>
    </div>

<main class="ui-wrapper" id="scroll-wrapper">
        <div class="scroll-container" id="scroll-content">
            
            
            <section class="panel parallax-item" data-speed="0.2">
                <div class="bracket-label">CORE INITIALIZATION</div>
                <h1 class="hero-title">
                    GLOBAL <br>
                    <span class="highlight">OVERWATCH.</span>
                </h1>
                <div class="hero-data">
                    <p>Real-time atmospheric analysis and planetary network routing interface. Establishing secure handshake with low-orbit satellites.</p>
                    <p style="margin-top: 10px; opacity: 0.5; font-size: 0.7rem;">> WAITING FOR USER INPUT...</p>
                </div>
                <div>
                    <button class="cyber-btn interactive-card hover-target">ENGAGE UPLINK</button>
                </div>
            </section>

<section class="panel parallax-item" data-speed="0.1">
                <div class="bracket-label">TELEMETRY & CLIMATE</div>
                
                <div class="dashboard-grid">
                    <div class="dash-col">
                        <div class="glass-card widget interactive-card hover-target">
                            <div class="widget-header">
                                <span>ATMOSPHERIC PRESSURE</span>
                                <span class="tele-alert">WARNING</span>
                            </div>
                            <div class="widget-value">1024<span> hPa</span></div>
                            <div>
                                <div style="font-size:0.6rem; color:var(--text-tertiary); margin-bottom: 5px;">TREND: RISING FAST</div>
                                <svg width="100%" height="40" viewBox="0 0 200 40" preserveAspectRatio="none">
                                    <path d="M0,30 L40,25 L80,35 L120,10 L160,20 L200,5" fill="none" stroke="var(--orange-glow)" stroke-width="2"/>
                                    <circle cx="200" cy="5" r="3" fill="var(--orange-glow)"/>
                                </svg>
                            </div>
                        </div>
                        <div class="glass-card widget interactive-card hover-target">
                            <div class="widget-header">
                                <span>SURFACE TEMP (GLOBAL AVG)</span>
                                <span style="color:var(--cyan-glow)">NOMINAL</span>
                            </div>
                            <div class="widget-value">14.2<span> °C</span></div>
                            <div style="display:flex; gap:10px;">
                                <div style="flex:1; height:2px; background:var(--cyan-glow); opacity:0.3"></div>
                                <div style="flex:2; height:2px; background:var(--cyan-glow);"></div>
                                <div style="flex:1; height:2px; background:var(--cyan-glow); opacity:0.3"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="glass-card widget interactive-card hover-target" style="align-items: center; justify-content: center;">
                        <div class="widget-header" style="position:absolute; top:30px; left:30px; right:30px;">
                            <span>SPATIAL RADAR</span>
                            <span>NODE 07</span>
                        </div>
                        <div class="radar-box">
                            <div class="radar-circle"></div>
                            
                            <div style="position:absolute; text-align:center; font-family:'Space Grotesk'; color:var(--cyan-glow);">
                                <div style="font-size: 2rem;">V-2</div>
                                <div style="font-size: 0.6rem; letter-spacing:0.2em;">ACTIVE</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

<section class="panel parallax-item" data-speed="0.15">
                <div class="bracket-label">NETWORK PROTOCOLS</div>
                <h2 class="font-display" style="font-size: 2.5rem; margin-bottom: 30px; color:var(--cyan-glow); text-shadow: var(--shadow-cyan);">DATABANKS</h2>
                
                <div class="sys-grid">
                    <div class="glass-card sys-node interactive-card hover-target">
                        <div class="node-title">NODE.ALPHA</div>
                        <div style="font-size:0.6rem; color:var(--text-secondary); margin-bottom: 5px;">ENCRYPTION: RSA-4096</div>
                        <div style="font-size:1.5rem;">98.4%</div>
                        <div class="node-bar-track"><div class="node-bar-fill" style="width: 98.4%;"></div></div>
                    </div>
                    
                    <div class="glass-card sys-node warning interactive-card hover-target">
                        <div class="node-title" style="color:var(--orange-glow);">NODE.SIGMA [ERR]</div>
                        <div style="font-size:0.6rem; color:var(--orange-glow); margin-bottom: 5px;">PACKET LOSS DETECTED</div>
                        <div style="font-size:1.5rem; color:var(--orange-glow);">42.1%</div>
                        <div class="node-bar-track"><div class="node-bar-fill" style="width: 42.1%;"></div></div>
                    </div>

<div class="glass-card sys-node interactive-card hover-target">
                        <div class="node-title">NODE.OMEGA</div>
                        <div style="font-size:0.6rem; color:var(--text-secondary); margin-bottom: 5px;">AWAITING SYNC</div>
                        <div style="font-size:1.5rem;">75.0%</div>
                        <div class="node-bar-track"><div class="node-bar-fill" style="width: 75%;"></div></div>
                    </div>
                    
                    <div class="glass-card sys-node interactive-card hover-target">
                        <div class="node-title">SAT_COM_1</div>
                        <div style="font-size:0.6rem; color:var(--text-secondary); margin-bottom: 5px;">LATENCY: 12ms</div>
                        <div style="font-size:1.5rem;">100%</div>
                        <div class="node-bar-track"><div class="node-bar-fill" style="width: 100%;"></div></div>
                    </div>
                </div>
            </section>

<div style="width: 20vw; flex-shrink: 0;"></div>
        </div>
    </main>

/* ==========================================================================
           THREE.JS HOLOGRAPHIC GLOBE SETUP (Background)
           ========================================================================== */
        const canvasContainer = document.getElementById('canvas-container');
        const scene = new THREE.Scene();
        // Dark blue/black space background
        scene.background = new THREE.Color(0x02050a); 
        scene.fog = new THREE.FogExp2(0x02050a, 0.02);

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 0, 40);
        // Shift camera slightly right so globe is on the right side of screen
        camera.position.x = -15;

const renderer = new THREE.WebGLRenderer({ antialias: false, powerPreference: 'high-performance' });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        canvasContainer.appendChild(renderer.domElement);

// Post-processing Bloom
        const renderScene = new RenderPass(scene, camera);
        const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
        bloomPass.threshold = 0.2;
        bloomPass.strength = 1.8; // High neon glow
        bloomPass.radius = 0.5;

const composer = new EffectComposer(renderer);
        composer.addPass(renderScene);
        composer.addPass(bloomPass);

// Core Globe Group
        const globeGroup = new THREE.Group();
        scene.add(globeGroup);

// 1. Inner Dark Core
        const coreGeo = new THREE.IcosahedronGeometry(10, 3);
        const coreMat = new THREE.MeshBasicMaterial({ 
            color: 0x05101a, 
            wireframe: false,
            transparent: true,
            opacity: 0.8
        });
        const core = new THREE.Mesh(coreGeo, coreMat);
        globeGroup.add(core);

// 2. Outer Wireframe Globe (Cyan)
        const wireGeo = new THREE.IcosahedronGeometry(10.5, 2);
        const wireMat = new THREE.MeshBasicMaterial({
            color: 0x00f0ff,
            wireframe: true,
            transparent: true,
            opacity: 0.3
        });
        const wireGlobe = new THREE.Mesh(wireGeo, wireMat);
        globeGroup.add(wireGlobe);

// 3. Data Rings (Orange and Cyan)
        function createRing(radius, color, rotationX, rotationY) {
            const ringGeo = new THREE.TorusGeometry(radius, 0.05, 16, 100);
            const ringMat = new THREE.MeshBasicMaterial({ color: color, transparent: true, opacity: 0.6 });
            const ring = new THREE.Mesh(ringGeo, ringMat);
            ring.rotation.x = rotationX;
            ring.rotation.y = rotationY;
            globeGroup.add(ring);
            return ring;
        }
        const ring1 = createRing(14, 0x00f0ff, Math.PI/2, 0);
        const ring2 = createRing(16, 0xff5500, Math.PI/3, Math.PI/4);

// 4. Floating Particles (Data Nodes)
        const particlesGeo = new THREE.BufferGeometry();
        const particleCount = 600;
        const posArray = new Float32Array(particleCount * 3);
        for(let i = 0; i < particleCount * 3; i++) {
            // Spread particles in a wide area around the globe
            posArray[i] = (Math.random() - 0.5) * 60;
        }
        particlesGeo.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
        const particlesMat = new THREE.PointsMaterial({
            size: 0.2,
            color: 0x00f0ff,
            transparent: true,
            opacity: 0.5,
            blending: THREE.AdditiveBlending
        });
        const particleMesh = new THREE.Points(particlesGeo, particlesMat);
        scene.add(particleMesh);

/* ==========================================================================
           SCROLL ENGINE & UI INTERACTION (Adapted from Workspace OS)
           ========================================================================== */
        class SciFiEngine {
            constructor() {
                this.wrapper = document.getElementById('scroll-wrapper');
                this.content = document.getElementById('scroll-content');
                this.progressBar = document.getElementById('progress-bar');
                this.cursorDot = document.getElementById('cursor-dot');
                this.cursorRing = document.getElementById('cursor-ring');
                this.interactiveCards = document.querySelectorAll('.interactive-card');
                this.hoverTargets = document.querySelectorAll('.hover-target');
                this.syncVal = document.getElementById('sync-val');
                
                this.scroll = {
                    target: 0, current: 0, ease: 0.08, max: 0,
                    isDragging: false, startX: 0, dragTargetStart: 0
                };
                this.mouse = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
                
                this.init();
            }

init() {
                this.calcDimensions();
                this.setupEvents();
                this.render();
                
                // Randomly update telemetry numbers
                setInterval(() => {
                    this.syncVal.innerText = (Math.random() * (99.99 - 40.00) + 40.00).toFixed(2) + '%';
                }, 2000);
            }

calcDimensions() {
                this.scroll.max = this.content.scrollWidth - window.innerWidth;
                if (this.scroll.max < 0) this.scroll.max = 0;
            }

setupEvents() {
                window.addEventListener('resize', () => {
                    this.calcDimensions();
                    // Three.js resize
                    camera.aspect = window.innerWidth / window.innerHeight;
                    camera.updateProjectionMatrix();
                    renderer.setSize(window.innerWidth, window.innerHeight);
                    composer.setSize(window.innerWidth, window.innerHeight);
                });

window.addEventListener('wheel', (e) => {
                    let delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
                    this.scroll.target += delta * 1.5;
                    this.clampScroll();
                }, { passive: true });

// Touch/Drag Support
                this.wrapper.addEventListener('mousedown', e => this.onDown(e));
                window.addEventListener('mousemove', e => this.onMove(e));
                window.addEventListener('mouseup', () => this.onUp());
                this.wrapper.addEventListener('touchstart', e => this.onDown(e), { passive: true });
                window.addEventListener('touchmove', e => this.onMove(e), { passive: false });
                window.addEventListener('touchend', () => this.onUp());

// Hover Effects
                this.hoverTargets.forEach(t => {
                    t.addEventListener('mouseenter', () => document.body.classList.add('hovering'));
                    t.addEventListener('mouseleave', () => document.body.classList.remove('hovering'));
                });

// 3D Glass Card Tilting
                this.interactiveCards.forEach(card => {
                    card.addEventListener('mousemove', (e) => {
                        const rect = card.getBoundingClientRect();
                        const x = e.clientX - rect.left;
                        const y = e.clientY - rect.top;
                        const centerX = rect.width / 2;
                        const centerY = rect.height / 2;
                        const rotateX = ((y - centerY) / centerY) * -5;
                        const rotateY = ((x - centerX) / centerX) * 5;
                        
                        card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`;
                        card.style.borderColor = 'var(--cyan-glow)';
                        card.style.zIndex = 20;
                    });
                    card.addEventListener('mouseleave', () => {
                        card.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`;
                        card.style.borderColor = 'var(--glass-border)';
                        card.style.zIndex = 1;
                    });
                });
            }

onDown(e) {
                this.scroll.isDragging = true;
                this.scroll.startX = e.type.includes('mouse') ? e.pageX : e.touches[0].pageX;
                this.scroll.dragTargetStart = this.scroll.target;
            }
            onMove(e) {
                // Cursor logic
                if (e.type.includes('mouse')) {
                    this.mouse.x = e.clientX;
                    this.mouse.y = e.clientY;
                    this.cursorDot.style.left = `${this.mouse.x}px`;
                    this.cursorDot.style.top = `${this.mouse.y}px`;
                    setTimeout(() => {
                        this.cursorRing.style.left = `${this.mouse.x}px`;
                        this.cursorRing.style.top = `${this.mouse.y}px`;
                    }, 50);
                }

// Drag logic
                if (!this.scroll.isDragging) return;
                if(e.type.includes('touch')) e.preventDefault(); 
                const x = e.type.includes('mouse') ? e.pageX : e.touches[0].pageX;
                this.scroll.target = this.scroll.dragTargetStart + (this.scroll.startX - x) * 2;
                this.clampScroll();
            }
            onUp() { this.scroll.isDragging = false; }
            clampScroll() { this.scroll.target = Math.max(0, Math.min(this.scroll.target, this.scroll.max)); }

render() {
                // Lerp scroll
                this.scroll.current += (this.scroll.target - this.scroll.current) * this.scroll.ease;
                if (Math.abs(this.scroll.target - this.scroll.current) < 0.1) this.scroll.current = this.scroll.target;

// Move UI
                this.content.style.transform = `translate3d(${-this.scroll.current}px, 0, 0)`;

// Parallax specific UI items
                document.querySelectorAll('.parallax-item').forEach(item => {
                    const speed = parseFloat(item.getAttribute('data-speed')) || 0;
                    item.style.transform = `translate3d(${this.scroll.current * speed}px, 0, 0)`;
                });

// Update Progress Bar
                const progress = (this.scroll.current / this.scroll.max) * 100 || 0;
                this.progressBar.style.width = `${progress}%`;

/* === TIE THREE.JS TO SCROLL & TIME === */
                const time = performance.now() * 0.001;
                
                // Base rotation + Scroll rotation
                globeGroup.rotation.y = (time * 0.1) + (this.scroll.current * 0.002);
                globeGroup.rotation.x = Math.sin(time * 0.2) * 0.1;

ring1.rotation.z = time * 0.2;
                ring2.rotation.z = -time * 0.3;

particleMesh.rotation.y = time * 0.05;

// Make the globe move slightly to the left as we scroll right
                camera.position.x = -15 + (this.scroll.current * 0.005);

// Render Three.js
                composer.render();

requestAnimationFrame(this.render.bind(this));
            }
        }

// Initialize
        document.addEventListener('DOMContentLoaded', () => {
            new SciFiEngine();
        });
    </script>
</body>
</html>

Preview

Open Advanced Editor Full Screen