An immersive, cinematic web experience that guides you through 10 interactive AI-powered portals — each one a unique destination of design, intelligence, and sound.
"In the digital expanse... there are echoes of creation.
Whispers of code that form worlds.
We have gathered ten such whispers.
Ten portals.
Turn the page... and step through."
- 📖 Page-turning storybook UI with smooth 3D transitions
- 🌐 10 linked portals to external AI projects
- 🎵 Synthetic glitch-style ambient music (Web Audio API)
- 🎙️ Audio controls for music and narration
- ✨ Glowing logo finale with particle effects
- 🎨 Beautiful animations and micro-interactions
- 📱 Fully responsive design for all devices
- ⌨️ Keyboard navigation and accessibility features
- 🔊 Synthetic audio fallbacks when files aren't available
| Portal | Description | Link |
|---|---|---|
| 1 | Referral Gateway | 🔗 |
| 2 | Premium Experience | 🔗 |
| 3 | AI Chat Interface | 🔗 |
| 4 | Lyric Visualizer | 🔗 |
| 5 | Entry Portal | 🔗 |
| 6 | Agent Epic | 🔗 |
| 7 | Machine Chat | 🔗 |
| 8 | Developer Forge | 🔗 |
| 9 | Epic 1 Genesis | 🔗 |
| 10 | Epic Music Generator | 🔗 |
portals-storybook/
├── index.html # Main interactive book
├── src/
│ ├── styles/
│ │ └── main.css # Visual design & animations
│ ├── scripts/
│ │ ├── main.js # Core page logic
│ │ ├── audio.js # Audio management
│ │ └── navigation.js # Navigation & accessibility
│ └── audio/ # Audio files (optional)
├── vercel.json # Vercel deployment config
└── README.md # This file
- Click anywhere or Spacebar: Turn page / Start experience
- Arrow Keys: Navigate between pages
- M: Toggle background music
- V: Toggle voiceover narration
- R: Restart experience
- Escape: Return to cover page
- Touch/Swipe: Mobile navigation support
The application includes a sophisticated audio system:
- Synthetic Background Music: Uses Web Audio API to create ambient glitch-style music
- Audio Controls: Toggle music and narration independently
- Graceful Fallbacks: Works perfectly even without audio files
- Page Turn Sounds: Synthetic sound effects for page transitions
- Volume Management: Optimized audio levels for the best experience
This project is ready for deployment on Vercel, Netlify, or any static hosting service.
- Push to GitHub
- Import to vercel.com
- Deploy automatically
- Clone the repository
- Open
index.htmlin a modern browser - Or serve with any static file server
Place audio files in src/audio/:
glitch-ambient.mp3: Background music loopnarration.mp3: Voiceover narrationpage-turn.mp3: Page turn sound effect
Edit the portal pages in index.html and update the data-url attributes to point to your own projects.
Customize the appearance by modifying src/styles/main.css. The design uses CSS custom properties for easy theming.
- Pure HTML/CSS/JavaScript - No frameworks required
- Web Audio API - Synthetic audio generation
- CSS 3D Transforms - Smooth page transitions
- Responsive Design - Works on all screen sizes
- Accessibility - ARIA labels, keyboard navigation, screen reader support
- Performance Optimized - Lazy loading, efficient animations
- Progressive Enhancement - Works without JavaScript (basic functionality)
MIT © 2025 EpicTech AI
Use it, remix it, build upon it.
- 🌐 epictech.ai
- 🧠 @Sm0k367
- 🎥 YouTube
- 🧵 X / Twitter
"These are but fragments of a larger design. A universe of possibility awaits."