1
0

Save point: Buttons renamed to CREATOR/BUILDER/DEVELOPER, WHERE DO YOU FIT IN? fades in split second after buttons

This commit is contained in:
avi
2026-05-09 21:07:10 -05:00
parent 7d248f5f13
commit 0c5d119bb0

View File

@@ -169,6 +169,18 @@
transform: translateX(-50%); transform: translateX(-50%);
} }
#scene3FitInText {
position: absolute;
bottom: 42%;
left: 50%;
transform: translateX(-50%);
font-size: 1.2rem;
color: #00ff00;
opacity: 0;
visibility: hidden;
transition: opacity 1s ease;
}
#scene2Lines { #scene2Lines {
display: none; display: none;
flex-direction: column; flex-direction: column;
@@ -311,9 +323,10 @@
<span id="scene3RecruitText4"></span> <span id="scene3RecruitText4"></span>
</div> </div>
</div> </div>
<button id="creatorBtn" class="choiceBtn">CREATORS</button> <div id="scene3FitInText"></div>
<button id="builderBtn" class="choiceBtn">BUILDERS</button> <button id="creatorBtn" class="choiceBtn">CREATOR</button>
<button id="developerBtn" class="choiceBtn">DEVELOPERS</button> <button id="builderBtn" class="choiceBtn">BUILDER</button>
<button id="developerBtn" class="choiceBtn">DEVELOPER</button>
</div> </div>
<div id="sceneCreator" class="scene"> <div id="sceneCreator" class="scene">
@@ -754,20 +767,34 @@
blinkCursor(cursor, 3, () => { blinkCursor(cursor, 3, () => {
typeCalmly(rt1, "THE LAB IS CONNECTING WITH PEOPLE WHO SEE WHAT'S HAPPENING — WHO KNOW CHANGE ISN'T OPTIONAL ANYMORE. WE'RE LOOKING FOR THOSE READY TO STEP IN AND SHAPE THE FUTURE.", () => { typeCalmly(rt1, "THE LAB IS CONNECTING WITH PEOPLE WHO SEE WHAT'S HAPPENING — WHO KNOW CHANGE ISN'T OPTIONAL ANYMORE. WE'RE LOOKING FOR THOSE READY TO STEP IN AND SHAPE THE FUTURE.", () => {
setTimeout(() => { setTimeout(() => {
choiceBtns.forEach(btn => { choiceBtns.forEach(btn => {
btn.style.display = 'block'; btn.style.display = 'block';
btn.style.visibility = 'visible'; btn.style.visibility = 'visible';
let btnOpacity = 0; let btnOpacity = 0;
const btnFadeIn = setInterval(() => { const btnFadeIn = setInterval(() => {
btnOpacity += 0.02; btnOpacity += 0.02;
if (btnOpacity >= 1) { if (btnOpacity >= 1) {
btnOpacity = 1; btnOpacity = 1;
clearInterval(btnFadeIn); clearInterval(btnFadeIn);
btn.style.pointerEvents = 'auto'; btn.style.pointerEvents = 'auto';
} }
btn.style.opacity = btnOpacity; btn.style.opacity = btnOpacity;
}, 30); }, 30);
}); });
setTimeout(() => {
const fitInText = document.getElementById('scene3FitInText');
fitInText.textContent = 'WHERE DO YOU FIT IN?';
fitInText.style.visibility = 'visible';
let fiOpacity = 0;
const fiFadeIn = setInterval(() => {
fiOpacity += 0.05;
if (fiOpacity >= 1) {
fiOpacity = 1;
clearInterval(fiFadeIn);
}
fitInText.style.opacity = fiOpacity;
}, 30);
}, 500);
}, 3000); }, 3000);
}, 20, 50); }, 20, 50);
}); });
@@ -852,6 +879,10 @@
btn.style.opacity = '1'; btn.style.opacity = '1';
btn.style.pointerEvents = 'auto'; btn.style.pointerEvents = 'auto';
}); });
const fitInText = document.getElementById('scene3FitInText');
fitInText.textContent = 'WHERE DO YOU FIT IN?';
fitInText.style.visibility = 'visible';
fitInText.style.opacity = '1';
} }
} }