avi/signalelsewhere
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Save point: Scene 3 complete - Lab 484, pre-LEARN text updated, keyboard shortcuts (Escape/Delete)

Browse Source
This commit is contained in:
avi
2026-05-07 19:07:02 -05:00
parent 47c72c9890
commit aed9f6a64d
1 changed files with 184 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
index.html
View File

@@ -135,6 +135,46 @@
#learnBtn:hover {
background-color: #003300;
}
#scene3Title {
visibility: hidden;
font-size: 1.8rem;
margin-bottom: 2rem;
opacity: 0;
transform: scale(0.8);
transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}
#scene3Title.visible {
visibility: visible;
opacity: 1;
transform: scale(1);
}
#lab484Btn, #decentralizationBtn {
position: fixed;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
z-index: 5;
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;
display: none;
}
#lab484Btn:hover, #decentralizationBtn:hover {
background-color: #003300;
}
</style>
</head>
<body>
@@ -150,10 +190,17 @@
<div id="scene2" class="scene">
<div id="scene2Text"></div>
<button id="learnBtn">LEARN</button>
<button id="learnBtn">WHAT IS LAB 484?</button>
<div id="blinkCursor"></div>
</div>
<div id="scene3" class="scene">
<div id="scene3Title">YOU'RE AT LAB 484</div>
<div id="scene3Text"></div>
<button id="lab484Btn">LAB 484?</button>
<button id="decentralizationBtn">DECENTRALIZATION?</button>
</div>
<script>
// Testing shortcuts state
let skipAnimations = false;
@@ -183,7 +230,7 @@
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.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) {
@@ -209,10 +256,10 @@
if (!rainActive) return;
// Create trail effect
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
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`;
ctx.font = fontSize + 'px Courier New, monospace';
for (let i = 0; i < columns; i++) {
const x = i * fontSize;
@@ -259,8 +306,9 @@
}
// Reusable typewriter function with custom delays
// If endCharDelay is provided, speed accelerates from charDelay to endCharDelay
function typewriterLines(lines, targetElem, onComplete, charDelay = 60, lineDelay = 500, endCharDelay = null) {
function typewriterLines(lines, targetElem, onComplete, charDelay, lineDelay, endCharDelay) {
charDelay = charDelay || 60;
lineDelay = lineDelay || 500;
let currentLine = 0;
let currentChar = 0;
let totalChars = 0;
@@ -268,30 +316,31 @@
// Calculate total characters if using accelerating speed
if (endCharDelay !== null) {
totalChars = lines.reduce((sum, line) => sum + line.length, 0);
totalChars = 0;
for (let i = 0; i < lines.length; i++) {
totalChars += lines[i].length;
}
}
function getDelay() {
if (endCharDelay === null || totalChars === 0) return charDelay;
// Linear interpolation from charDelay to endCharDelay
const progress = charsTyped / totalChars;
return charDelay + (endCharDelay - charDelay) * progress;
}
function tick() {
if (skipAnimations) {
// Instantly show all remaining text
let remainingText = '';
for (let i = currentLine; i < lines.length; i++) {
remainingText += lines[i];
}
targetElem.textContent = remainingText;
onComplete?.();
onComplete && onComplete();
return;
}
if (currentLine >= lines.length) {
onComplete?.();
onComplete && onComplete();
return;
}
@@ -327,7 +376,7 @@
return;
}
const lineElem = document.getElementById(`line${scene1LineIndex + 1}`);
const lineElem = document.getElementById('line' + (scene1LineIndex + 1));
lineElem.style.visibility = 'visible';
const lineText = scene1lines[scene1LineIndex];
let charIndex = 0;
@@ -348,10 +397,8 @@
}
function skipScene1() {
// Clear all pending timeouts
scene1Timeouts.forEach(t => clearTimeout(t));
scene1Timeouts = [];
// Show all text instantly
document.getElementById('line1').textContent = scene1lines[0];
document.getElementById('line2').textContent = scene1lines[1];
document.getElementById('line3').textContent = scene1lines[2];
@@ -424,15 +471,14 @@
isVisible = !isVisible;
cursor.style.opacity = isVisible ? '1' : '0';
blinkCount++;
if (blinkCount >= 10) { // 5 complete cycles (on+off = 2 toggles per cycle)
if (blinkCount >= 10) {
clearInterval(blinkInterval);
cursor.style.display = 'none';
// Type the new pre-LEARN text - starts calm, accelerates to normal reading speed
// Type the pre-LEARN text - starts calm, accelerates to normal reading speed
typewriterLines(
[
"...AND THAT AWARENESS ISN'T JUST COINCIDENCE. YOU'RE SITTING IN FRONT OF THIS SCREEN AT THIS EXACT MOMENT IN TIME FOR A REASON.",
".....COULD THAT REASON BE THAT YOU NEED TO LEARN SOMETHING?"
"...AND THAT AWARENESS HAS LEAD YOU HERE. YOU ARE SITTING HERE AT LAB 484 , IN FRONT OF THE SCREEN, AT THIS EXACT MOMENT IN TIME FOR A REASON..."
],
textContainer,
() => {
@@ -449,12 +495,12 @@
learnBtn.style.opacity = btnOpacity;
}, 30);
},
120, // Start calm (120ms/char)
800, // Calm line delay
60 // Accelerate to normal reading speed (60ms/char)
120,
800,
60
);
}
}, 500); // 500ms on, 500ms off = 1 second per blink
}, 500);
}
sceneElem.style.opacity = opacity;
}, 30);
@@ -469,7 +515,6 @@
learnBtn.style.opacity = 0;
learnBtn.style.visibility = 'hidden';
// Clear previous text to prevent appending
textContainer.textContent = '';
typewriterLines(
@@ -479,13 +524,70 @@
],
textContainer,
() => {
// Placeholder for Scene 3
// Transition to Scene 3
const scene2 = document.getElementById('scene2');
const scene3 = document.getElementById('scene3');
let opacity = 1;
const fadeOut = setInterval(() => {
opacity -= 0.05;
if (opacity <= 0) {
opacity = 0;
clearInterval(fadeOut);
scene2.style.display = 'none';
loadScene3(scene3);
}
scene2.style.opacity = opacity;
}, 30);
},
30, // Fast char delay for anxious rhythm
200 // Fast line delay for anxious rhythm
30,
200
);
}
// Scene 3 loader
function loadScene3(sceneElem) {
sceneElem.style.display = 'flex';
const title = document.getElementById('scene3Title');
const textContainer = document.getElementById('scene3Text');
const lab484Btn = document.getElementById('lab484Btn');
let opacity = 0;
const fadeIn = setInterval(() => {
opacity += 0.05;
if (opacity >= 1) {
opacity = 1;
clearInterval(fadeIn);
// Show title with animation
setTimeout(() => {
title.classList.add('visible');
}, 300);
typewriterLines(
["ALL MATERIAL PROVISION FOR YOUR DIVINE LIFE PATH"],
textContainer,
() => {
lab484Btn.style.display = 'block';
lab484Btn.style.visibility = 'visible';
let btnOpacity = 0;
const btnFadeIn = setInterval(() => {
btnOpacity += 0.05;
if (btnOpacity >= 1) {
btnOpacity = 1;
clearInterval(btnFadeIn);
lab484Btn.style.pointerEvents = 'auto';
}
lab484Btn.style.opacity = btnOpacity;
}, 30);
},
120
);
}
sceneElem.style.opacity = opacity;
}, 30);
}
// Initialize on load
window.addEventListener('load', () => {
setTimeout(crtFlicker, 1500);
@@ -495,6 +597,60 @@
document.getElementById('followBtn').addEventListener('click', transitionToScene2);
document.getElementById('learnBtn').addEventListener('click', handleLearnClick);
// "LAB 484?" button click handler
document.getElementById('lab484Btn').addEventListener('click', function() {
const btn = document.getElementById('lab484Btn');
const textContainer = document.getElementById('scene3Text');
const decentralizationBtn = document.getElementById('decentralizationBtn');
btn.style.pointerEvents = 'none';
btn.style.opacity = 0;
btn.style.visibility = 'hidden';
textContainer.textContent = '';
typewriterLines(
["LAB 484 IS A DECENTRALIZED TECH INCUBATOR THAT CURRENTLY HAS 12 STARTUPS UNDERNEATH IT"],
textContainer,
() => {
decentralizationBtn.style.display = 'block';
decentralizationBtn.style.visibility = 'visible';
let btnOpacity = 0;
const btnFadeIn = setInterval(() => {
btnOpacity += 0.05;
if (btnOpacity >= 1) {
btnOpacity = 1;
clearInterval(btnFadeIn);
decentralizationBtn.style.pointerEvents = 'auto';
}
decentralizationBtn.style.opacity = btnOpacity;
}, 30);
},
60
);
});
// "DECENTRALIZATION?" button click handler
document.getElementById('decentralizationBtn').addEventListener('click', function() {
const btn = document.getElementById('decentralizationBtn');
const textContainer = document.getElementById('scene3Text');
btn.style.pointerEvents = 'none';
btn.style.opacity = 0;
btn.style.visibility = 'hidden';
textContainer.textContent = '';
typewriterLines(
["DECENTRALIZATION IS A SIGN — A NUDGE TO TRUST YOUR OWN PATH AND CONNECT DIRECTLY WITH OTHERS WHO FEEL THE SAME PULL."],
textContainer,
() => {
// Scene 3 complete - placeholder for Scene 4
},
120
);
});
// Keyboard shortcuts for testing
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
@@ -504,7 +660,6 @@
const textContainer = document.getElementById('textContainer');
const canvas = document.getElementById('matrixCanvas');
if (textContainer.style.visibility !== 'visible') {
// Skip rain, show Scene 1 text instantly
canvas.style.opacity = '0.15';
skipScene1();
}
@@ -514,9 +669,8 @@
const learnBtn = document.getElementById('learnBtn');
const cursor = document.getElementById('blinkCursor');
if (cursor.style.display === 'block') {
// Skip cursor, show pre-LEARN text + LEARN button
cursor.style.display = 'none';
scene2Text.textContent = "...AND THAT AWARENESS ISN'T JUST COINCIDENCE. YOU'RE SITTING IN FRONT OF THIS SCREEN AT THIS EXACT MOMENT IN TIME FOR A REASON.";
scene2Text.textContent = "...AND THAT AWARENESS HAS LEAD YOU HERE. YOU ARE SITTING HERE AT LAB 484 , IN FRONT OF THE SCREEN, AT THIS EXACT MOMENT IN TIME FOR A REASON...";
scene2Text.style.visibility = 'visible';
learnBtn.style.visibility = 'visible';
learnBtn.style.opacity = '1';
@@ -524,16 +678,12 @@
}
}
if (e.key === 'Backspace') {
e.preventDefault(); // Prevent browser back navigation
if (e.key === 'Delete') {
// Fast-forward to last scene (Scene 2 post-LEARN)
// Hide Scene 1 elements
document.getElementById('matrixCanvas').style.display = 'none';
document.getElementById('textContainer').style.display = 'none';
document.getElementById('followBtn').style.display = 'none';
// Show Scene 2 with post-LEARN text
const scene2 = document.getElementById('scene2');
const textContainer = document.getElementById('scene2Text');
const learnBtn = document.getElementById('learnBtn');
@@ -544,7 +694,6 @@
cursor.style.display = 'none';
learnBtn.style.display = 'none';
// Show post-LEARN text instantly
textContainer.textContent = "THE SIGNAL IS NOW RECEIVING. PREPARE FOR THE NEXT TRANSMISSION.";
textContainer.style.visibility = 'visible';
}