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

Save point: Scene 3 multi-line recruitment text - LIKE MINDED / BELIEVE / ARE YOU A...

Browse Source
This commit is contained in:
avi
2026-05-09 17:18:06 -05:00
parent ad3a3d08f4
commit 0407d9e8f7
1 changed files with 86 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
index.html
View File

@@ -91,27 +91,31 @@
transition: opacity 1s ease; transition: opacity 1s ease;
} }
#blinkCursor { #scene3RecruitLines {
display: none; display: none;
width: 8px; flex-direction: column;
height: 14px; align-items: flex-start;
background-color: #00ff00; width: 100%;
position: absolute; padding: 2rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 1;
} }
#scene2Text { .scene3RecruitLine {
color: #00ff00; display: none;
font-family: 'Courier New', monospace; flex-direction: row;
align-items: center;
font-size: 1.2rem; font-size: 1.2rem;
line-height: 2; line-height: 2;
text-align: center; color: #00ff00;
visibility: hidden; }
padding-top: 15vh;
margin-bottom: auto; #scene3RecruitCursor {
display: none;
width: 10px;
height: 1.4em;
background-color: #00ff00;
margin-left: 4px;
flex-shrink: 0;
opacity: 1;
} }
#scene2 { #scene2 {
@@ -287,8 +291,18 @@
<div id="scene3" class="scene"> <div id="scene3" class="scene">
<div id="scene3Title">LAB 484</div> <div id="scene3Title">LAB 484</div>
<div id="scene3Text"></div> <div id="scene3Text"></div>
<div id="scene2Text"></div> <div id="scene3RecruitLines">
<div id="blinkCursor"></div> <div id="scene3RecruitLine1" class="scene3RecruitLine">
<span id="scene3RecruitText1"></span>
<span id="scene3RecruitCursor"></span>
</div>
<div id="scene3RecruitLine2" class="scene3RecruitLine">
<span id="scene3RecruitText2"></span>
</div>
<div id="scene3RecruitLine3" class="scene3RecruitLine">
<span id="scene3RecruitText3"></span>
</div>
</div>
<button id="creatorBtn" class="choiceBtn">CREATOR</button> <button id="creatorBtn" class="choiceBtn">CREATOR</button>
<button id="builderBtn" class="choiceBtn">BUILDER</button> <button id="builderBtn" class="choiceBtn">BUILDER</button>
<button id="developerBtn" class="choiceBtn">DEVELOPER</button> <button id="developerBtn" class="choiceBtn">DEVELOPER</button>
@@ -696,13 +710,19 @@
}, 30); }, 30);
} }
// Scene 3 loader with recruitment text sequence and 3 choice buttons // Scene 3 loader with 3-line recruitment sequence and 3 choice buttons
function loadScene3(sceneElem) { function loadScene3(sceneElem) {
sceneElem.style.display = 'flex'; sceneElem.style.display = 'flex';
const title = document.getElementById('scene3Title'); const title = document.getElementById('scene3Title');
const textContainer = document.getElementById('scene3Text'); const textContainer = document.getElementById('scene3Text');
const iAmText = document.getElementById('scene2Text'); const recruitLines = document.getElementById('scene3RecruitLines');
const cursor = document.getElementById('blinkCursor'); const rl1 = document.getElementById('scene3RecruitLine1');
const rl2 = document.getElementById('scene3RecruitLine2');
const rl3 = document.getElementById('scene3RecruitLine3');
const rt1 = document.getElementById('scene3RecruitText1');
const rt2 = document.getElementById('scene3RecruitText2');
const rt3 = document.getElementById('scene3RecruitText3');
const cursor = document.getElementById('scene3RecruitCursor');
const creatorBtn = document.getElementById('creatorBtn'); const creatorBtn = document.getElementById('creatorBtn');
const builderBtn = document.getElementById('builderBtn'); const builderBtn = document.getElementById('builderBtn');
const developerBtn = document.getElementById('developerBtn'); const developerBtn = document.getElementById('developerBtn');
@@ -723,43 +743,37 @@
["LAB 484 IS AN INCUBATOR THAT HAS 11 DECENTRALIZED TECH STARTUPS UNDERNEATH IT"], ["LAB 484 IS AN INCUBATOR THAT HAS 11 DECENTRALIZED TECH STARTUPS UNDERNEATH IT"],
textContainer, textContainer,
() => { () => {
// After typewriter text finishes, wait 2 seconds then type recruitment text recruitLines.style.display = 'flex';
iAmText.textContent = '';
iAmText.style.visibility = 'visible';
setTimeout(() => { setTimeout(() => {
cursor.style.display = 'block'; rl1.style.display = 'flex';
cursor.style.opacity = '1';
let blinkCount = 0;
let isVisible = true;
const blinkInterval = setInterval(() => {
isVisible = !isVisible;
cursor.style.opacity = isVisible ? '1' : '0';
blinkCount++;
if (blinkCount >= 6) {
clearInterval(blinkInterval);
cursor.style.display = 'none';
typeCalmly(iAmText, "WE ARE LOOKING TO PARTNER WITH PEOPLE WHO ARE LIKE MINDED", () => { blinkCursor(cursor, 3, () => {
setTimeout(() => { typeCalmly(rt1, "THE LAB IS LOOKING TO PARTNER WITH PEOPLE WHO ARE LIKE MINDED", () => {
choiceBtns.forEach(btn => { rl2.style.display = 'flex';
btn.style.display = 'block'; typeCalmly(rt2, "WHO BELIEVE THE WORLD NEEDS TO CHANGE...", () => {
btn.style.visibility = 'visible'; rl3.style.display = 'flex';
let btnOpacity = 0; typeCalmly(rt3, "ARE YOU A...", () => {
const btnFadeIn = setInterval(() => { setTimeout(() => {
btnOpacity += 0.02; choiceBtns.forEach(btn => {
if (btnOpacity >= 1) { btn.style.display = 'block';
btnOpacity = 1; btn.style.visibility = 'visible';
clearInterval(btnFadeIn); let btnOpacity = 0;
btn.style.pointerEvents = 'auto'; const btnFadeIn = setInterval(() => {
} btnOpacity += 0.02;
btn.style.opacity = btnOpacity; if (btnOpacity >= 1) {
}, 30); btnOpacity = 1;
}); clearInterval(btnFadeIn);
}, 3000); btn.style.pointerEvents = 'auto';
}
btn.style.opacity = btnOpacity;
}, 30);
});
}, 3000);
});
}); });
} });
}, 500); });
}, 2000); }, 2000);
}, },
200 200
@@ -823,18 +837,28 @@
s2Btn.style.pointerEvents = 'auto'; s2Btn.style.pointerEvents = 'auto';
} }
// Scene 3 skip (typewriter / cursor / typing) // Scene 3 skip (recruit text typing)
const scene3 = document.getElementById('scene3'); const scene3 = document.getElementById('scene3');
const cursor = document.getElementById('blinkCursor'); const recruitLines = document.getElementById('scene3RecruitLines');
const iAmText = document.getElementById('scene2Text'); const rl1 = document.getElementById('scene3RecruitLine1');
const rl2 = document.getElementById('scene3RecruitLine2');
const rl3 = document.getElementById('scene3RecruitLine3');
const rt1 = document.getElementById('scene3RecruitText1');
const rt2 = document.getElementById('scene3RecruitText2');
const rt3 = document.getElementById('scene3RecruitText3');
const rCursor = document.getElementById('scene3RecruitCursor');
const creatorBtn = document.getElementById('creatorBtn'); const creatorBtn = document.getElementById('creatorBtn');
const builderBtn = document.getElementById('builderBtn'); const builderBtn = document.getElementById('builderBtn');
const developerBtn = document.getElementById('developerBtn'); const developerBtn = document.getElementById('developerBtn');
const fullText = "WE ARE LOOKING TO PARTNER WITH PEOPLE WHO ARE LIKE MINDED"; if (scene3.style.display === 'flex' && creatorBtn.style.visibility !== 'visible') {
if (scene3.style.display === 'flex' && (cursor.style.display === 'block' || (iAmText.textContent.length > 0 && iAmText.textContent.length < fullText.length))) { rCursor.style.display = 'none';
cursor.style.display = 'none'; recruitLines.style.display = 'flex';
iAmText.textContent = fullText; rl1.style.display = 'flex';
iAmText.style.visibility = 'visible'; rl2.style.display = 'flex';
rl3.style.display = 'flex';
rt1.textContent = "THE LAB IS LOOKING TO PARTNER WITH PEOPLE WHO ARE LIKE MINDED";
rt2.textContent = "WHO BELIEVE THE WORLD NEEDS TO CHANGE...";
rt3.textContent = "ARE YOU A...";
[creatorBtn, builderBtn, developerBtn].forEach(btn => { [creatorBtn, builderBtn, developerBtn].forEach(btn => {
btn.style.display = 'block'; btn.style.display = 'block';
btn.style.visibility = 'visible'; btn.style.visibility = 'visible';