Webleb - UI Elements

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>Workspace OS - Cinematic Interface</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=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">

[data-theme="light"] {
            --bg-base: #f0f0f0;
            --bg-surface: rgba(255, 255, 255, 0.7);
            --bg-surface-hover: rgba(255, 255, 255, 0.9);
            --text-primary: #0a0a0a;
            --text-secondary: rgba(0, 0, 0, 0.6);
            --text-tertiary: rgba(0, 0, 0, 0.3);
            --accent: #111111;
            --border-light: rgba(0, 0, 0, 0.08);
            --border-strong: rgba(0, 0, 0, 0.2);
            --glow: rgba(0, 0, 0, 0.03);
            --shadow-soft: 0 20px 40px rgba(0, 0, 0, 0.05);
            --shadow-hard: 0 30px 60px rgba(0, 0, 0, 0.1);
            --mesh-color-1: #ffffff;
            --mesh-color-2: #e0e0e0;
            --glass-glare: rgba(255, 255, 255, 0.8);
        }

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

body, html {
            width: 100%;
            height: 100%;
            overflow: hidden; /* Hide native scroll */
            background-color: var(--bg-base);
            color: var(--text-primary);
            font-family: 'Inter', sans-serif;
            transition: background-color 0.8s ease, color 0.8s ease;
            touch-action: none; /* Prevent browser handling of gestures */
            -webkit-font-smoothing: antialiased;
        }

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

/* Custom Cursor */
        .cursor-dot {
            width: 8px;
            height: 8px;
            background: var(--text-primary);
            border-radius: 50%;
            position: fixed;
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 9999;
            transition: width 0.2s, height 0.2s, background 0.2s;
            mix-blend-mode: difference;
        }
        .cursor-ring {
            width: 40px;
            height: 40px;
            border: 1px solid var(--text-secondary);
            border-radius: 50%;
            position: fixed;
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 9998;
            transition: transform 0.1s ease-out, width 0.2s, height 0.2s;
        }
        .hovering .cursor-dot {
            width: 0;
            height: 0;
        }
        .hovering .cursor-ring {
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(2px);
            border-color: transparent;
        }

/* ==========================================================================
           3. BACKGROUND & LIGHTING
           ========================================================================== */
        .ambient-mesh {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            z-index: 0;
            pointer-events: none;
            background: radial-gradient(circle at 15% 50%, var(--mesh-color-1), transparent 50%),
                        radial-gradient(circle at 85% 30%, var(--mesh-color-2), transparent 50%);
            filter: blur(80px);
            opacity: 0.6;
            transition: background 1s ease;
        }
        
        /* Barcode pattern inspired by reference image */
        .pattern-overlay {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            background: repeating-linear-gradient(
                90deg,
                var(--border-light),
                var(--border-light) 1px,
                transparent 1px,
                transparent 40px
            );
            z-index: 1;
            pointer-events: none;
            opacity: 0.3;
        }

/* ==========================================================================
           4. LAYOUT & SCROLL ENGINE
           ========================================================================== */
        .ui-wrapper {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: 10;
        }

.scroll-container {
            position: absolute;
            top: 0; left: 0;
            height: 100%;
            display: flex;
            align-items: center;
            will-change: transform;
            padding: 0 10vw;
            gap: 15vw;
        }

.panel {
            flex-shrink: 0;
            width: 80vw;
            max-width: 1200px;
            height: 80vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            perspective: 2000px;
        }

@media (max-width: 768px) {
            .panel { width: 90vw; height: 85vh; }
            .scroll-container { gap: 10vw; padding: 0 5vw; }
        }

/* ==========================================================================
           5. UI NAVIGATION & HUD
           ========================================================================== */
        .hud-header {
            position: fixed;
            top: 0; left: 0; right: 0;
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 40px;
            z-index: 100;
            mix-blend-mode: difference;
            color: #fff;
        }

.logo {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 1.2rem;
            letter-spacing: 0.2em;
        }

.nav-controls {
            display: flex;
            align-items: center;
            gap: 30px;
        }

.nav-link {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            cursor: none;
            position: relative;
            opacity: 0.6;
            transition: opacity 0.3s;
        }
        .nav-link:hover, .nav-link.active { opacity: 1; }

.theme-toggle {
            width: 40px; height: 20px;
            border: 1px solid #fff;
            border-radius: 10px;
            position: relative;
            cursor: none;
        }
        .theme-toggle::after {
            content: '';
            position: absolute;
            top: 2px; left: 2px;
            width: 14px; height: 14px;
            background: #fff;
            border-radius: 50%;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="light"] .hud-header { mix-blend-mode: normal; color: #000; border-bottom: 1px solid var(--border-light); }
        [data-theme="light"] .theme-toggle { border-color: #000; }
        [data-theme="light"] .theme-toggle::after { background: #000; transform: translateX(20px); }

.progress-bar-container {
            position: fixed;
            bottom: 40px; left: 40px; right: 40px;
            height: 1px;
            background: var(--border-light);
            z-index: 100;
        }
        .progress-bar {
            height: 100%;
            width: 0%;
            background: var(--text-primary);
            transition: width 0.1s linear;
        }

/* ==========================================================================
           6. COMPONENTS & 3D CARDS
           ========================================================================== */
        .glass-card {
            background: var(--bg-surface);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid var(--border-light);
            border-radius: 2px; /* Brutalist/Sharp aesthetic from reference */
            box-shadow: var(--shadow-soft);
            position: relative;
            overflow: hidden;
            transform-style: preserve-3d;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

.glass-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(
                800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
                var(--glass-glare),
                transparent 40%
            );
            z-index: 1;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.5s;
        }
        .glass-card:hover::before { opacity: 1; }

.interactive-card {
            transition: transform 0.1s ease-out;
            will-change: transform;
        }

/* Bracket Labels from Reference */
        .bracket-label {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 0.75rem;
            letter-spacing: 0.2em;
            color: var(--text-secondary);
            margin-bottom: 20px;
            display: inline-block;
        }
        .bracket-label::before { content: '['; margin-right: 5px; }
        .bracket-label::after { content: ']'; margin-left: 5px; }

/* ==========================================================================
           7. SPECIFIC PANELS
           ========================================================================== */

/* PANEL 1: HERO */
        .hero-panel {
            align-items: flex-start;
        }
        .hero-title {
            font-size: clamp(4rem, 10vw, 9rem);
            line-height: 0.9;
            font-weight: 700;
            position: relative;
            z-index: 2;
            mix-blend-mode: overlay;
        }
        .hero-title span { display: block; }
        .hero-subtitle {
            margin-top: 30px;
            max-width: 400px;
            font-size: 1rem;
            color: var(--text-secondary);
            line-height: 1.6;
        }

/* 3D Floating Composition in Hero */
        .hero-graphic {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 600px;
            height: 500px;
            transform-style: preserve-3d;
            pointer-events: none;
        }
        .floating-sheet {
            position: absolute;
            width: 300px;
            height: 420px;
            background: linear-gradient(135deg, var(--bg-surface), transparent);
            border: 1px solid var(--border-strong);
            backdrop-filter: blur(10px);
            box-shadow: var(--shadow-hard);
        }
        .sheet-1 { transform: translateZ(-50px) rotateY(-15deg) rotateX(10deg) translateX(100px); opacity: 0.5; }
        .sheet-2 { transform: translateZ(50px) rotateY(-5deg) rotateX(5deg) translateX(50px); opacity: 0.8; }
        .sheet-3 { transform: translateZ(150px) rotateY(10deg) rotateX(-5deg); 
                   border-color: var(--text-primary); 
                   display: flex; align-items: center; justify-content: center; }
        
        .hero-btn {
            margin-top: 40px;
            padding: 15px 40px;
            background: var(--text-primary);
            color: var(--bg-base);
            border: none;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 0.8rem;
            letter-spacing: 0.1em;
            position: relative;
            overflow: hidden;
        }
        .hero-btn::after {
            content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.5s ease;
        }
        .hero-btn:hover::after { left: 100%; }

/* PANEL 2: DOCUMENT MANAGER */
        .docs-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            width: 100%;
            margin-top: 40px;
        }
        .doc-card {
            height: 300px;
            padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            z-index: 1;
        }
        .doc-icon {
            width: 40px; height: 40px;
            border-radius: 50%;
            border: 1px solid var(--border-strong);
            display: flex; align-items: center; justify-content: center;
        }
        .doc-icon svg { width: 16px; height: 16px; fill: var(--text-primary); }
        .doc-info h3 { font-size: 1.2rem; margin-bottom: 10px; }
        .doc-info p { font-size: 0.8rem; color: var(--text-secondary); }
        .doc-meta { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-tertiary); border-top: 1px solid var(--border-light); padding-top: 15px; }

/* PANEL 3: TASK BOARD */
        .kanban-board {
            display: flex;
            gap: 20px;
            height: 60vh;
            margin-top: 30px;
        }
        .kanban-col {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 15px;
            background: rgba(0,0,0,0.1);
            padding: 20px;
            border: 1px dashed var(--border-light);
        }
        .col-header { font-family: 'Space Grotesk'; font-size: 0.8rem; letter-spacing: 0.1em; border-bottom: 1px solid var(--border-light); padding-bottom: 10px; margin-bottom: 10px; }
        .task-card {
            padding: 20px;
            cursor: none;
            z-index: 2;
        }
        .task-tag { font-size: 0.6rem; padding: 3px 8px; border: 1px solid var(--border-strong); border-radius: 20px; display: inline-block; margin-bottom: 10px; }
        .task-title { font-size: 0.9rem; font-weight: 500; margin-bottom: 15px; line-height: 1.4; }
        .task-footer { display: flex; align-items: center; justify-content: space-between; }
        .avatar-group { display: flex; }
        .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--border-strong); border: 2px solid var(--bg-surface); margin-left: -8px; }
        .avatar:first-child { margin-left: 0; }

/* PANEL 4: ANALYTICS */
        .analytics-layout {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 40px;
            height: 50vh;
            margin-top: 40px;
        }
        .chart-container {
            position: relative;
            padding: 40px;
            display: flex;
            align-items: flex-end;
        }
        .chart-svg { width: 100%; height: 100%; overflow: visible; }
        .chart-line {
            fill: none;
            stroke: var(--text-primary);
            stroke-width: 2;
            stroke-linecap: round;
            filter: drop-shadow(0 10px 10px rgba(255,255,255,0.2));
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: drawLine 3s ease forwards 1s;
        }
        @keyframes drawLine { to { stroke-dashoffset: 0; } }
        .chart-area {
            fill: url(#chartGradient);
            opacity: 0.5;
        }
        .stat-cards { display: flex; flex-direction: column; gap: 20px; }
        .stat-card { padding: 30px; display: flex; flex-direction: column; justify-content: center; }
        .stat-value { font-size: 3rem; font-family: 'Space Grotesk'; font-weight: 700; margin-bottom: 5px; }
        .stat-label { font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; }

/* ==========================================================================
           8. ANIMATIONS & UTILITIES
           ========================================================================== */
        .reveal-text {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        }
        .reveal-text span {
            display: inline-block;
            transform: translateY(100%);
            opacity: 0;
            transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s;
        }
        .is-visible .reveal-text span {
            transform: translateY(0);
            opacity: 1;
        }

.stagger-1 { transition-delay: 0.1s; }
        .stagger-2 { transition-delay: 0.2s; }
        .stagger-3 { transition-delay: 0.3s; }

/* Mobile Adjustments */
        @media (max-width: 768px) {
            .hero-title { font-size: 3.5rem; }
            .hero-graphic { opacity: 0.3; right: -100px; transform: scale(0.6) translateY(-50%); }
            .docs-grid { grid-template-columns: 1fr; }
            .kanban-board { flex-direction: column; height: auto; }
            .analytics-layout { grid-template-columns: 1fr; height: auto; }
            .nav-controls { display: none; } /* Simplify header on mobile */
        }
    </style>
</head>
<body>

<div class="ambient-mesh"></div>
    <div class="pattern-overlay"></div>

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

<header class="hud-header">
        <div class="logo">SYNDICATE.</div>
        <nav class="nav-controls">
            <span class="nav-link active" data-target="0">Workspace</span>
            <span class="nav-link" data-target="1">Documents</span>
            <span class="nav-link" data-target="2">Tasks</span>
            <span class="nav-link" data-target="3">Analytics</span>
            <div class="theme-toggle" id="theme-toggle" role="button" aria-label="Toggle Theme"></div>
        </nav>
    </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 hero-panel parallax-item" data-speed="0.2">
                <div class="bracket-label">OPERATING SYSTEM</div>
                <h1 class="hero-title reveal-text">
                    <span>ELEVATE YOUR</span>
                    <span>WORKFLOW.</span>
                </h1>
                <p class="hero-subtitle reveal-text stagger-1">
                    <span>A cinematic, spatial interface designed for absolute focus. Organize, collaborate, and execute with fluid precision.</span>
                </p>
                <button class="hero-btn interactive-card stagger-2 hover-target">INITIALIZE MODULE</button>
                
                <div class="hero-graphic parallax-item" data-speed="-0.3">
                    <div class="floating-sheet sheet-1 glass-card"></div>
                    <div class="floating-sheet sheet-2 glass-card"></div>
                    <div class="floating-sheet sheet-3 glass-card interactive-card">
                        
                        <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                            <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
                            <polyline points="2 17 12 22 22 17"></polyline>
                            <polyline points="2 12 12 17 22 12"></polyline>
                        </svg>
                    </div>
                </div>
            </section>

<section class="panel parallax-item" data-speed="0.1">
                <div class="bracket-label">DOCUMENT MANAGER</div>
                <h2 class="font-display" style="font-size: 2rem; margin-bottom: 10px;">KNOWLEDGE BASE</h2>
                
                <div class="docs-grid">
                    
                    <div class="glass-card doc-card interactive-card hover-target">
                        <div class="doc-icon">
                            <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                        </div>
                        <div class="doc-info">
                            <h3>Q3 Strategy Deck</h3>
                            <p>Comprehensive overview of upcoming market expansions and product timelines.</p>
                        </div>
                        <div class="doc-meta">
                            <span>Edited 2h ago</span>
                            <span>PDF • 2.4 MB</span>
                        </div>
                    </div>
                    
                    
                    <div class="glass-card doc-card interactive-card hover-target" style="transform: translateY(20px);">
                        <div class="doc-icon">
                            <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                        </div>
                        <div class="doc-info">
                            <h3>Design System v2.0</h3>
                            <p>Core components, token definitions, and accessibility guidelines for engineering.</p>
                        </div>
                        <div class="doc-meta">
                            <span>Edited 5h ago</span>
                            <span>FIG • 18 MB</span>
                        </div>
                    </div>

<div class="glass-card doc-card interactive-card hover-target" style="transform: translateY(40px);">
                        <div class="doc-icon">
                            <svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                        </div>
                        <div class="doc-info">
                            <h3>Client Pitch: Nova</h3>
                            <p>Final presentation materials tailored for the executive board review.</p>
                        </div>
                        <div class="doc-meta">
                            <span>Edited 1d ago</span>
                            <span>PPTX • 5.1 MB</span>
                        </div>
                    </div>
                </div>
            </section>

<section class="panel parallax-item" data-speed="0.15">
                <div class="bracket-label">ACTIVE SPRINTS</div>
                <h2 class="font-display" style="font-size: 2rem;">TASK BOARD</h2>
                
                <div class="kanban-board">
                    
                    <div class="kanban-col">
                        <div class="col-header">BACKLOG [12]</div>
                        <div class="glass-card task-card interactive-card hover-target">
                            <div class="task-tag">ENGINEERING</div>
                            <div class="task-title">Refactor authentication flow to support OAuth 2.0</div>
                            <div class="task-footer">
                                <span style="font-size:0.7rem; color:var(--text-tertiary);">SYS-412</span>
                                <div class="avatar-group"><div class="avatar"></div></div>
                            </div>
                        </div>
                        <div class="glass-card task-card interactive-card hover-target">
                            <div class="task-tag" style="border-color:#ff5555; color:#ff5555;">URGENT</div>
                            <div class="task-title">Fix memory leak in webGL render pipeline</div>
                            <div class="task-footer">
                                <span style="font-size:0.7rem; color:var(--text-tertiary);">SYS-419</span>
                                <div class="avatar-group"><div class="avatar"></div><div class="avatar"></div></div>
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="kanban-col">
                        <div class="col-header">IN PROGRESS [3]</div>
                        <div class="glass-card task-card interactive-card hover-target">
                            <div class="task-tag">DESIGN</div>
                            <div class="task-title">Prototype cinematic scroll interactions for landing page</div>
                            <div class="task-footer">
                                <span style="font-size:0.7rem; color:var(--text-tertiary);">DES-092</span>
                                <div class="avatar-group"><div class="avatar"></div></div>
                            </div>
                        </div>
                    </div>

<div class="kanban-col">
                        <div class="col-header">REVIEW [5]</div>
                        <div class="glass-card task-card interactive-card hover-target" style="opacity: 0.7;">
                            <div class="task-tag">MARKETING</div>
                            <div class="task-title">Finalize copy for Q3 launch campaign</div>
                            <div class="task-footer">
                                <span style="font-size:0.7rem; color:var(--text-tertiary);">MKT-110</span>
                                <div class="avatar-group"><div class="avatar"></div><div class="avatar"></div><div class="avatar"></div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

<section class="panel parallax-item" data-speed="0.2">
                <div class="bracket-label">PERFORMANCE METRICS</div>
                <h2 class="font-display" style="font-size: 2rem;">ANALYTICS DASHBOARD</h2>
                
                <div class="analytics-layout">
                    <div class="glass-card chart-container interactive-card hover-target">
                        <svg class="chart-svg" viewBox="0 0 800 300" preserveAspectRatio="none">
                            <defs>
                                <linearGradient id="chartGradient" x1="0" x2="0" y1="0" y2="1">
                                    <stop offset="0%" stop-color="var(--text-primary)" stop-opacity="0.2"/>
                                    <stop offset="100%" stop-color="var(--text-primary)" stop-opacity="0"/>
                                </linearGradient>
                            </defs>
                            
                            <line x1="0" y1="75" x2="800" y2="75" stroke="var(--border-light)" stroke-width="1" stroke-dasharray="4"/>
                            <line x1="0" y1="150" x2="800" y2="150" stroke="var(--border-light)" stroke-width="1" stroke-dasharray="4"/>
                            <line x1="0" y1="225" x2="800" y2="225" stroke="var(--border-light)" stroke-width="1" stroke-dasharray="4"/>
                            
                            
                            <path class="chart-area" d="M0,250 C100,200 200,280 300,150 C400,50 500,180 600,100 C700,50 800,20 800,20 L800,300 L0,300 Z"></path>
                            
                            <path class="chart-line" d="M0,250 C100,200 200,280 300,150 C400,50 500,180 600,100 C700,50 800,20 800,20"></path>
                            
                            
                            <circle cx="300" cy="150" r="4" fill="var(--bg-base)" stroke="var(--text-primary)" stroke-width="2"/>
                            <circle cx="600" cy="100" r="4" fill="var(--bg-base)" stroke="var(--text-primary)" stroke-width="2"/>
                        </svg>
                    </div>
                    
                    <div class="stat-cards">
                        <div class="glass-card stat-card interactive-card hover-target">
                            <div class="stat-value">84.2%</div>
                            <div class="stat-label">Efficiency Delta</div>
                        </div>
                        <div class="glass-card stat-card interactive-card hover-target">
                            <div class="stat-value">+1.2k</div>
                            <div class="stat-label">Tasks Completed</div>
                        </div>
                    </div>
                </div>
            </section>
            
            
            <div style="width: 10vw; flex-shrink: 0;"></div>

</div>
    </main>

// Mouse State for Parallax/3D
                this.mouse = { x: window.innerWidth / 2, y: window.innerHeight / 2 };

this.init();
            }

init() {
                this.calcDimensions();
                this.setupEventListeners();
                this.setupIntersectionObserver();
                this.render();
            }

calcDimensions() {
                // Calculate max scroll based on content width vs window width
                const contentWidth = this.content.scrollWidth;
                this.scroll.max = contentWidth - window.innerWidth;
                if (this.scroll.max < 0) this.scroll.max = 0;
            }

setupEventListeners() {
                // Window Resize
                window.addEventListener('resize', () => {
                    this.calcDimensions();
                });

// Mouse Wheel to Horizontal Scroll
                window.addEventListener('wheel', (e) => {
                    // Combine deltaY (vertical) and deltaX (horizontal trackpad)
                    let delta = e.deltaY;
                    if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) delta = e.deltaX;
                    
                    this.scroll.target += delta * 1.5; // multiplier for speed
                    this.clampScroll();
                }, { passive: true });

// Touch & Drag Support
                this.wrapper.addEventListener('mousedown', this.onPointerDown.bind(this));
                window.addEventListener('mousemove', this.onPointerMove.bind(this));
                window.addEventListener('mouseup', this.onPointerUp.bind(this));

this.wrapper.addEventListener('touchstart', this.onPointerDown.bind(this), { passive: true });
                window.addEventListener('touchmove', this.onPointerMove.bind(this), { passive: false });
                window.addEventListener('touchend', this.onPointerUp.bind(this));

// Global Mouse Tracking for Cursor & Parallax
                window.addEventListener('mousemove', (e) => {
                    this.mouse.x = e.clientX;
                    this.mouse.y = e.clientY;

// Update custom cursor position
                    this.cursorDot.style.transform = `translate3d(${this.mouse.x}px, ${this.mouse.y}px, 0)`;
                    // Slight delay on ring
                    setTimeout(() => {
                        this.cursorRing.style.transform = `translate3d(${this.mouse.x}px, ${this.mouse.y}px, 0)`;
                    }, 50);
                });

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

// 3D Card Hover & Lighting Logic
                this.interactiveCards.forEach(card => {
                    card.addEventListener('mousemove', (e) => {
                        const rect = card.getBoundingClientRect();
                        const x = e.clientX - rect.left;
                        const y = e.clientY - rect.top;
                        
                        // Calculate rotation based on cursor position relative to center
                        const centerX = rect.width / 2;
                        const centerY = rect.height / 2;
                        const rotateX = ((y - centerY) / centerY) * -8; // Max 8 deg
                        const rotateY = ((x - centerX) / centerX) * 8;

// Apply transform
                        card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`;
                        card.style.zIndex = 10;
                        
                        // Update CSS vars for dynamic lighting glare
                        card.style.setProperty('--mouse-x', `${x}px`);
                        card.style.setProperty('--mouse-y', `${y}px`);
                    });

card.addEventListener('mouseleave', () => {
                        card.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`;
                        card.style.zIndex = 1;
                    });
                });

// Theme Toggle
                document.getElementById('theme-toggle').addEventListener('click', () => {
                    const currentTheme = document.documentElement.getAttribute('data-theme');
                    if (currentTheme === 'light') {
                        document.documentElement.removeAttribute('data-theme');
                    } else {
                        document.documentElement.setAttribute('data-theme', 'light');
                    }
                });

// Nav Links Click
                this.navLinks.forEach((link, index) => {
                    link.addEventListener('click', () => {
                        const panel = this.panels[index];
                        if(panel) {
                            // Calculate target position based on panel offset relative to content
                            const panelLeft = panel.getBoundingClientRect().left - this.content.getBoundingClientRect().left;
                            this.scroll.target = panelLeft - (window.innerWidth * 0.1); // 10vw padding
                            this.clampScroll();
                        }
                    });
                });
            }

// Drag Handlers
            onPointerDown(e) {
                this.scroll.isDragging = true;
                this.scroll.startX = e.type.includes('mouse') ? e.pageX : e.touches[0].pageX;
                this.scroll.dragTargetStart = this.scroll.target;
                document.body.style.cursor = 'grabbing';
            }

onPointerMove(e) {
                if (!this.scroll.isDragging) return;
                // e.preventDefault(); // Careful on mobile, but prevents default vertical scroll when swiping horizontally
                if(e.type.includes('touch')) e.preventDefault(); 
                
                const x = e.type.includes('mouse') ? e.pageX : e.touches[0].pageX;
                const dist = this.scroll.startX - x;
                this.scroll.target = this.scroll.dragTargetStart + dist * 2; // drag speed multiplier
                this.clampScroll();
            }

onPointerUp() {
                this.scroll.isDragging = false;
                document.body.style.cursor = 'none';
            }

clampScroll() {
                this.scroll.target = Math.max(0, Math.min(this.scroll.target, this.scroll.max));
            }

// Reveal Animation Observer
            setupIntersectionObserver() {
                const options = {
                    root: null, // viewport
                    rootMargin: '0px',
                    threshold: 0.2
                };

this.panels.forEach(panel => observer.observe(panel));
            }

// Main Render Loop (60fps)
            render() {
                // Linear Interpolation for Smooth Scrolling
                this.scroll.current += (this.scroll.target - this.scroll.current) * this.scroll.ease;

// Stop minute decimal calculations to prevent jiggle
                if (Math.abs(this.scroll.target - this.scroll.current) < 0.1) {
                    this.scroll.current = this.scroll.target;
                }

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

// Apply Parallax to specific items
                const parallaxItems = document.querySelectorAll('.parallax-item');
                parallaxItems.forEach(item => {
                    const speed = parseFloat(item.getAttribute('data-speed')) || 0;
                    // Calculate relative position based on screen center
                    const rect = item.getBoundingClientRect();
                    const screenCenter = window.innerWidth / 2;
                    const itemCenter = rect.left + rect.width / 2;
                    const distFromCenter = itemCenter - screenCenter;
                    
                    const x = distFromCenter * speed;
                    
                    // We don't overwrite the item's inherent transform, we apply via variable or complex string
                    // For simplicity, applying direct translation based on global scroll position instead
                    const absoluteX = this.scroll.current * speed;
                    item.style.transform = `translate3d(${absoluteX}px, 0, 0)`;
                });

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

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

// Initialize Engine when DOM is ready
        document.addEventListener('DOMContentLoaded', () => {
            // Trigger initial visibility for hero
            setTimeout(() => {
                document.querySelector('.hero-panel').classList.add('is-visible');
            }, 100);
            
            new AppEngine();
        });
    </script>
</body>
</html>

Preview

Open Advanced Editor Full Screen