From 93408a5dc04ab0d13290d3a0b2b02b7e0d73de7a Mon Sep 17 00:00:00 2001
From: avi <hahamailme@proton.me>
Date: Wed, 6 May 2026 15:51:31 -0500
Subject: [PATCH] Initial save point: Scene 1 complete - Matrix rain, CRT
 flicker, typewriter text, FOLLOW THEM button

---
 .gitignore |  13 +++
 index.html | 303 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 316 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 index.html
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..5257dc2
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,13 @@
+# OS metadata
+.DS_Store
+Thumbs.db
+
+# Editor configs
+.vscode/
+.idea/
+
+# Future build artifacts
+node_modules/
+dist/
+*.tmp
+*.log
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1184745
--- /dev/null
+++ b/index.html
@@ -0,0 +1,303 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Signal Elsewhere</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            background-color: #000;
+            overflow: hidden;
+            font-family: 'Courier New', monospace;
+        }
+
+        #matrixCanvas {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            z-index: 1;
+            opacity: 1;
+            transition: opacity 1s ease;
+        }
+
+        #textContainer {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 2;
+            text-align: center;
+            font-size: 1.2rem;
+            line-height: 2;
+            visibility: hidden;
+            color: #00ff00;
+        }
+
+        .typewriter-line {
+            visibility: hidden;
+            white-space: nowrap;
+            margin: 0.5rem 0;
+        }
+
+        #followBtn {
+            position: fixed;
+            bottom: 5%;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 3;
+            padding: 1rem 3rem;
+            font-size: 1.1rem;
+            background-color: #001100;
+            color: #00ff00;
+            border: 2px solid #00ff00;
+            cursor: pointer;
+            visibility: hidden;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.5s ease, background-color 0.2s ease;
+            font-family: 'Courier New', monospace;
+            letter-spacing: 2px;
+        }
+
+        #followBtn:hover {
+            background-color: #003300;
+        }
+
+        .scene {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            z-index: 4;
+            background-color: #000;
+            color: #00ff00;
+            display: none;
+            justify-content: center;
+            align-items: center;
+            font-family: 'Courier New', monospace;
+            font-size: 1.2rem;
+            text-align: center;
+            padding: 2rem;
+            opacity: 0;
+            transition: opacity 1s ease;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="matrixCanvas"></canvas>
+    
+    <div id="textContainer">
+        <div class="typewriter-line" id="line1"></div>
+        <div class="typewriter-line" id="line2"></div>
+        <div class="typewriter-line" id="line3"></div>
+    </div>
+    
+    <button id="followBtn">FOLLOW THEM</button>
+    
+    <div id="scene2" class="scene"></div>
+
+    <script>
+        // Canvas setup for Matrix rain
+        const canvas = document.getElementById('matrixCanvas');
+        const ctx = canvas.getContext('2d');
+        
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        resizeCanvas();
+        window.addEventListener('resize', resizeCanvas);
+
+        // Matrix rain configuration
+        const fontSize = 14;
+        let columns = Math.floor(canvas.width / fontSize);
+        let drops = [];
+        const chars = '0123456789@#$%^&*()';
+        const rainDuration = 8000; // 8 seconds
+        let rainActive = false;
+        let rainStartTime = null;
+
+        // CRT flicker effect
+        function crtFlicker() {
+            let flickerCount = 0;
+            const maxFlickers = 3;
+            const flickerInterval = setInterval(() => {
+                ctx.fillStyle = flickerCount % 2 === 0 ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 1)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                flickerCount++;
+                if (flickerCount >= maxFlickers * 2) {
+                    clearInterval(flickerInterval);
+                    ctx.fillStyle = '#000';
+                    ctx.fillRect(0, 0, canvas.width, canvas.height);
+                    startMatrixRain();
+                }
+            }, 100);
+        }
+
+        // Start Matrix rain animation
+        function startMatrixRain() {
+            rainActive = true;
+            rainStartTime = Date.now();
+            columns = Math.floor(canvas.width / fontSize);
+            drops = Array(columns).fill(0).map(() => Math.floor(Math.random() * canvas.height / fontSize));
+            drawMatrix();
+        }
+
+        // Draw Matrix rain frame
+        function drawMatrix() {
+            if (!rainActive) return;
+
+            // Create trail effect
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = '#00ff00';
+            ctx.font = `${fontSize}px 'Courier New', monospace`;
+
+            for (let i = 0; i < columns; i++) {
+                const x = i * fontSize;
+                const y = drops[i] * fontSize;
+
+                // Chance to render "484" as a horizontal string in this column
+                if (Math.random() < 0.003) {
+                    ctx.fillText('484', x, y);
+                } else {
+                    const text = chars[Math.floor(Math.random() * chars.length)];
+                    ctx.fillText(text, x, y);
+                }
+
+                // Reset drop when it goes off screen
+                if (y > canvas.height && Math.random() > 0.975) {
+                    drops[i] = 0;
+                }
+                drops[i] += 0.5;
+            }
+
+            // End rain after duration
+            if (Date.now() - rainStartTime > rainDuration) {
+                fadeRainToBackground();
+                rainActive = false;
+            } else {
+                requestAnimationFrame(drawMatrix);
+            }
+        }
+
+        // Fade rain to background
+        function fadeRainToBackground() {
+            const canvasElem = document.getElementById('matrixCanvas');
+            let opacity = 1;
+            const fadeInterval = setInterval(() => {
+                opacity -= 0.02;
+                if (opacity <= 0.15) {
+                    opacity = 0.15;
+                    clearInterval(fadeInterval);
+                    document.getElementById('textContainer').style.visibility = 'visible';
+                    typewriter();
+                }
+                canvasElem.style.opacity = opacity;
+            }, 16);
+        }
+
+        // Typewriter text effect
+        const lines = [
+            "YOU ARE NOT IMAGINING THINGS",
+            "THE SYNCHRONICITIES YOU ARE EXPERIENCING HAVE ALWAYS BEEN THERE",
+            "THE ONLY THING THAT HAS CHANGED IS YOUR AWARENESS OF THEM"
+        ];
+        let currentLine = 0;
+        let currentChar = 0;
+
+        function typewriter() {
+            if (currentLine >= lines.length) {
+                showButton();
+                return;
+            }
+
+            const lineElem = document.getElementById(`line${currentLine + 1}`);
+            lineElem.style.visibility = 'visible';
+            const lineText = lines[currentLine];
+
+            if (currentChar < lineText.length) {
+                lineElem.textContent += lineText[currentChar];
+                currentChar++;
+                setTimeout(typewriter, 60);
+            } else {
+                currentLine++;
+                currentChar = 0;
+                setTimeout(typewriter, 500);
+            }
+        }
+
+        // Show "FOLLOW THEM" button
+        function showButton() {
+            const btn = document.getElementById('followBtn');
+            btn.style.visibility = 'visible';
+            let opacity = 0;
+            const fadeIn = setInterval(() => {
+                opacity += 0.05;
+                if (opacity >= 1) {
+                    opacity = 1;
+                    clearInterval(fadeIn);
+                    btn.style.pointerEvents = 'auto';
+                }
+                btn.style.opacity = opacity;
+            }, 30);
+        }
+
+        // Scene transition functions
+        function transitionToScene2() {
+            const canvas = document.getElementById('matrixCanvas');
+            const textContainer = document.getElementById('textContainer');
+            const btn = document.getElementById('followBtn');
+            const scene2 = document.getElementById('scene2');
+
+            let opacity = 1;
+            const fadeOut = setInterval(() => {
+                opacity -= 0.05;
+                if (opacity <= 0) {
+                    opacity = 0;
+                    clearInterval(fadeOut);
+                    canvas.style.display = 'none';
+                    textContainer.style.display = 'none';
+                    btn.style.display = 'none';
+                    loadScene2(scene2);
+                }
+                canvas.style.opacity = opacity;
+                textContainer.style.opacity = opacity;
+                btn.style.opacity = opacity;
+            }, 30);
+        }
+
+        // Placeholder for Scene 2 (to be expanded later)
+        function loadScene2(sceneElem) {
+            sceneElem.innerHTML = '<p>The signal grows stronger. The path reveals itself...</p>';
+            sceneElem.style.display = 'flex';
+            let opacity = 0;
+            const fadeIn = setInterval(() => {
+                opacity += 0.05;
+                if (opacity >= 1) {
+                    opacity = 1;
+                    clearInterval(fadeIn);
+                }
+                sceneElem.style.opacity = opacity;
+            }, 30);
+        }
+
+        // Initialize on load
+        window.addEventListener('load', () => {
+            setTimeout(crtFlicker, 1500);
+        });
+
+        // Button click handler
+        document.getElementById('followBtn').addEventListener('click', transitionToScene2);
+    </script>
+</body>
+</html>
