Hugging Face's logo

Spaces:
BlackSpire
/
anycoder-0252e643
Running

App Files Community
anycoder-0252e643 / index.html
BlackSpire's picture
BlackSpire
Upload folder using huggingface_hub
5287769 verified
Raw
History Blame Contribute Delete
35 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>NOVA | Spatial Computing Interface</title>
<!-- Tailwind CSS -->
 <script src="https://cdn.tailwindcss.com"></script>
<!-- Three.js -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!-- GSAP -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<!-- Lenis Smooth Scroll -->
 <script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.29/bundled/lenis.min.js"></script>
<!-- Fonts -->
 <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&family=Syncopate:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
 :root {
 --neon-blue: #00f3ff;
 --neon-purple: #bc13fe;
 --neon-pink: #ff006e;
 --glass: rgba(255, 255, 255, 0.03);
 --glass-border: rgba(255, 255, 255, 0.08);
 --glass-highlight: rgba(255, 255, 255, 0.15);
 }
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 body {
 font-family: 'Space Grotesk', sans-serif;
 background-color: #020202;
 color: #ffffff;
 overflow-x: hidden;
 cursor: none;
 }
 h1,
 h2,
 h3,
 .font-syncopate {
 font-family: 'Syncopate', sans-serif;
 }
 .font-mono {
 font-family: 'JetBrains Mono', monospace;
 }
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
 width: 4px;
 }
 ::-webkit-scrollbar-track {
 background: #000;
 }
 ::-webkit-scrollbar-thumb {
 background: linear-gradient(180deg, var(--neon-blue), var(--neon-purple));
 border-radius: 2px;
 }
 /* Custom Cursor */
 .cursor-dot,
 .cursor-outline,
 .cursor-trail {
 position: fixed;
 top: 0;
 left: 0;
 transform: translate(-50%, -50%);
 border-radius: 50%;
 z-index: 9999;
 pointer-events: none;
 mix-blend-mode: screen;
 }
 .cursor-dot {
 width: 6px;
 height: 6px;
 background: var(--neon-blue);
 box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
 }
 .cursor-outline {
 width: 44px;
 height: 44px;
 border: 1.5px solid rgba(0, 243, 255, 0.4);
 transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
 background-color 0.3s ease,
 border-color 0.3s ease;
 }
 .cursor-trail {
 width: 200px;
 height: 200px;
 background: radial-gradient(circle, rgba(0, 243, 255, 0.03) 0%, transparent 70%);
 transition: transform 0.1s ease-out;
 }
 /* Interactive Cursor States */
 body.hovering .cursor-outline {
 width: 70px;
 height: 70px;
 background: radial-gradient(circle, rgba(0, 243, 255, 0.08) 0%, transparent 70%);
 border-color: var(--neon-blue);
 backdrop-filter: blur(2px);
 }
 body.hovering .cursor-dot {
 background: var(--neon-purple);
 box-shadow: 0 0 15px var(--neon-purple), 0 0 30px var(--neon-purple);
 }
 body.dragging .cursor-outline {
 width: 90px;
 height: 90px;
 border-color: var(--neon-pink);
 border-style: dashed;
 animation: spin 4s linear infinite;
 }
 @keyframes spin {
 to { transform: translate(-50%, -50%) rotate(360deg); }
 }
 /* Advanced Glassmorphism */
 .glass-panel {
 background: var(--glass);
 backdrop-filter: blur(16px) saturate(180%);
 -webkit-backdrop-filter: blur(16px) saturate(180%);
 border: 1px solid var(--glass-border);
 position: relative;
 overflow: hidden;
 }
 .glass-panel::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
 transition: left 0.5s ease;
 }
 .glass-panel:hover::before {
 left: 100%;
 }
 .glass-panel-strong {
 background: rgba(8, 8, 8, 0.6);
 backdrop-filter: blur(24px) saturate(200%);
 -webkit-backdrop-filter: blur(24px) saturate(200%);
 border: 1px solid rgba(255, 255, 255, 0.12);
 box-shadow:
0 8px 32px 0 rgba(0, 0, 0, 0.4),
 inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 /* Holographic Grid */
 .holo-grid {
 background-size: 60px 60px;
 background-image:
 linear-gradient(to right, rgba(0, 243, 255, 0.03) 1px, transparent 1px),
 linear-gradient(to bottom, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
 mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
 -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
 }
 /* Animated Grid Lines */
 .grid-lines {
 position: absolute;
 inset: 0;
 background:
repeating-linear-gradient(
 0deg,
 transparent,
 transparent 19px,
 rgba(0, 243, 255, 0.03) 20px
 );
 animation: scanline 8s linear infinite;
 pointer-events: none;
 }
 @keyframes scanline {
 0% { transform: translateY(0); }
 100% { transform: translateY(20px); }
 }
 /* Slider Input Styling */
 .holo-slider {
 -webkit-appearance: none;
 width: 100%;
 height: 3px;
 background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(0,243,255,0.3));
 border-radius: 2px;
 outline: none;
 position: relative;
 }
 .holo-slider::-webkit-slider-thumb {
 -webkit-appearance: none;
 appearance: none;
 width: 22px;
 height: 22px;
 border-radius: 50%;
 background: radial-gradient(circle at 30% 30%, #fff, var(--neon-blue));
 cursor: pointer;
 box-shadow:
0 0 15px var(--neon-blue),
 0 0 30px rgba(0, 243, 255, 0.3),
 inset 0 2px 4px rgba(255,255,255,0.5);
 border: 2px solid rgba(255,255,255,0.8);
 transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 .holo-slider::-webkit-slider-thumb:hover {
 transform: scale(1.2);
 box-shadow:
0 0 25px var(--neon-blue),
 0 0 50px rgba(0, 243, 255, 0.5);
 }
 /* Glitch Text Effect */
 .glitch-text {
 position: relative;
 }
 .glitch-text::before,
 .glitch-text::after {
 content: attr(data-text);
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }
 .glitch-text::before {
 animation: glitch-1 2s infinite;
 clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
 color: var(--neon-purple);
 }
 .glitch-text::after {
 animation: glitch-2 2s infinite;
 clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
 color: var(--neon-blue);
 }
 @keyframes glitch-1 {
 0%, 100% { transform: translate(0); }
 20% { transform: translate(-2px, 2px); }
 40% { transform: translate(2px, -2px); }
 60% { transform: translate(-1px, 1px); }
 80% { transform: translate(1px, -1px); }
 }
 @keyframes glitch-2 {
 0%, 100% { transform: translate(0); }
 20% { transform: translate(2px, -2px); }
 40% { transform: translate(-2px, 2px); }
 60% { transform: translate(1px, -1px); }
 80% { transform: translate(-1px, 1px); }
 }
 /* Floating Animation */
 @keyframes float {
 0%, 100% { transform: translateY(0px) rotate(0deg); }
 33% { transform: translateY(-15px) rotate(1deg); }
 66% { transform: translateY(10px) rotate(-1deg); }
 }
 .animate-float {
 animation: float 6s ease-in-out infinite;
 }
 /* Pulse Glow */
 @keyframes pulse-glow {
 0%, 100% {
box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
 border-color: rgba(0, 243, 255, 0.4);
 }
 50% {
box-shadow: 0 0 40px rgba(0, 243, 255, 0.6), 0 0 80px rgba(0, 243, 255, 0.2);
 border-color: rgba(0, 243, 255, 0.8);
 }
 }
 .pulse-glow {
 animation: pulse-glow 3s ease-in-out infinite;
 }
 /* Noise Texture Overlay */
 .noise-overlay {
 position: fixed;
 inset: 0;
 z-index: 9998;
 pointer-events: none;
 opacity: 0.03;
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
 background-repeat: repeat;
 background-size: 256px 256px;
 }
 /* Perspective Container */
 .perspective-1000 {
 perspective: 1000px;
 }
 .transform-style-3d {
 transform-style: preserve-3d;
 }
 /* Typewriter Effect */
 .typewriter {
 overflow: hidden;
 border-right: 2px solid var(--neon-blue);
 white-space: nowrap;
 animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
 }
 @keyframes typing {
 from { width: 0 }
 to { width: 100% }
 }
 @keyframes blink-caret {
 from, to { border-color: transparent }
 50% { border-color: var(--neon-blue) }
 }
 /* Magnetic Button */
 .magnetic-btn {
 transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 /* Scroll Progress */
 .scroll-progress {
 position: fixed;
 top: 0;
 left: 0;
 height: 2px;
 background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple), var(--neon-pink));
 z-index: 100;
 transform-origin: left;
 box-shadow: 0 0 10px var(--neon-blue);
 }
 /* Reveal Animation Classes */
 .reveal-up {
 opacity: 0;
 transform: translateY(40px);
 }
 .reveal-scale {
 opacity: 0;
 transform: scale(0.9);
 }
 /* Corner Accents */
 .corner-accent {
 position: absolute;
 width: 20px;
 height: 20px;
 border: 2px solid var(--neon-blue);
 transition: all 0.3s ease;
 }
 .corner-accent.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
 .corner-accent.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
 .corner-accent.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
 .corner-accent.br { bottom: -2px; right: -2px; border-left: none; border-top: none; }
 .glass-panel-strong:hover .corner-accent {
 width: 30px;
 height: 30px;
 border-color: var(--neon-purple);
 }
 /* Status Indicator Ring */
 .status-ring {
 position: relative;
 }
 .status-ring::after {
 content: '';
 position: absolute;
 inset: -4px;
 border-radius: 50%;
 border: 2px solid transparent;
 border-top-color: var(--neon-blue);
 animation: spin 1s linear infinite;
 }
 /* Particle Canvas */
 #particle-canvas {
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 1;
 }
 /* Hero Canvas */
 #hero-canvas {
 position: absolute;
 inset: 0;
 z-index: 0;
 }
 /* Section transition */
 .section-fade {
 opacity: 0;
 transform: translateY(60px);
 transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
 transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
 }
 .section-fade.visible {
 opacity: 1;
 transform: translateY(0);
 }
 </style>
</head>
<body class="antialiased selection:bg-cyan-500 selection:text-black">
<!-- Scroll Progress -->
 <div class="scroll-progress" id="scroll-progress"></div>
<!-- Noise Overlay -->
 <div class="noise-overlay"></div>
<!-- Global Particle Canvas -->
 <canvas id="particle-canvas"></canvas>
<!-- Custom Cursor Elements -->
 <div class="cursor-trail"></div>
 <div class="cursor-outline"></div>
 <div class="cursor-dot"></div>
<!-- Navigation -->
 <nav class="fixed top-0 w-full z-50 px-6 py-4 flex justify-between items-center mix-blend-difference text-white" id="main-nav">
 <div class="text-2xl font-bold tracking-tighter hover-trigger magnetic-btn" data-cursor="logo">
 NOVA<span class="text-cyan-400">.OS</span>
 </div>
 <div class="hidden md:flex gap-8 text-sm font-medium uppercase tracking-widest">
 <a href="#immersive" class="hover-trigger hover:text-cyan-400 transition-colors magnetic-btn" data-cursor="link">Vision</a>
 <a href="#comparison" class="hover-trigger hover:text-purple-400 transition-colors magnetic-btn" data-cursor="link">Reality</a>
 <a href="#data" class="hover-trigger hover:text-cyan-400 transition-colors magnetic-btn" data-cursor="link">Signals</a>
 </div>
 <button class="px-6 py-2 border border-white/30 rounded-full hover:bg-white hover:text-black transition-all hover-trigger magnetic-btn" data-cursor="button" id="init-btn">
 Initialize
 </button>
 </nav>
<!-- Hero Section: 3D WebGL Core -->
 <section class="relative h-screen w-full overflow-hidden bg-black">
 <!-- Canvas for 3D -->
 <canvas id="hero-canvas"></canvas>
<!-- Overlay UI -->
 <div class="absolute inset-0 z-10 flex flex-col justify-center items-center pointer-events-none">
 <div class="text-center relative">
 <div class="overflow-hidden mb-2">
 <div class="flex items-center justify-center gap-4 mb-6 opacity-0 hero-badge">
 <span class="px-3 py-1 border border-cyan-500/30 rounded-full text-cyan-400 text-xs uppercase tracking-widest font-mono">System Online</span>
 <span class="w-2 h-2 bg-green-400 rounded-full status-ring"></span>
 </div>
 </div>
 <div class="overflow-hidden">
 <h1 class="hero-title text-6xl md:text-9xl font-bold uppercase tracking-tighter leading-none mix-blend-overlay text-transparent bg-clip-text bg-gradient-to-b from-white to-transparent opacity-0 glitch-text" data-text="Beyond">
 Beyond
 </h1>
 </div>
 <div class="overflow-hidden">
 <h1 class="hero-title text-6xl md:text-9xl font-bold uppercase tracking-tighter leading-none text-cyan-400 opacity-0">
 Reality
 </h1>
 </div>
 <p class="mt-6 text-lg md:text-xl text-gray-400 max-w-lg mx-auto opacity-0 hero-desc font-mono">
 Interactive Spatial Computing. Experience the next dimension of web interfaces.
 </p>
<div class="mt-12 opacity-0 hero-cta flex gap-4 justify-center">
 <button id="calibrate-btn" class="pointer-events-auto px-8 py-4 bg-white/10 backdrop-blur-md border border-cyan-500/50 text-cyan-400 hover:bg-cyan-400 hover:text-black transition-all duration-300 rounded-none uppercase tracking-widest font-bold hover-trigger pulse-glow magnetic-btn" data-cursor="button">
 Calibrate Sensors
 </button>
 <button class="pointer-events-auto px-8 py-4 border border-white/20 text-white/70 hover:border-purple-500 hover:text-purple-400 transition-all duration-300 rounded-none uppercase tracking-widest font-bold hover-trigger magnetic-btn" data-cursor="button">
 Learn More
 </button>
 </div>
 </div>
 </div>
<!-- Scroll Indicator -->
 <div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 z-10" id="scroll-indicator">
 <span class="text-[10px] uppercase tracking-widest text-gray-500 font-mono">Scroll to explore</span>
 <div class="w-[1px] h-12 bg-gradient-to-b from-cyan-500 to-transparent relative overflow-hidden">
 <div class="absolute top-0 left-0 w-full h-4 bg-cyan-400 animate-[pulse_2s_ease-in-out_infinite]"></div>
 </div>
 </div>
<!-- Corner Decorations -->
 <div class="absolute top-20 left-6 w-16 h-16 border-l border-t border-white/10 z-10"></div>
 <div class="absolute bottom-20 right-6 w-16 h-16 border-r border-b border-white/10 z-10"></div>
 </section>
<!-- Immersive Feature Section -->
 <section id="immersive" class="relative min-h-screen w-full flex items-center justify-center bg-[#050505] py-20 overflow-hidden">
 <!-- Background Decoration -->
 <div class="absolute inset-0 holo-grid opacity-30"></div>
 <div class="grid-lines"></div>
 <div class="absolute top-1/4 right-0 w-[500px] h-[500px] bg-purple-600/10 rounded-full blur-[120px] animate-pulse"></div>
 <div class="absolute bottom-1/4 left-0 w-[500px] h-[500px] bg-cyan-600/10 rounded-full blur-[120px] animate-pulse" style="animation-delay: 1s;"></div>
<div class="container mx-auto px-6 relative z-10 grid md:grid-cols-2 gap-16 items-center">
<!-- Left Content -->
 <div class="space-y-8 section-fade">
 <div class="inline-block px-4 py-2 border border-cyan-500/20 rounded-full text-cyan-400 text-xs uppercase tracking-widest mb-4 font-mono bg-cyan-500/5">
 Neural Interface v2.0
 </div>
 <h2 class="text-5xl md:text-7xl font-bold uppercase leading-tight">
 Holographic <br>
 <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-purple-500 to-pink-500">Depth</span>
 </h2>
 <p class="text-gray-400 text-lg leading-relaxed max-w-md">
 Our proprietary rendering engine constructs infinite layers of depth. Using WebGL shaders and post-processing bloom effects, we simulate true volumetric presence on a flat screen.
 </p>
<ul class="space-y-4 mt-8">
 <li class="flex items-center gap-4 text-gray-300 hover-trigger group" data-cursor="list">
 <div class="w-10 h-10 rounded-xl bg-cyan-500/10 flex items-center justify-center text-cyan-400 group-hover:bg-cyan-500/20 transition-all">
 <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 <path d="M5 13l4 4L19 7"></path>
 </svg>
 </div>
 <span class="group-hover:text-cyan-400 transition-colors">Real-time Raymarching</span>
 </li>
 <li class="flex items-center gap-4 text-gray-300 hover-trigger group" data-cursor="list">
 <div class="w-10 h-10 rounded-xl bg-purple-500/10 flex items-center justify-center text-purple-400 group-hover:bg-purple-500/20 transition-all">
 <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 <path d="M5 13l4 4L19 7"></path>
 </svg>
 </div>
 <span class="group-hover:text-purple-400 transition-colors">Procedural Texture Synthesis</span>
 </li>
 <li class="flex items-center gap-4 text-gray-300 hover-trigger group" data-cursor="list">
 <div class="w-10 h-10 rounded-xl bg-pink-500/10 flex items-center justify-center text-pink-400 group-hover:bg-pink-500/20 transition-all">
 <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 <path d="M5 13l4 4L19 7"></path>
 </svg>
 </div>
 <span class="group-hover:text-pink-400 transition-colors">Spatial Audio Mapping</span>
 </li>
 </ul>
 </div>
<!-- Right Content: 3D Card Stack -->
 <div class="relative h-[500px] w-full perspective-1000 flex items-center justify-center section-fade">
 <!-- The 3D Tilt Card -->
 <div id="tilt-card" class="relative w-80 h-[450px] bg-gradient-to-br from-gray-900 to-black rounded-2xl border border-white/10 shadow-2xl transform-style-3d transition-transform duration-100 ease-out hover-trigger animate-float" data-cursor="card">
<!-- Corner Accents -->
 <div class="corner-accent tl"></div>
 <div class="corner-accent tr"></div>
 <div class="corner-accent bl"></div>
 <div class="corner-accent br"></div>
<!-- Inner content of card -->
 <div class="absolute inset-0 overflow-hidden rounded-2xl">
 <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1000&auto=format&fit=crop')] bg-cover bg-center opacity-60 mix-blend-overlay"></div>
<!-- Gradient Overlay -->
 <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
<!-- Floating Elements -->
 <div class="absolute top-10 left-10 w-14 h-14 border border-cyan-500/30 rounded-full flex items-center justify-center">
 <div class="w-3 h-3 bg-cyan-400 rounded-full animate-pulse shadow-[0_0_10px_var(--neon-blue)]"></div>
 </div>
<div class="absolute top-10 right-10 text-right">
 <div class="text-xs text-gray-500 uppercase tracking-widest font-mono">Layer</div>
 <div class="text-2xl font-bold text-white/80 font-mono">07</div>
 </div>
<div class="absolute bottom-10 left-10 right-10 glass-panel-strong p-5 rounded-xl">
 <div class="flex items-center justify-between mb-3">
 <div class="h-2 w-16 bg-cyan-400 rounded-full shadow-[0_0_10px_var(--neon-blue)]"></div>
 <span class="text-[10px] text-cyan-400 uppercase font-mono">Active</span>
 </div>
 <div class="space-y-2">
 <div class="h-2 w-full bg-gray-700/50 rounded-full overflow-hidden">
 <div class="h-full w-3/4 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-full"></div>
 </div>
 <div class="h-2 w-2/3 bg-gray-700/30 rounded-full"></div>
 </div>
 <div class="mt-3 flex justify-between text-[10px] text-gray-500 font-mono">
 <span>CPU: 34%</span>
 <span>MEM: 12GB</span>
 </div>
 </div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
 <h3 class="text-8xl font-bold text-white/5 select-none font-syncopate">01</h3>
 </div>
 </div>
 </div>
<!-- Floating Orbitals -->
 <div class="absolute w-[550px] h-[550px] border border-white/5 rounded-full animate-[spin_20s_linear_infinite] pointer-events-none">
 <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 bg-cyan-400/50 rounded-full"></div>
 </div>
 <div class="absolute w-[400px] h-[400px] border border-cyan-500/10 rounded-full animate-[spin_30s_linear_infinite_reverse] pointer-events-none">
 <div class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-purple-400/50 rounded-full"></div>
 </div>
 <div class="absolute w-[300px] h-[300px] border border-pink-500/5 rounded-full animate-[spin_25s_linear_infinite] pointer-events-none"></div>
 </div>
 </div>
 </section>
<!-- Comparison / "Before & After" Section -->
 <section id="comparison" class="relative min-h-screen w-full bg-black flex flex-col items-center justify-center py-20 overflow-hidden">
 <div class="absolute inset-0 holo-grid opacity-20"></div>
<div class="text-center mb-12 section-fade">
 <div class="inline-block px-4 py-2 border border-purple-500/20 rounded-full text-purple-400 text-xs uppercase tracking-widest mb-6 font-mono bg-purple-500/5">
 Reality Engine
 </div>
 <h2 class="text-4xl md:text-6xl font-bold uppercase glitch-text" data-text="Render Engine">Render Engine</h2>
 <p class="text-gray-500 mt-4 font-mono text-sm">Swipe to calibrate reality distortion field</p>
 </div>
<!-- Interactive Comparison Slider -->
 <div class="relative w-full max-w-6xl h-[600px] mx-auto px-4 section-fade">
 <div class="relative w-full h-full overflow-hidden rounded-2xl border border-white/10 shadow-[0_0_50px_rgba(0,243,255,0.1)] group">
<!-- Background Image (Standard) -->
 <div class="absolute inset-0 w-full h-full">
 <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop" class="w-full h-full object-cover grayscale contrast-75" alt="Standard View">
 <div class="absolute inset-0 bg-black/20"></div>
 <div class="absolute top-6 left-6 glass-panel px-4 py-2 rounded text-xs uppercase tracking-widest font-mono">Standard Raster</div>
 </div>
<!-- Foreground Image (3D/Holographic) -->
 <div id="compare-overlay" class="absolute inset-0 w-[50%] h-full overflow-hidden border-r-2 border-cyan-400 bg-black">
 <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop" class="absolute top-0 left-0 max-w-none h-full w-[100vw] object-cover filter hue-rotate-90 contrast-150 saturate-200" alt="Holographic View">
<!-- Holographic Overlay Effects -->
 <div class="absolute inset-0 bg-cyan-500/20 mix-blend-overlay"></div>
 <div class="absolute inset-0 bg-[linear-gradient(45deg,transparent_25%,rgba(255,255,255,0.1)_50%,transparent_75%)] bg-[length:10px_10px] animate-[scan_2s_linear_infinite]"></div>
 <div class="absolute inset-0 bg-gradient-to-t from-cyan-900/30 to-transparent"></div>
<!-- Data Overlay -->
 <div class="absolute top-6 right-6 glass-panel px-4 py-2 rounded text-xs uppercase tracking-widest text-cyan-300 border border-cyan-500/30 font-mono">
 <span class="inline-block w-2 h-2 bg-cyan-400 rounded-full mr-2 animate-pulse"></span>
 Volumetric Raytracing
 </div>
<!-- Corner Markers -->
 <div class="absolute top-4 left-4 w-8 h-8 border-l-2 border-t-2 border-cyan-400/50"></div>
 <div class="absolute bottom-4 left-4 w-8 h-8 border-l-2 border-b-2 border-cyan-400/50"></div>
 </div>
<!-- Slider Handle -->
 <div id="slider-handle" class="absolute top-0 bottom-0 w-1 bg-cyan-400 cursor-ew-resize z-20 flex items-center justify-center hover-trigger" style="left: 50%" data-cursor="drag">
 <div class="w-12 h-12 bg-black/80 border-2 border-cyan-400 rounded-full flex items-center justify-center shadow-[0_0_30px_rgba(0,243,255,0.6)] backdrop-blur-sm">
 <svg class="w-5 h-5 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"></path>
 </svg>
 </div>
 <!-- Glow line -->
 <div class="absolute top-0 bottom-0 w-[1px] bg-cyan-400/50 shadow-[0_0_20px_var(--neon-blue)]"></div>
 </div>
<!-- Scan Line -->
 <div class="absolute top-0 left-0 right-0 h-[2px] bg-cyan-400/30 animate-[scan_3s_linear_infinite] pointer-events-none"></div>
 </div>
<!-- Controls -->
 <div class="mt-8 flex justify-center gap-6 flex-wrap">
 <div class="glass-panel px-6 py-3 rounded-full flex items-center gap-4">
 <span class="text-xs text-gray-400 uppercase font-mono">Distortion</span>
 <input type="range" min="0" max="100" value="50" class="holo-slider w-32" id="distortion-slider">
 <span class="text-xs text-cyan-400 font-mono w-8" id="distortion-value">50%</span>
 </div>
 <div class="glass-panel px-6 py-3 rounded-full flex items-center gap-4">
 <span class="text-xs text-gray-400 uppercase font-mono">Bloom</span>
 <input type="range" min="0" max="100" value="30" class="holo-slider w-32" id="bloom-slider">
 <span class="text-xs text-purple-400 font-mono w-8" id="bloom-value">30%</span>
 </div>
 </div>
 </div>
 </section>
<!-- Data Visualization Section -->
 <section id="data" class="relative min-h-screen w-full bg-[#020202] py-20 overflow-hidden">
 <div class="absolute inset-0 holo-grid opacity-10"></div>
 <div class="grid-lines"></div>
<div class="container mx-auto px-6 relative z-10">
 <div class="flex flex-col md:flex-row justify-between items-end mb-16 section-fade">
 <div>
 <div class="inline-block px-4 py-2 border border-pink-500/20 rounded-full text-pink-400 text-xs uppercase tracking-widest mb-4 font-mono bg-pink-500/5">
 Live Stream
 </div>
 <h2 class="text-5xl font-bold uppercase text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-500 to-cyan-400">
 Live Telemetry
 </h2>
 <p class="text-gray-500 mt-2 font-mono text-sm">Global network nodes monitoring active singularity.</p>
 </div>
 <div class="mt-6 md:mt-0 flex gap-8">
 <div class="text-right">
 <div class="text-3xl font-mono text-cyan-400" id="uptime-counter">84.2%</div>
 <div class="text-xs text-gray-600 uppercase font-mono">Uptime</div>
 </div>
 <div class="text-right">
 <div class="text-3xl font-mono text-pink-500" id="latency-counter">12.4ms</div>
 <div class="text-xs text-gray-600 uppercase font-mono">Latency</div>
 </div>
 <div class="text-right">
 <div class="text-3xl font-mono text-purple-400" id="nodes-counter">2,847</div>
 <div class="text-xs text-gray-600 uppercase font-mono">Nodes</div>
 </div>
 </div>
 </div>
<!-- 3D Chart Area -->
 <div class="relative w-full h-[500px] glass-panel rounded-2xl p-8 flex items-end justify-between gap-2 overflow-hidden group section-fade">
 <!-- Background Grid -->
 <div class="absolute inset-0 p-8 pointer-events-none">
 <div class="w-full h-full border-b border-white/10 flex items-end justify-between opacity-20">
 <span class="h-[20%] w-[1px] bg-gradient-to-t from-transparent to-white/50"></span>
 <span class="h-[40%] w-[1px] bg-gradient-to-t from-transparent to-white/50"></span>
 <span class="h-[60%] w-[1px] bg-gradient-to-t from-transparent to-white/50"></span>
 <span class="h-[80%] w-[1px] bg-gradient-to-t from-transparent to-white/50"></span>
 <span class="h-[100%] w-[1px] bg-gradient-to-t from-transparent to-white/50"></span>
 </div>
 <!-- Horizontal lines -->
 <div class="absolute inset-0 flex flex-col justify-between opacity-10">
 <div class="w-full h-[1px] bg-white"></div>
 <div class="w-full h-[1px] bg-white"></div>
 <div class="w-full h-[1px] bg-white"></div>
 <div class="w-full h-[1px] bg-white"></div>
 <div class="w-full h-[1px] bg-white"></div>
 </div>
 </div>
<!-- Bars (Generated by JS for animation) -->
 <div id="chart-container" class="w-full h-full flex items-end justify-between gap-1 relative z-10">
 <!-- Bars injected here -->
 </div>
<!-- Real-time indicator -->
 <div class="absolute top-4 right-4 flex items-center gap-2">
 <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
 <span class="text-[10px] text-green-400 uppercase font-mono">Real-time</span>
 </div>
 </div>
<!-- Floating data points -->
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
 <div class="glass-panel-strong p-6 rounded-xl hover:bg-white/5 transition-all duration-300 hover-trigger group" data-cursor="card">
 <div class="flex items-center justify-between mb-4">
 <h4 class="text-gray-400 uppercase text-xs tracking-widest font-mono">Core Temp</h4>
 <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.6)]"></span>
 </div>
 <div class="text-4xl font-mono text-white group-hover:text-cyan-400 transition-colors" id="temp-value">42.0°C</div>
 <div class="mt-3 h-1 w-full bg-gray-800 rounded-full overflow-hidden">
 <div class="h-full w-[42%] bg-gradient-to-r from-green-500 to-cyan-500 rounded-full"></div>
 </div>
 </div>
 <div class="glass-panel-strong p-6 rounded-xl hover:bg-white/5 transition-all duration-300 hover-trigger group" data-cursor="card">
 <div class="flex items-center justify-between mb-4">
 <h4 class="text-gray-400 uppercase text-xs tracking-widest font-mono">Memory</h4>
 <span class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse shadow-[0_0_8px_rgba(234,179,8,0.6)]"></span>
 </div>
 <div class="text-4xl font-mono text-white group-hover:text-purple-400 transition-colors" id="memory-value">128 PB</div>
 <div class="mt-3 h-1 w-full bg-gray-800 rounded-full overflow-hidden">
 <div class="h-full w-[67%] bg-gradient-to-r from-purple-500 to-pink-500 rounded-full"></div>
 </div>
 </div>
 <div class="glass-panel-strong p-6 rounded-xl hover:bg-white/5 transition-all duration-300 hover-trigger group" data-cursor="card">
 <div class="flex items-center justify-between mb-4">
 <h4 class="text-gray-400 uppercase text-xs tracking-widest font-mono">Threat Level</h4>
 <span class="w-2 h-2 bg-red-500 rounded-full animate-pulse shadow-[0_0_8px_rgba(239,68,68,0.6)]"></span>
 </div>
 <div class="text-4xl font-mono text-white group-hover:text-pink-500 transition-colors">Minimal</div>
 <div class="mt-3 flex gap-1">
 <div class="h-2 w-8 bg-red-500/30 rounded-full"></div>
 <div class="h-2 w-8 bg-red-500/30 rounded-full"></div>
 <div class="h-2 w-8 bg-red-500/20 rounded-full"></div>
 <div class="h-2 w-8 bg-red-500/10 rounded-full"></div>
 <div class="h-2 w-8 bg-red-500/10 rounded-full"></div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Terminal Section -->
 <section class="relative py-20 bg-black overflow-hidden">
 <div class="container mx-auto px-6">
 <div class="max-w-4xl mx-auto glass-panel rounded-2xl p-8 section-fade">
 <div class="flex items-center gap-4 mb-6 pb-4 border-b border-white/10">
 <div class="flex gap-2">
 <div class="w-3 h-3 rounded-full bg-red-500/80"></div>
 <div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
 <div class="w-3 h-3 rounded-full bg-green-500/80"></div>
 </div>
 <span class="text-xs text-gray-500 font-mono">nova_system.log</span>
 </div>
 <div class="font-mono text-sm space-y-2 text-gray-400" id="terminal-content">
 <div class="text-green-400">> System initialization complete...</div>
 <div class="text-cyan-400">> Loading neural interface modules...</div>
 <div>> <span class="typewriter text-white">Establishing secure connection to NOVA core</span></div>
 </div>
 </div>
 </