diff --git a/index.html b/index.html
index a6f0efb..5c2d2fc 100644
--- a/index.html
+++ b/index.html
@@ -160,6 +160,52 @@
transform: translateX(-50%);
}
+ #scene2Line {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 2rem;
+ line-height: 1.8;
+ color: #00ff00;
+ visibility: hidden;
+ padding: 2rem;
+ text-align: center;
+ }
+
+ #scene2Cursor {
+ display: none;
+ width: 10px;
+ height: 1.4em;
+ background-color: #00ff00;
+ margin-left: 4px;
+ flex-shrink: 0;
+ opacity: 1;
+ }
+
+ #whatIsLabBtn {
+ 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;
+ }
+
+ #whatIsLabBtn:hover {
+ background-color: #003300;
+ }
+
#scene3Title {
position: absolute;
top: 2rem;
@@ -199,6 +245,11 @@
+
+
+
+
+
@@ -447,11 +498,11 @@
}
// Scene transition functions
- function transitionToScene3() {
+ function transitionToScene2() {
const canvas = document.getElementById('matrixCanvas');
const textContainer = document.getElementById('textContainer');
const btn = document.getElementById('followBtn');
- const scene3 = document.getElementById('scene3');
+ const scene2 = document.getElementById('scene2');
let opacity = 1;
const fadeOut = setInterval(() => {
@@ -462,7 +513,7 @@
canvas.style.display = 'none';
textContainer.style.display = 'none';
btn.style.display = 'none';
- loadScene3(scene3);
+ loadScene2(scene2);
}
canvas.style.opacity = opacity;
textContainer.style.opacity = opacity;
@@ -470,15 +521,79 @@
}, 30);
}
- // Scene 2 loader (no longer used - buttons moved to Scene 3)
+ // Scene 2 loader: calm typing sequence
+ function blinkCursor(cursor, times, callback) {
+ cursor.style.display = 'inline-block';
+ cursor.style.opacity = '1';
+ let count = 0;
+ let visible = true;
+ const interval = setInterval(() => {
+ visible = !visible;
+ cursor.style.opacity = visible ? '1' : '0';
+ count++;
+ if (count >= times * 2) {
+ clearInterval(interval);
+ cursor.style.display = 'none';
+ callback && callback();
+ }
+ }, 500);
+ }
+
+ function typeCalmly(elem, text, callback) {
+ let i = 0;
+ const total = text.length;
+
+ function typeChar() {
+ if (i >= total) {
+ callback && callback();
+ return;
+ }
+ elem.textContent += text[i];
+ i++;
+ const progress = i / total;
+ const delay = 70 + progress * progress * 130;
+ setTimeout(typeChar, delay);
+ }
+ typeChar();
+ }
+
function loadScene2(sceneElem) {
sceneElem.style.display = 'flex';
+ const line = document.getElementById('scene2Line');
+ const message = document.getElementById('scene2Message');
+ const cursor = document.getElementById('scene2Cursor');
+ const btn = document.getElementById('whatIsLabBtn');
+
let opacity = 0;
const fadeIn = setInterval(() => {
opacity += 0.05;
if (opacity >= 1) {
opacity = 1;
clearInterval(fadeIn);
+
+ line.style.visibility = 'visible';
+
+ blinkCursor(cursor, 5, () => {
+ typeCalmly(message, "...AND THAT AWARENESS HAS LED YOU HERE...", () => {
+ blinkCursor(cursor, 3, () => {
+ typeCalmly(message, " TO LAB 484", () => {
+ setTimeout(() => {
+ btn.style.visibility = 'visible';
+ let btnOpacity = 0;
+ const btnFadeIn = setInterval(() => {
+ btnOpacity += 0.05;
+ if (btnOpacity >= 1) {
+ btnOpacity = 1;
+ clearInterval(btnFadeIn);
+ btn.style.pointerEvents = 'auto';
+ }
+ btn.style.opacity = btnOpacity;
+ }, 30);
+ }, 3000);
+ });
+ });
+ });
+ });
}
sceneElem.style.opacity = opacity;
}, 30);
@@ -628,7 +743,7 @@
});
// Button click handlers
- document.getElementById('followBtn').addEventListener('click', transitionToScene3);
+ document.getElementById('followBtn').addEventListener('click', transitionToScene2);
document.getElementById('creatorBtn').addEventListener('click', () => {
transitionToScene('scene3', loadSceneCreator, 'sceneCreator');
});
@@ -638,6 +753,9 @@
document.getElementById('developerBtn').addEventListener('click', () => {
transitionToScene('scene3', loadSceneDeveloper, 'sceneDeveloper');
});
+ document.getElementById('whatIsLabBtn').addEventListener('click', () => {
+ transitionToScene('scene2', loadScene3, 'scene3');
+ });
@@ -654,6 +772,19 @@
skipScene1();
}
+ // Scene 2 skip (calm typing)
+ const scene2 = document.getElementById('scene2');
+ const s2Cursor = document.getElementById('scene2Cursor');
+ const s2Message = document.getElementById('scene2Message');
+ const s2Btn = document.getElementById('whatIsLabBtn');
+ if (scene2.style.display === 'flex' && s2Btn.style.visibility !== 'visible') {
+ s2Cursor.style.display = 'none';
+ s2Message.textContent = '...AND THAT AWARENESS HAS LED YOU HERE... TO LAB 484';
+ s2Btn.style.visibility = 'visible';
+ s2Btn.style.opacity = '1';
+ s2Btn.style.pointerEvents = 'auto';
+ }
+
// Scene 3 skip (cursor blinking / I AM A... typing)
const scene3 = document.getElementById('scene3');
const cursor = document.getElementById('blinkCursor');
@@ -675,12 +806,12 @@
}
if (e.key === 'Delete') {
- // Fast-forward to Scene 3
+ // Fast-forward to Scene 2
document.getElementById('matrixCanvas').style.display = 'none';
document.getElementById('textContainer').style.display = 'none';
document.getElementById('followBtn').style.display = 'none';
- loadScene3(document.getElementById('scene3'));
+ loadScene2(document.getElementById('scene2'));
}
});