pingram3541 · June 24, 2026 23:52
diff --git a/index.html b/index.html

 <!DOCTYPE html>
 <html lang="en" class="scroll-smooth">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Geometry of Existence: A Study of Dimensions</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;600&family=Syncopate:wght@700&display=swap');
        
        body {
            font-family: 'Space Grotesk', sans-serif;
            background-color: #030712;
        }
        .title-font {
            font-family: 'Syncopate', sans-serif;
        }
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #030712;
        }
        ::-webkit-scrollbar-thumb {
            background: #1f2937;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #374151;
        }
    </style>
 </head>
 <body class="text-gray-300 antialiased overflow-x-hidden">

    <canvas id="dimensionCanvas" class="fixed top-0 left-0 w-full h-full -z-10 pointer-events-none opacity-40 transition-opacity duration-1000"></canvas>

    <div class="fixed top-1/2 right-6 -translate-y-1/2 z-50 hidden md:flex flex-col gap-4">
        <a href="#intro" class="nav-dot w-3 h-3 rounded-full bg-white/20 hover:bg-white/60 transition-all duration-300" title="Intro"></a>
        <a href="#d0" class="nav-dot w-3 h-3 rounded-full bg-white/20 hover:bg-white/60 transition-all duration-300" title="0D"></a>
        <a href="#d1" class="nav-dot w-3 h-3 rounded-full bg-white/20 hover:bg-white/60 transition-all duration-300" title="1D"></a>
        <a href="#d2" class="nav-dot w-3 h-3 rounded-full bg-white/20 hover:bg-white/60 transition-all duration-300" title="2D"></a>
        <a href="#d3" class="nav-dot w-3 h-3 rounded-full bg-white/20 hover:bg-white/60 transition-all duration-300" title="3D"></a>
        <a href="#d4" class="nav-dot w-3 h-3 rounded-full bg-white/20 hover:bg-white/60 transition-all duration-300" title="4D"></a>
        <a href="#d5" class="nav-dot w-3 h-3 rounded-full bg-white/20 hover:bg-white/60 transition-all duration-300" title="5D"></a>
        <a href="#d6" class="nav-dot w-3 h-3 rounded-full bg-white/20 hover:bg-white/60 transition-all duration-300" title="6D"></a>
        <a href="#d7" class="nav-dot w-3 h-3 rounded-full bg-white/20 hover:bg-white/60 transition-all duration-300" title="7D"></a>
    </div>

    <section id="intro" class="min-h-screen flex flex-col justify-center items-center px-6 relative max-w-5xl mx-auto text-center snap-start">
        <div class="space-y-4">
            <span class="text-xs uppercase tracking-widest text-cyan-400 font-semibold">A Multidisciplinary Framework</span>
            <h1 class="title-font text-4xl md:text-7xl font-extrabold tracking-tight text-white uppercase leading-none">
                The Geometry <br><span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-indigo-500">of Existence</span>
            </h1>
            <p class="max-w-xl mx-auto text-gray-400 text-lg md:text-xl pt-4">
                As 3D beings, we only observe the flat 2D shell of things. Scroll down to unpack the geometric foundations and branch into the higher dimensions of quantum physics and alternative potential.
            </p>
        </div>
        <div class="absolute bottom-10 animate-bounce text-sm text-gray-500 uppercase tracking-widest">
            Scroll to Begin →
        </div>
    </section>

    <main class="max-w-5xl mx-auto px-6 relative z-10 space-y-[30vh] pb-[20vh]">

        <section id="d0" class="dimension-section min-h-[60vh] flex flex-col justify-center border-l-2 border-dashed border-gray-800 pl-6 md:pl-12 transition-all duration-700 opacity-50 transform translate-y-10" data-dimension="0">
            <div class="max-w-2xl">
                <div class="text-6xl md:text-8xl font-bold text-white title-font tracking-tighter opacity-20 mb-2">0D</div>
                <h2 class="text-2xl md:text-4xl font-semibold text-white mb-4">The Point — Position & Pure Existence</h2>
                <p class="text-gray-400 leading-relaxed mb-4">
                    A single localized position possessing absolutely no length, depth, height, or physical shape. It represents space before configuration.
                </p>
                <blockquote class="border-l-4 border-cyan-500 pl-4 italic text-sm text-gray-400">
                    "In pure mathematics, a coordinate point inherently implies a reference frame—a subtle whisper of existence inside a higher spatial reality."
                </blockquote>
            </div>
        </section>

        <section id="d1" class="dimension-section min-h-[60vh] flex flex-col justify-center border-l-2 border-dashed border-gray-800 pl-6 md:pl-12 transition-all duration-700 opacity-50 transform translate-y-10" data-dimension="1">
            <div class="max-w-2xl">
                <div class="text-6xl md:text-8xl font-bold text-white title-font tracking-tighter opacity-20 mb-2">1D</div>
                <h2 class="text-2xl md:text-4xl font-semibold text-white mb-4">The Line — Absolute Translation</h2>
                <p class="text-gray-400 leading-relaxed mb-4">
                    A continuum extending infinitely forward or backward along a single vector axis ($X$). It captures length but remains utterly devoid of width or height.
                </p>
                <p class="text-sm text-gray-500">
                    <strong>The Perceptual Fallacy:</strong> True one-dimensional structures lack any thickness and are invisible to a 3D eye. We can only visualize a line inside a 2D or 3D environment by introducing artificial thickness.
                </p>
            </div>
        </section>

        <section id="d2" class="dimension-section min-h-[60vh] flex flex-col justify-center border-l-2 border-dashed border-gray-800 pl-6 md:pl-12 transition-all duration-700 opacity-50 transform translate-y-10" data-dimension="2">
            <div class="max-w-2xl">
                <div class="text-6xl md:text-8xl font-bold text-white title-font tracking-tighter opacity-20 mb-2">2D</div>
                <h2 class="text-2xl md:text-4xl font-semibold text-white mb-4">The Plane — Area & Radial Angles</h2>
                <p class="text-gray-400 leading-relaxed mb-4">
                    Unlocking a perpendicular coordinate axis ($Y$), creation spreads into a flat plane. Shapes, curves, vectors, and complex geometries come alive across a full 360-degree matrix.
                </p>
                <p class="text-sm text-gray-500">
                    <strong>Edge-on Invisibility:</strong> If a 3D observer views a flat 2D plane perfectly parallel to its surface, it vanishes entirely. It must be viewed perpendicularly from the 3rd dimension to observe its width and length.
                </p>
            </div>
        </section>

        <section id="d3" class="dimension-section min-h-[60vh] flex flex-col justify-center border-l-2 border-dashed border-gray-800 pl-6 md:pl-12 transition-all duration-700 opacity-50 transform translate-y-10" data-dimension="3">
            <div class="max-w-2xl">
                <div class="text-6xl md:text-8xl font-bold text-white title-font tracking-tighter opacity-20 mb-2">3D</div>
                <h2 class="text-2xl md:text-4xl font-semibold text-white mb-4">Space — Mass, Volume & The Incubator</h2>
                <p class="text-gray-400 leading-relaxed mb-4">
                    By projecting along the $Z$-axis, structural space incorporates depth. This allows for physical volume, mechanical systems, complex chemistry, and organic biological organisms.
                </p>
                <div class="p-4 bg-gray-950/60 border border-gray-800 rounded-lg backdrop-blur-md text-sm text-gray-400">
                    We live out our entire lives inside a carefully tuned geometric incubator, using 2D sensory projections on our eyes' retinas to construct the illusion of 3D solids.
                </div>
            </div>
        </section>

        <div class="pt-20 text-center space-y-4">
            <hr class="border-gray-800 max-w-xs mx-auto">
            <span class="text-xs uppercase tracking-widest text-indigo-400 font-bold">The Great Divergence</span>
            <h3 class="text-xl md:text-3xl font-semibold text-white tracking-wide">Splitting Higher Dimensions</h3>
            <p class="text-sm text-gray-400 max-w-md mx-auto">
                Beyond physical 3D architecture, definitions diverge into strict classical spatial physics versus alternative timelines of the quantum multiverse.
            </p>
        </div>

        <section id="d4" class="dimension-section min-h-[60vh] flex flex-col justify-center border-l-2 border-dashed border-gray-800 pl-6 md:pl-12 transition-all duration-700 opacity-50 transform translate-y-10" data-dimension="4">
            <div class="max-w-3xl">
                <div class="text-6xl md:text-8xl font-bold text-white title-font tracking-tighter opacity-20 mb-2">4D</div>
                <h2 class="text-2xl md:text-4xl font-semibold text-white mb-4">Duration vs. Hyper-Space</h2>
                
                <div class="grid md:grid-cols-2 gap-6 mt-4">
                    <div class="p-5 bg-gray-950/40 border border-gray-800 rounded-lg">
                        <h4 class="text-cyan-400 font-semibold mb-2 uppercase text-xs tracking-wider">Model A: Relativistic Physics</h4>
                        <p class="text-sm text-gray-400">Time acts as a continuous axis ($T$). Objects are represented as static "world-lines" displaying their entire history from creation to eventual decay inside space-time.</p>
                    </div>
                    <div class="p-5 bg-gray-950/40 border border-gray-800 rounded-lg">
                        <h4 class="text-indigo-400 font-semibold mb-2 uppercase text-xs tracking-wider">Model B: Spatial Math</h4>
                        <p class="text-sm text-gray-400">A literal fourth spatial direction ($W$), perfectly perpendicular to $X$, $Y$, and $Z$, forming geometric hyper-volumes like a four-dimensional tesseract.</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="d5" class="dimension-section min-h-[60vh] flex flex-col justify-center border-l-2 border-dashed border-gray-800 pl-6 md:pl-12 transition-all duration-700 opacity-50 transform translate-y-10" data-dimension="5">
            <div class="max-w-3xl">
                <div class="text-6xl md:text-8xl font-bold text-white title-font tracking-tighter opacity-20 mb-2">5D</div>
                <h2 class="text-2xl md:text-4xl font-semibold text-white mb-4">Potential & String Topology</h2>
                
                <div class="grid md:grid-cols-2 gap-6 mt-4">
                    <div class="p-5 bg-gray-950/40 border border-gray-800 rounded-lg">
                        <h4 class="text-cyan-400 font-semibold mb-2 uppercase text-xs tracking-wider">Model A: Compactified Fields</h4>
                        <p class="text-sm text-gray-400">In String Theory, the 5th dimension is a literal physical direction curled into infinite microscopic geometries (Calabi-Yau manifolds) guiding subatomic forces.</p>
                    </div>
                    <div class="p-5 bg-gray-950/40 border border-gray-800 rounded-lg">
                        <h4 class="text-indigo-400 font-semibold mb-2 uppercase text-xs tracking-wider">Model B: Probability Planes</h4>
                        <p class="text-sm text-gray-400">A lateral turning point branching off our timeline. It charts alternate outcomes, futures, and histories born from our singular universal origin point.</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="d6" class="dimension-section min-h-[60vh] flex flex-col justify-center border-l-2 border-dashed border-gray-800 pl-6 md:pl-12 transition-all duration-700 opacity-50 transform translate-y-10" data-dimension="6">
            <div class="max-w-3xl">
                <div class="text-6xl md:text-8xl font-bold text-white title-font tracking-tighter opacity-20 mb-2">6D</div>
                <h2 class="text-2xl md:text-4xl font-semibold text-white mb-4">The Omniverse Solid & Hidden Space</h2>
                
                <div class="grid md:grid-cols-2 gap-6 mt-4">
                    <div class="p-5 bg-gray-950/40 border border-gray-800 rounded-lg">
                        <h4 class="text-cyan-400 font-semibold mb-2 uppercase text-xs tracking-wider">Model A: Quantum Vibration</h4>
                        <p class="text-sm text-gray-400">Further subatomic degrees of spatial freedom that define the specific vibrations of strings, giving rise to fundamental particles like quarks and electrons.</p>
                    </div>
                    <div class="p-5 bg-gray-950/40 border border-gray-800 rounded-lg">
                        <h4 class="text-indigo-400 font-semibold mb-2 uppercase text-xs tracking-wider">Model B: Alternate Universes</h4>
                        <p class="text-sm text-gray-400">A cosmic phase space containing entirely independent realities, operating under distinct physics variables, alternative constants, and unrelated origin states.</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="d7" class="dimension-section min-h-[60vh] flex flex-col justify-center border-l-2 border-dashed border-gray-800 pl-6 md:pl-12 transition-all duration-700 opacity-50 transform translate-y-10" data-dimension="7">
            <div class="max-w-2xl">
                <div class="text-6xl md:text-8xl font-bold text-white title-font tracking-tighter opacity-20 mb-2">7D</div>
                <h2 class="text-2xl md:text-4xl font-semibold text-white mb-4">The Absolute Singularity</h2>
                <p class="text-gray-400 leading-relaxed mb-4">
                    The total encapsulation of all dimensions, coordinates, timelines, realities, variables, voids, and non-spaces. 
                </p>
                <div class="p-6 bg-gradient-to-br from-indigo-950/50 to-purple-950/50 border border-indigo-500/30 rounded-xl">
                    <p class="text-sm text-indigo-200">
                        In theoretical modeling, treating the entire multiverse continuum as a single point means there is nothing further left to categorize. Every constant, void, or paradox folds into this terminal metric, making higher steps functionally redundant.
                    </p>
                </div>
            </div>
        </section>

    </main>

    <footer class="text-center py-10 border-t border-gray-900 text-xs text-gray-600 relative z-10">
        The Geometry of Existence Study Matrix • Built for Immersive Exploration
    </footer>

    <script>
        const canvas = document.getElementById('dimensionCanvas');
        const ctx = canvas.getContext('2d');
        let currentDimension = 0;
        let globalRotation = 0;

        // Resize Canvas to fit screen
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        // High-performance animation rendering loop
        function drawBackdrop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.save();
            ctx.translate(canvas.width / 2, canvas.height / 2);
            
            globalRotation += 0.002;
            ctx.rotate(globalRotation);

            const centerX = 0;
            const centerY = 0;
            const accentColor = 'rgba(34, 211, 238, 0.4)'; // Cyan
            const secondaryColor = 'rgba(99, 102, 241, 0.3)'; // Indigo

            ctx.lineWidth = 1;

            switch(parseInt(currentDimension)) {
                case 0: // 0D: Simple, pulsing single coordinates point
                    let pulse = Math.abs(Math.sin(Date.now() * 0.003)) * 6 + 2;
                    ctx.fillStyle = '#22d3ee';
                    ctx.shadowBlur = 15;
                    ctx.shadowColor = '#22d3ee';
                    ctx.beginPath();
                    ctx.arc(centerX, centerY, pulse, 0, Math.PI * 2);
                    ctx.fill();
                    break;

                case 1: // 1D: A singular, infinite line vector across space
                    ctx.strokeStyle = accentColor;
                    ctx.shadowBlur = 0;
                    ctx.beginPath();
                    ctx.moveTo(-canvas.width, 0);
                    ctx.lineTo(canvas.width, 0);
                    ctx.stroke();
                    break;

                case 2: // 2D: Geometries expanding symmetrically across an area
                    ctx.strokeStyle = accentColor;
                    ctx.beginPath();
                    for(let i = 0; i < 4; i++) {
                        ctx.rotate(Math.PI / 2);
                        ctx.strokeRect(-100, -100, 200, 200);
                    }
                    break;

                case 3: // 3D: A rotating isometric wireframe cube structure
                    ctx.strokeStyle = accentColor;
                    let size = 120;
                    ctx.save();
                    ctx.rotate(globalRotation * 2);
                    // Front face
                    ctx.strokeRect(-size/2, -size/2, size, size);
                    // Back face imitation
                    ctx.strokeStyle = secondaryColor;
                    ctx.strokeRect(-size/3, -size/3, size, size);
                    // Connections
                    ctx.beginPath();
                    ctx.moveTo(-size/2, -size/2); ctx.lineTo(-size/3, -size/3);
                    ctx.moveTo(size/2, -size/2); ctx.lineTo(size/3, -size/3);
                    ctx.moveTo(-size/2, size/2); ctx.lineTo(-size/3, size/3);
                    ctx.moveTo(size/2, size/2); ctx.lineTo(size/3, size/3);
                    ctx.stroke();
                    ctx.restore();
                    break;

                case 4: // 4D: Concentric geometric frames shifting across each other
                    ctx.strokeStyle = accentColor;
                    ctx.save();
                    ctx.rotate(-globalRotation);
                    for(let r = 40; r <= 160; r += 40) {
                        ctx.beginPath();
                        ctx.arc(centerX, centerY, r + (Math.sin(Date.now()*0.002)*10), 0, Math.PI*2);
                        ctx.stroke();
                    }
                    ctx.restore();
                    break;

                case 5: // 5D: Branching data arrays mimicking multiple paths
                    ctx.strokeStyle = secondaryColor;
                    ctx.beginPath();
                    for(let angle = 0; angle < Math.PI * 2; angle += Math.PI / 6) {
                        let length = 180 + Math.sin(Date.now() * 0.005 + angle) * 30;
                        ctx.moveTo(0, 0);
                        ctx.lineTo(Math.cos(angle) * length, Math.sin(angle) * length);
                    }
                    ctx.stroke();
                    break;

                case 6: // 6D: A complex overlapping mesh pattern
                    ctx.strokeStyle = accentColor;
                    for(let k = 0; k < 6; k++) {
                        ctx.beginPath();
                        ctx.ellipse(0, 0, 80, 220, (Math.PI / 3) * k + globalRotation, 0, Math.PI * 2);
                        ctx.stroke();
                    }
                    break;

                case 7: // 7D: Dense harmonic particle array representing everything
                    ctx.fillStyle = '#c084fc';
                    let dots = 40;
                    for(let d = 0; d < dots; d++) {
                        let distance = (d * 6) + 10;
                        let theta = d * 0.4 + globalRotation;
                        let px = Math.cos(theta) * distance;
                        let py = Math.sin(theta) * distance;
                        ctx.beginPath();
                        ctx.arc(px, py, 1.5, 0, Math.PI * 2);
                        ctx.fill();
                    }
                    break;
            }

            ctx.restore();
            requestAnimationFrame(drawBackdrop);
        }
        
        // Start loops
        requestAnimationFrame(drawBackdrop);

        // Scroll monitoring utilizing Intersection Observer APIs
        const sections = document.querySelectorAll('.dimension-section');
        const navDots = document.querySelectorAll('.nav-dot');

        const observerOptions = {
            root: null,
            rootMargin: '-30% 0px -40% 0px',
            threshold: 0.1
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // Update canvas target dimension layer
                    currentDimension = entry.target.getAttribute('data-dimension');
                    
                    // Trigger visual fade-in text animations
                    entry.target.classList.remove('opacity-50', 'translate-y-10');
                    entry.target.classList.add('opacity-100', 'translate-y-0');

                    // Synchronize pagination index dot highlights
                    let index = Array.from(sections).indexOf(entry.target);
                    navDots.forEach((dot, dIdx) => {
                        if(dIdx === index + 1) { // Offset by 1 to accommodate hero home index
                            dot.classList.add('bg-cyan-400', 'scale-125');
                            dot.classList.remove('bg-white/20');
                        } else {
                            dot.classList.remove('bg-cyan-400', 'scale-125');
                            dot.classList.add('bg-white/20');
                        }
                    });
                }
            });
        }, observerOptions);

        sections.forEach(section => observer.observe(section));

        // Direct handling for home dot state tracking
        window.addEventListener('scroll', () => {
            if (window.scrollY < window.innerHeight / 2) {
                currentDimension = 0;
                navDots.forEach((dot, dIdx) => {
                    if(dIdx === 0) {
                        dot.classList.add('bg-cyan-400', 'scale-125');
                    } else {
                        dot.classList.remove('bg-cyan-400', 'scale-125');
                    }
                });
            }
        });
    </script>
 <script defer src="https://static.cloudflareinsights.com/beacon.min.js/v833ccba57c9e4d2798f2e76cebdd09a11778172276447" integrity="sha512-57MDmcccJXYtNnH+ZiBwzC4jb2rvgVCEokYN+L/nLlmO8rfYT/gIpW2A569iJ/3b+0UEasghjuZH/ma3wIs/EQ==" data-cf-beacon='{"version":"2024.11.0","token":"83303c269f8646ea9029f09bb7d29b2b","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
 </body>
 </html>

	<!DOCTYPE html>
	<html lang="en" class="scroll-smooth">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>The Geometry of Existence: A Study of Dimensions</title>
	<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;600&family=Syncopate:wght@700&display=swap');

	body {
	font-family: 'Space Grotesk', sans-serif;
	background-color: #030712;
	}
	.title-font {
	font-family: 'Syncopate', sans-serif;
	}
	/* Custom scrollbar */
	::-webkit-scrollbar {
	width: 6px;
	}
	::-webkit-scrollbar-track {
	background: #030712;
	}
	::-webkit-scrollbar-thumb {
	background: #1f2937;
	border-radius: 3px;
	}
	::-webkit-scrollbar-thumb:hover {
	background: #374151;
	}
	</style>
	</head>
	<body class="text-gray-300 antialiased overflow-x-hidden">

	<canvas id="dimensionCanvas" class="fixed top-0 left-0 w-full h-full -z-10 pointer-events-none opacity-40 transition-opacity duration-1000"></canvas>

	<div class="fixed top-1/2 right-6 -translate-y-1/2 z-50 hidden md:flex flex-col gap-4">
	<a href="#intro" class="nav-dot w-3 h-3 rounded-full bg-white/20 hover:bg-white/60 transition-all duration-300" title="Intro"></a>
	<a href="#d0" class="nav-dot w-3 h-3 rounded-full bg-white/20 hover:bg-white/60 transition-all duration-300" title="0D"></a>
	<a href="#d1" class="nav-dot w-3 h-3 rounded-full bg-white/20 hover:bg-white/60 transition-all duration-300" title="1D"></a>
	<a href="#d2" class="nav-dot w-3 h-3 rounded-full bg-white/20 hover:bg-white/60 transition-all duration-300" title="2D"></a>
	<a href="#d3" class="nav-dot w-3 h-3 rounded-full bg-white/20 hover:bg-white/60 transition-all duration-300" title="3D"></a>
	<a href="#d4" class="nav-dot w-3 h-3 rounded-full bg-white/20 hover:bg-white/60 transition-all duration-300" title="4D"></a>
	<a href="#d5" class="nav-dot w-3 h-3 rounded-full bg-white/20 hover:bg-white/60 transition-all duration-300" title="5D"></a>
	<a href="#d6" class="nav-dot w-3 h-3 rounded-full bg-white/20 hover:bg-white/60 transition-all duration-300" title="6D"></a>
	<a href="#d7" class="nav-dot w-3 h-3 rounded-full bg-white/20 hover:bg-white/60 transition-all duration-300" title="7D"></a>
	</div>

	<section id="intro" class="min-h-screen flex flex-col justify-center items-center px-6 relative max-w-5xl mx-auto text-center snap-start">
	<div class="space-y-4">
	<span class="text-xs uppercase tracking-widest text-cyan-400 font-semibold">A Multidisciplinary Framework</span>
	<h1 class="title-font text-4xl md:text-7xl font-extrabold tracking-tight text-white uppercase leading-none">
	The Geometry <br><span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-indigo-500">of Existence</span>
	</h1>
	<p class="max-w-xl mx-auto text-gray-400 text-lg md:text-xl pt-4">
	As 3D beings, we only observe the flat 2D shell of things. Scroll down to unpack the geometric foundations and branch into the higher dimensions of quantum physics and alternative potential.
	</p>
	</div>
	<div class="absolute bottom-10 animate-bounce text-sm text-gray-500 uppercase tracking-widest">
	Scroll to Begin →
	</div>
	</section>

	<main class="max-w-5xl mx-auto px-6 relative z-10 space-y-[30vh] pb-[20vh]">

	<section id="d0" class="dimension-section min-h-[60vh] flex flex-col justify-center border-l-2 border-dashed border-gray-800 pl-6 md:pl-12 transition-all duration-700 opacity-50 transform translate-y-10" data-dimension="0">
	<div class="max-w-2xl">
	<div class="text-6xl md:text-8xl font-bold text-white title-font tracking-tighter opacity-20 mb-2">0D</div>
	<h2 class="text-2xl md:text-4xl font-semibold text-white mb-4">The Point — Position & Pure Existence</h2>
	<p class="text-gray-400 leading-relaxed mb-4">
	A single localized position possessing absolutely no length, depth, height, or physical shape. It represents space before configuration.
	</p>
	<blockquote class="border-l-4 border-cyan-500 pl-4 italic text-sm text-gray-400">
	"In pure mathematics, a coordinate point inherently implies a reference frame—a subtle whisper of existence inside a higher spatial reality."
	</blockquote>
	</div>
	</section>

	<section id="d1" class="dimension-section min-h-[60vh] flex flex-col justify-center border-l-2 border-dashed border-gray-800 pl-6 md:pl-12 transition-all duration-700 opacity-50 transform translate-y-10" data-dimension="1">
	<div class="max-w-2xl">
	<div class="text-6xl md:text-8xl font-bold text-white title-font tracking-tighter opacity-20 mb-2">1D</div>
	<h2 class="text-2xl md:text-4xl font-semibold text-white mb-4">The Line — Absolute Translation</h2>
	<p class="text-gray-400 leading-relaxed mb-4">
	A continuum extending infinitely forward or backward along a single vector axis ($X$). It captures length but remains utterly devoid of width or height.
	</p>
	<p class="text-sm text-gray-500">
	<strong>The Perceptual Fallacy:</strong> True one-dimensional structures lack any thickness and are invisible to a 3D eye. We can only visualize a line inside a 2D or 3D environment by introducing artificial thickness.
	</p>
	</div>
	</section>

	<section id="d2" class="dimension-section min-h-[60vh] flex flex-col justify-center border-l-2 border-dashed border-gray-800 pl-6 md:pl-12 transition-all duration-700 opacity-50 transform translate-y-10" data-dimension="2">
	<div class="max-w-2xl">
	<div class="text-6xl md:text-8xl font-bold text-white title-font tracking-tighter opacity-20 mb-2">2D</div>
	<h2 class="text-2xl md:text-4xl font-semibold text-white mb-4">The Plane — Area & Radial Angles</h2>
	<p class="text-gray-400 leading-relaxed mb-4">
	Unlocking a perpendicular coordinate axis ($Y$), creation spreads into a flat plane. Shapes, curves, vectors, and complex geometries come alive across a full 360-degree matrix.
	</p>
	<p class="text-sm text-gray-500">
	<strong>Edge-on Invisibility:</strong> If a 3D observer views a flat 2D plane perfectly parallel to its surface, it vanishes entirely. It must be viewed perpendicularly from the 3rd dimension to observe its width and length.
	</p>
	</div>
	</section>

	<section id="d3" class="dimension-section min-h-[60vh] flex flex-col justify-center border-l-2 border-dashed border-gray-800 pl-6 md:pl-12 transition-all duration-700 opacity-50 transform translate-y-10" data-dimension="3">
	<div class="max-w-2xl">
	<div class="text-6xl md:text-8xl font-bold text-white title-font tracking-tighter opacity-20 mb-2">3D</div>
	<h2 class="text-2xl md:text-4xl font-semibold text-white mb-4">Space — Mass, Volume & The Incubator</h2>
	<p class="text-gray-400 leading-relaxed mb-4">
	By projecting along the $Z$-axis, structural space incorporates depth. This allows for physical volume, mechanical systems, complex chemistry, and organic biological organisms.
	</p>
	<div class="p-4 bg-gray-950/60 border border-gray-800 rounded-lg backdrop-blur-md text-sm text-gray-400">
	We live out our entire lives inside a carefully tuned geometric incubator, using 2D sensory projections on our eyes' retinas to construct the illusion of 3D solids.
	</div>
	</div>
	</section>

	<div class="pt-20 text-center space-y-4">
	<hr class="border-gray-800 max-w-xs mx-auto">
	<span class="text-xs uppercase tracking-widest text-indigo-400 font-bold">The Great Divergence</span>
	<h3 class="text-xl md:text-3xl font-semibold text-white tracking-wide">Splitting Higher Dimensions</h3>
	<p class="text-sm text-gray-400 max-w-md mx-auto">
	Beyond physical 3D architecture, definitions diverge into strict classical spatial physics versus alternative timelines of the quantum multiverse.
	</p>
	</div>

	<section id="d4" class="dimension-section min-h-[60vh] flex flex-col justify-center border-l-2 border-dashed border-gray-800 pl-6 md:pl-12 transition-all duration-700 opacity-50 transform translate-y-10" data-dimension="4">
	<div class="max-w-3xl">
	<div class="text-6xl md:text-8xl font-bold text-white title-font tracking-tighter opacity-20 mb-2">4D</div>
	<h2 class="text-2xl md:text-4xl font-semibold text-white mb-4">Duration vs. Hyper-Space</h2>

	<div class="grid md:grid-cols-2 gap-6 mt-4">
	<div class="p-5 bg-gray-950/40 border border-gray-800 rounded-lg">
	<h4 class="text-cyan-400 font-semibold mb-2 uppercase text-xs tracking-wider">Model A: Relativistic Physics</h4>
	<p class="text-sm text-gray-400">Time acts as a continuous axis ($T$). Objects are represented as static "world-lines" displaying their entire history from creation to eventual decay inside space-time.</p>
	</div>
	<div class="p-5 bg-gray-950/40 border border-gray-800 rounded-lg">
	<h4 class="text-indigo-400 font-semibold mb-2 uppercase text-xs tracking-wider">Model B: Spatial Math</h4>
	<p class="text-sm text-gray-400">A literal fourth spatial direction ($W$), perfectly perpendicular to $X$, $Y$, and $Z$, forming geometric hyper-volumes like a four-dimensional tesseract.</p>
	</div>
	</div>
	</div>
	</section>

	<section id="d5" class="dimension-section min-h-[60vh] flex flex-col justify-center border-l-2 border-dashed border-gray-800 pl-6 md:pl-12 transition-all duration-700 opacity-50 transform translate-y-10" data-dimension="5">
	<div class="max-w-3xl">
	<div class="text-6xl md:text-8xl font-bold text-white title-font tracking-tighter opacity-20 mb-2">5D</div>
	<h2 class="text-2xl md:text-4xl font-semibold text-white mb-4">Potential & String Topology</h2>

	<div class="grid md:grid-cols-2 gap-6 mt-4">
	<div class="p-5 bg-gray-950/40 border border-gray-800 rounded-lg">
	<h4 class="text-cyan-400 font-semibold mb-2 uppercase text-xs tracking-wider">Model A: Compactified Fields</h4>
	<p class="text-sm text-gray-400">In String Theory, the 5th dimension is a literal physical direction curled into infinite microscopic geometries (Calabi-Yau manifolds) guiding subatomic forces.</p>
	</div>
	<div class="p-5 bg-gray-950/40 border border-gray-800 rounded-lg">
	<h4 class="text-indigo-400 font-semibold mb-2 uppercase text-xs tracking-wider">Model B: Probability Planes</h4>
	<p class="text-sm text-gray-400">A lateral turning point branching off our timeline. It charts alternate outcomes, futures, and histories born from our singular universal origin point.</p>
	</div>
	</div>
	</div>
	</section>

	<section id="d6" class="dimension-section min-h-[60vh] flex flex-col justify-center border-l-2 border-dashed border-gray-800 pl-6 md:pl-12 transition-all duration-700 opacity-50 transform translate-y-10" data-dimension="6">
	<div class="max-w-3xl">
	<div class="text-6xl md:text-8xl font-bold text-white title-font tracking-tighter opacity-20 mb-2">6D</div>
	<h2 class="text-2xl md:text-4xl font-semibold text-white mb-4">The Omniverse Solid & Hidden Space</h2>

	<div class="grid md:grid-cols-2 gap-6 mt-4">
	<div class="p-5 bg-gray-950/40 border border-gray-800 rounded-lg">
	<h4 class="text-cyan-400 font-semibold mb-2 uppercase text-xs tracking-wider">Model A: Quantum Vibration</h4>
	<p class="text-sm text-gray-400">Further subatomic degrees of spatial freedom that define the specific vibrations of strings, giving rise to fundamental particles like quarks and electrons.</p>
	</div>
	<div class="p-5 bg-gray-950/40 border border-gray-800 rounded-lg">
	<h4 class="text-indigo-400 font-semibold mb-2 uppercase text-xs tracking-wider">Model B: Alternate Universes</h4>
	<p class="text-sm text-gray-400">A cosmic phase space containing entirely independent realities, operating under distinct physics variables, alternative constants, and unrelated origin states.</p>
	</div>
	</div>
	</div>
	</section>

	<section id="d7" class="dimension-section min-h-[60vh] flex flex-col justify-center border-l-2 border-dashed border-gray-800 pl-6 md:pl-12 transition-all duration-700 opacity-50 transform translate-y-10" data-dimension="7">
	<div class="max-w-2xl">
	<div class="text-6xl md:text-8xl font-bold text-white title-font tracking-tighter opacity-20 mb-2">7D</div>
	<h2 class="text-2xl md:text-4xl font-semibold text-white mb-4">The Absolute Singularity</h2>
	<p class="text-gray-400 leading-relaxed mb-4">
	The total encapsulation of all dimensions, coordinates, timelines, realities, variables, voids, and non-spaces.
	</p>
	<div class="p-6 bg-gradient-to-br from-indigo-950/50 to-purple-950/50 border border-indigo-500/30 rounded-xl">
	<p class="text-sm text-indigo-200">
	In theoretical modeling, treating the entire multiverse continuum as a single point means there is nothing further left to categorize. Every constant, void, or paradox folds into this terminal metric, making higher steps functionally redundant.
	</p>
	</div>
	</div>
	</section>

	</main>

	<footer class="text-center py-10 border-t border-gray-900 text-xs text-gray-600 relative z-10">
	The Geometry of Existence Study Matrix • Built for Immersive Exploration
	</footer>

	<script>
	const canvas = document.getElementById('dimensionCanvas');
	const ctx = canvas.getContext('2d');
	let currentDimension = 0;
	let globalRotation = 0;

	// Resize Canvas to fit screen
	function resizeCanvas() {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	}
	window.addEventListener('resize', resizeCanvas);
	resizeCanvas();

	// High-performance animation rendering loop
	function drawBackdrop() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.save();
	ctx.translate(canvas.width / 2, canvas.height / 2);

	globalRotation += 0.002;
	ctx.rotate(globalRotation);

	const centerX = 0;
	const centerY = 0;
	const accentColor = 'rgba(34, 211, 238, 0.4)'; // Cyan
	const secondaryColor = 'rgba(99, 102, 241, 0.3)'; // Indigo

	ctx.lineWidth = 1;

	switch(parseInt(currentDimension)) {
	case 0: // 0D: Simple, pulsing single coordinates point
	let pulse = Math.abs(Math.sin(Date.now() * 0.003)) * 6 + 2;
	ctx.fillStyle = '#22d3ee';
	ctx.shadowBlur = 15;
	ctx.shadowColor = '#22d3ee';
	ctx.beginPath();
	ctx.arc(centerX, centerY, pulse, 0, Math.PI * 2);
	ctx.fill();
	break;

	case 1: // 1D: A singular, infinite line vector across space
	ctx.strokeStyle = accentColor;
	ctx.shadowBlur = 0;
	ctx.beginPath();
	ctx.moveTo(-canvas.width, 0);
	ctx.lineTo(canvas.width, 0);
	ctx.stroke();
	break;

	case 2: // 2D: Geometries expanding symmetrically across an area
	ctx.strokeStyle = accentColor;
	ctx.beginPath();
	for(let i = 0; i < 4; i++) {
	ctx.rotate(Math.PI / 2);
	ctx.strokeRect(-100, -100, 200, 200);
	}
	break;

	case 3: // 3D: A rotating isometric wireframe cube structure
	ctx.strokeStyle = accentColor;
	let size = 120;
	ctx.save();
	ctx.rotate(globalRotation * 2);
	// Front face
	ctx.strokeRect(-size/2, -size/2, size, size);
	// Back face imitation
	ctx.strokeStyle = secondaryColor;
	ctx.strokeRect(-size/3, -size/3, size, size);
	// Connections
	ctx.beginPath();
	ctx.moveTo(-size/2, -size/2); ctx.lineTo(-size/3, -size/3);
	ctx.moveTo(size/2, -size/2); ctx.lineTo(size/3, -size/3);
	ctx.moveTo(-size/2, size/2); ctx.lineTo(-size/3, size/3);
	ctx.moveTo(size/2, size/2); ctx.lineTo(size/3, size/3);
	ctx.stroke();
	ctx.restore();
	break;

	case 4: // 4D: Concentric geometric frames shifting across each other
	ctx.strokeStyle = accentColor;
	ctx.save();
	ctx.rotate(-globalRotation);
	for(let r = 40; r <= 160; r += 40) {
	ctx.beginPath();
	ctx.arc(centerX, centerY, r + (Math.sin(Date.now()0.002)10), 0, Math.PI*2);
	ctx.stroke();
	}
	ctx.restore();
	break;

	case 5: // 5D: Branching data arrays mimicking multiple paths
	ctx.strokeStyle = secondaryColor;
	ctx.beginPath();
	for(let angle = 0; angle < Math.PI * 2; angle += Math.PI / 6) {
	let length = 180 + Math.sin(Date.now() * 0.005 + angle) * 30;
	ctx.moveTo(0, 0);
	ctx.lineTo(Math.cos(angle) * length, Math.sin(angle) * length);
	}
	ctx.stroke();
	break;

	case 6: // 6D: A complex overlapping mesh pattern
	ctx.strokeStyle = accentColor;
	for(let k = 0; k < 6; k++) {
	ctx.beginPath();
	ctx.ellipse(0, 0, 80, 220, (Math.PI / 3) * k + globalRotation, 0, Math.PI * 2);
	ctx.stroke();
	}
	break;

	case 7: // 7D: Dense harmonic particle array representing everything
	ctx.fillStyle = '#c084fc';
	let dots = 40;
	for(let d = 0; d < dots; d++) {
	let distance = (d * 6) + 10;
	let theta = d * 0.4 + globalRotation;
	let px = Math.cos(theta) * distance;
	let py = Math.sin(theta) * distance;
	ctx.beginPath();
	ctx.arc(px, py, 1.5, 0, Math.PI * 2);
	ctx.fill();
	}
	break;
	}

	ctx.restore();
	requestAnimationFrame(drawBackdrop);
	}

	// Start loops
	requestAnimationFrame(drawBackdrop);

	// Scroll monitoring utilizing Intersection Observer APIs
	const sections = document.querySelectorAll('.dimension-section');
	const navDots = document.querySelectorAll('.nav-dot');

	const observerOptions = {
	root: null,
	rootMargin: '-30% 0px -40% 0px',
	threshold: 0.1
	};

	const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	// Update canvas target dimension layer
	currentDimension = entry.target.getAttribute('data-dimension');

	// Trigger visual fade-in text animations
	entry.target.classList.remove('opacity-50', 'translate-y-10');
	entry.target.classList.add('opacity-100', 'translate-y-0');

	// Synchronize pagination index dot highlights
	let index = Array.from(sections).indexOf(entry.target);
	navDots.forEach((dot, dIdx) => {
	if(dIdx === index + 1) { // Offset by 1 to accommodate hero home index
	dot.classList.add('bg-cyan-400', 'scale-125');
	dot.classList.remove('bg-white/20');
	} else {
	dot.classList.remove('bg-cyan-400', 'scale-125');
	dot.classList.add('bg-white/20');
	}
	});
	}
	});
	}, observerOptions);

	sections.forEach(section => observer.observe(section));

	// Direct handling for home dot state tracking
	window.addEventListener('scroll', () => {
	if (window.scrollY < window.innerHeight / 2) {
	currentDimension = 0;
	navDots.forEach((dot, dIdx) => {
	if(dIdx === 0) {
	dot.classList.add('bg-cyan-400', 'scale-125');
	} else {
	dot.classList.remove('bg-cyan-400', 'scale-125');
	}
	});
	}
	});
	</script>
	<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v833ccba57c9e4d2798f2e76cebdd09a11778172276447" integrity="sha512-57MDmcccJXYtNnH+ZiBwzC4jb2rvgVCEokYN+L/nLlmO8rfYT/gIpW2A569iJ/3b+0UEasghjuZH/ma3wIs/EQ==" data-cf-beacon='{"version":"2024.11.0","token":"83303c269f8646ea9029f09bb7d29b2b","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
	</body>
	</html>
No results found