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

215
index.html
View File

@@ -135,6 +135,46 @@
#learnBtn:hover { #learnBtn:hover {
background-color: #003300; 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> </style>
</head> </head>
<body> <body>
@@ -150,10 +190,17 @@
<div id="scene2" class="scene"> <div id="scene2" class="scene">
<div id="scene2Text"></div> <div id="scene2Text"></div>
<button id="learnBtn">LEARN</button> <button id="learnBtn">WHAT IS LAB 484?</button>
<div id="blinkCursor"></div> <div id="blinkCursor"></div>
</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> <script>
// Testing shortcuts state // Testing shortcuts state
let skipAnimations = false; let skipAnimations = false;
@@ -212,7 +259,7 @@
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.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#00ff00'; ctx.fillStyle = '#00ff00';
ctx.font = `${fontSize}px 'Courier New', monospace`; ctx.font = fontSize + 'px Courier New, monospace';
for (let i = 0; i < columns; i++) { for (let i = 0; i < columns; i++) {
const x = i * fontSize; const x = i * fontSize;
@@ -259,8 +306,9 @@
} }
// Reusable typewriter function with custom delays // Reusable typewriter function with custom delays
// If endCharDelay is provided, speed accelerates from charDelay to endCharDelay function typewriterLines(lines, targetElem, onComplete, charDelay, lineDelay, endCharDelay) {
function typewriterLines(lines, targetElem, onComplete, charDelay = 60, lineDelay = 500, endCharDelay = null) { charDelay = charDelay || 60;
lineDelay = lineDelay || 500;
let currentLine = 0; let currentLine = 0;
let currentChar = 0; let currentChar = 0;
let totalChars = 0; let totalChars = 0;
@@ -268,30 +316,31 @@
// Calculate total characters if using accelerating speed // Calculate total characters if using accelerating speed
if (endCharDelay !== null) { 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() { function getDelay() {
if (endCharDelay === null || totalChars === 0) return charDelay; if (endCharDelay === null || totalChars === 0) return charDelay;
// Linear interpolation from charDelay to endCharDelay
const progress = charsTyped / totalChars; const progress = charsTyped / totalChars;
return charDelay + (endCharDelay - charDelay) * progress; return charDelay + (endCharDelay - charDelay) * progress;
} }
function tick() { function tick() {
if (skipAnimations) { if (skipAnimations) {
// Instantly show all remaining text
let remainingText = ''; let remainingText = '';
for (let i = currentLine; i < lines.length; i++) { for (let i = currentLine; i < lines.length; i++) {
remainingText += lines[i]; remainingText += lines[i];
} }
targetElem.textContent = remainingText; targetElem.textContent = remainingText;
onComplete?.(); onComplete && onComplete();
return; return;
} }
if (currentLine >= lines.length) { if (currentLine >= lines.length) {
onComplete?.(); onComplete && onComplete();
return; return;
} }
@@ -327,7 +376,7 @@
return; return;
} }
const lineElem = document.getElementById(`line${scene1LineIndex + 1}`); const lineElem = document.getElementById('line' + (scene1LineIndex + 1));
lineElem.style.visibility = 'visible'; lineElem.style.visibility = 'visible';
const lineText = scene1lines[scene1LineIndex]; const lineText = scene1lines[scene1LineIndex];
let charIndex = 0; let charIndex = 0;
@@ -348,10 +397,8 @@
} }
function skipScene1() { function skipScene1() {
// Clear all pending timeouts
scene1Timeouts.forEach(t => clearTimeout(t)); scene1Timeouts.forEach(t => clearTimeout(t));
scene1Timeouts = []; scene1Timeouts = [];
// Show all text instantly
document.getElementById('line1').textContent = scene1lines[0]; document.getElementById('line1').textContent = scene1lines[0];
document.getElementById('line2').textContent = scene1lines[1]; document.getElementById('line2').textContent = scene1lines[1];
document.getElementById('line3').textContent = scene1lines[2]; document.getElementById('line3').textContent = scene1lines[2];
@@ -424,15 +471,14 @@
isVisible = !isVisible; isVisible = !isVisible;
cursor.style.opacity = isVisible ? '1' : '0'; cursor.style.opacity = isVisible ? '1' : '0';
blinkCount++; blinkCount++;
if (blinkCount >= 10) { // 5 complete cycles (on+off = 2 toggles per cycle) if (blinkCount >= 10) {
clearInterval(blinkInterval); clearInterval(blinkInterval);
cursor.style.display = 'none'; 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( 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.", "...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..."
".....COULD THAT REASON BE THAT YOU NEED TO LEARN SOMETHING?"
], ],
textContainer, textContainer,
() => { () => {
@@ -449,12 +495,12 @@
learnBtn.style.opacity = btnOpacity; learnBtn.style.opacity = btnOpacity;
}, 30); }, 30);
}, },
120, // Start calm (120ms/char) 120,
800, // Calm line delay 800,
60 // Accelerate to normal reading speed (60ms/char) 60
); );
} }
}, 500); // 500ms on, 500ms off = 1 second per blink }, 500);
} }
sceneElem.style.opacity = opacity; sceneElem.style.opacity = opacity;
}, 30); }, 30);
@@ -469,7 +515,6 @@
learnBtn.style.opacity = 0; learnBtn.style.opacity = 0;
learnBtn.style.visibility = 'hidden'; learnBtn.style.visibility = 'hidden';
// Clear previous text to prevent appending
textContainer.textContent = ''; textContainer.textContent = '';
typewriterLines( typewriterLines(
@@ -479,13 +524,70 @@
], ],
textContainer, 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 30,
200 // Fast line delay for anxious rhythm 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 // Initialize on load
window.addEventListener('load', () => { window.addEventListener('load', () => {
setTimeout(crtFlicker, 1500); setTimeout(crtFlicker, 1500);
@@ -495,6 +597,60 @@
document.getElementById('followBtn').addEventListener('click', transitionToScene2); document.getElementById('followBtn').addEventListener('click', transitionToScene2);
document.getElementById('learnBtn').addEventListener('click', handleLearnClick); 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 // Keyboard shortcuts for testing
document.addEventListener('keydown', (e) => { document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') { if (e.key === 'Escape') {
@@ -504,7 +660,6 @@
const textContainer = document.getElementById('textContainer'); const textContainer = document.getElementById('textContainer');
const canvas = document.getElementById('matrixCanvas'); const canvas = document.getElementById('matrixCanvas');
if (textContainer.style.visibility !== 'visible') { if (textContainer.style.visibility !== 'visible') {
// Skip rain, show Scene 1 text instantly
canvas.style.opacity = '0.15'; canvas.style.opacity = '0.15';
skipScene1(); skipScene1();
} }
@@ -514,9 +669,8 @@
const learnBtn = document.getElementById('learnBtn'); const learnBtn = document.getElementById('learnBtn');
const cursor = document.getElementById('blinkCursor'); const cursor = document.getElementById('blinkCursor');
if (cursor.style.display === 'block') { if (cursor.style.display === 'block') {
// Skip cursor, show pre-LEARN text + LEARN button
cursor.style.display = 'none'; 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'; scene2Text.style.visibility = 'visible';
learnBtn.style.visibility = 'visible'; learnBtn.style.visibility = 'visible';
learnBtn.style.opacity = '1'; learnBtn.style.opacity = '1';
@@ -524,16 +678,12 @@
} }
} }
if (e.key === 'Backspace') { if (e.key === 'Delete') {
e.preventDefault(); // Prevent browser back navigation
// Fast-forward to last scene (Scene 2 post-LEARN) // Fast-forward to last scene (Scene 2 post-LEARN)
// Hide Scene 1 elements
document.getElementById('matrixCanvas').style.display = 'none'; document.getElementById('matrixCanvas').style.display = 'none';
document.getElementById('textContainer').style.display = 'none'; document.getElementById('textContainer').style.display = 'none';
document.getElementById('followBtn').style.display = 'none'; document.getElementById('followBtn').style.display = 'none';
// Show Scene 2 with post-LEARN text
const scene2 = document.getElementById('scene2'); const scene2 = document.getElementById('scene2');
const textContainer = document.getElementById('scene2Text'); const textContainer = document.getElementById('scene2Text');
const learnBtn = document.getElementById('learnBtn'); const learnBtn = document.getElementById('learnBtn');
@@ -544,7 +694,6 @@
cursor.style.display = 'none'; cursor.style.display = 'none';
learnBtn.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.textContent = "THE SIGNAL IS NOW RECEIVING. PREPARE FOR THE NEXT TRANSMISSION.";
textContainer.style.visibility = 'visible'; textContainer.style.visibility = 'visible';
} }