Skip to content

Enhanced Wormhole Integration with Layered Static, Fade Transitions, and Audio #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jonnysol merged 1 commit into from
Jul 13, 2025
Merged

Enhanced Wormhole Integration with Layered Static, Fade Transitions, and Audio #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion build_web.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,11 @@ def copy_assets(self):
shutil.copy2(src_wormhole, self.assets_dir / "wormhole.mp4")
print("✅ Copied wormhole.mp4")

src_wormhole_audio = Path("src/assets/sounds/wormhole.mp3")
if src_wormhole_audio.exists():
shutil.copy2(src_wormhole_audio, self.assets_dir / "sounds" / "wormhole.mp3")
print("✅ Copied wormhole.mp3")

# Copy sound effects
src_sounds = Path("src/assets/sounds")
if src_sounds.exists():
Expand Down Expand Up @@ -195,4 +200,4 @@ def build(self):

if __name__ == "__main__":
builder = WebBuilder()
builder.build()
builder.build()
Binary file added src/assets/sounds/wormhole.mp3
View file
Open in desktop
Binary file not shown.
110 changes: 102 additions & 8 deletions src/core/generator.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,14 +360,15 @@ def generate_css(self):
background: linear-gradient(145deg, #0a0a0a, #1a1a1a);
border: 3px solid #39ff14;
border-radius: 15px;
padding: 30px;
max-width: 600px;
max-height: 70vh;
padding: 25px;
max-width: 450px;
max-height: 65vh;
overflow-y: auto;
color: white;
text-align: center;
box-shadow:
0 0 40px rgba(57,255,20,0.4),
0 0 50px rgba(57,255,20,0.6),
0 0 100px rgba(57,255,20,0.3),
inset 0 0 20px rgba(57,255,20,0.1);
position: relative;
}}
Expand Down Expand Up @@ -506,13 +507,43 @@ def generate_css(self):
display: none;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}}

#wormhole-overlay.fade-in {{
opacity: 1;
}}

#wormhole-overlay.fade-out {{
opacity: 0;
}}

#wormhole-gif {{
width: 100vw;
height: 100vh;
object-fit: cover;
}}

/* TV Static overlay for wormhole transition */
#wormhole-static {{
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000000;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
mix-blend-mode: overlay;
}}

#wormhole-static img {{
width: 100vw;
height: 100vh;
object-fit: cover;
}}
'''

def generate_javascript(self):
Expand Down Expand Up @@ -1506,17 +1537,74 @@ def generate_javascript(self):
// Hide welcome banner
welcomeBannerOverlay.style.display = 'none';

// Show wormhole animation
// Show wormhole animation with fade-in
wormholeOverlay.style.display = 'flex';

// Play wormhole animation for 3 seconds then start main app
// Get wormhole video and audio elements
const wormholeVideo = document.getElementById('wormhole-gif');
const wormholeAudio = document.getElementById('wormhole-audio');
const wormholeStatic = document.getElementById('wormhole-static');

// Set video speed to 1.7x
wormholeVideo.playbackRate = 1.7;

// Start fade-in effect
setTimeout(() => {{
wormholeOverlay.classList.add('fade-in');
}}, 50);

// Play wormhole audio synchronized with video
if (wormholeAudio) {{
wormholeAudio.currentTime = 0;
wormholeAudio.volume = 0.6;
wormholeAudio.play();
}}

// Layer TV static over wormhole after 0.5 seconds
setTimeout(() => {{
if (wormholeStatic) {{
wormholeStatic.style.opacity = '0.4';
}}
}}, 500);

// Increase static intensity midway through
setTimeout(() => {{
if (wormholeStatic) {{
wormholeStatic.style.opacity = '0.7';
}}
}}, 1500);

// Start fade-out transition at 2.5 seconds
setTimeout(() => {{
wormholeOverlay.classList.remove('fade-in');
wormholeOverlay.classList.add('fade-out');

// Fade out static
if (wormholeStatic) {{
wormholeStatic.style.opacity = '0';
}}

// Fade out audio
if (wormholeAudio) {{
wormholeAudio.volume = 0.2;
}}
}}, 2500);

// Complete transition and start main app
setTimeout(() => {{
wormholeOverlay.style.display = 'none';
wormholeOverlay.classList.remove('fade-out');
bannerDismissed = true;

// Stop audio
if (wormholeAudio) {{
wormholeAudio.pause();
wormholeAudio.currentTime = 0;
}}

// Initialize the main TV functionality
initializeMainApp();
}}, 3000);
}}, 3500);
}}

function initializeMainApp() {{
Expand Down Expand Up @@ -1716,6 +1804,9 @@ def generate_html(self):
<!-- Wormhole Animation Overlay -->
<div id="wormhole-overlay">
<video id="wormhole-gif" src="src/assets/wormhole.mp4" autoplay muted loop></video>
<div id="wormhole-static">
<img draggable="false" src="src/assets/tvstatic.gif" alt="" width="100%" height="100%">
</div>
</div>

<!-- Audio Elements -->
Expand All @@ -1728,6 +1819,9 @@ def generate_html(self):
<audio id="click-reverb" preload="auto">
<source src="src/assets/sounds/click.mp3" type="audio/mp3">
</audio>
<audio id="wormhole-audio" preload="auto">
<source src="src/assets/sounds/wormhole.mp3" type="audio/mp3">
</audio>

<!-- Year Input Overlay -->
<div id="year-input-overlay"><div id="year-digits"></div></div>
Expand All @@ -1739,4 +1833,4 @@ def generate_html(self):
{self.generate_javascript()}
</script>
</body>
</html>'''
</html>'''
Loading