Meshstudios
MeshStudios, Reality Architects! Reality Architects! A creative software studio on a mission! Democratise on-demand custom software at a fair AI-era market price!
Modular Intro Sequence
Intro experiments to build the MeshStudios website!
š File Structure
modularization/
āāā index.html # Main HTML with module imports
āāā src/
ā āāā main.js # Timeline coordinator
ā āāā phases/
ā ā āāā phase1.js # 404 glitch sequence (LOCKED)
ā ā āāā phase2.js # Code rain + boot sequence
ā ā āāā phase3.js # Reality revelation
ā ā āāā ui-overlay.js # UI overlay system (optional)
ā āāā utils/
ā āāā glitch.js # Shared glitch functions
ā āāā audio.js # Audio helper functions
āāā README.md # This file
š Usage
Basic Usage
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
</head>
<body>
<!-- Your HTML structure -->
<script type="module" src="src/main.js"></script>
</body>
</html>
Phase 1 (LOCKED) - phase1.js
- Status: š LOCKED - DO NOT MODIFY
- Function: 404 glitch sequence
- Dependencies:
glitch.js,audio.js
Phase 2 - phase2.js
- Function: Code rain, boot sequence, water effects
- Features: Typing animation, code flood, canvas water ripples
- Dependencies: UI overlay callback (optional)
Phase 3 - phase3.js
- Function: Reality revelation sequence
- Features: Handles both CTA and skip button flows
- Effects: Text typing, glitch animations, wave effects
UI Overlay - ui-overlay.js
- Status: š Optional module
- Function: Animated UI panels during Phase 2
- Safety: Can be completely disabled without breaking phases
- Features: System panels, progress bars, animated canvases
Utilities
glitch.js: Shared glitch animations and text effectsaudio.js: Audio playback helpers with error handling
š”ļø Safety Features
Isolation
- Each phase is completely isolated in its own module
- Shared dependencies are cleanly injected via configuration
- UI overlay can be disabled without affecting core phases
Error Handling
- UI overlay gracefully handles missing DOM elements
- Audio playback fails silently if elements are missing
- Canvas operations include safety checks
Clean Transitions
- Phase 2 effects are properly cleaned up before Phase 3
- Animation frames are cancelled to prevent memory leaks
- Event listeners are removed during cleanup
