# I Have a Dream – Interactive Audio Book An immersive, cinematic experience featuring Martin Luther King Jr.'s iconic "I Have a Dream" speech from August 28, 1963. ## Features - **16 Ultra-Realistic Pages**: High-contrast black-and-white photography with film grain effect - **Synchronized Audio**: Professional male baritone narration with auditorium reverb - **Interactive Navigation**: Horizontal scroll, touch/swipe support, keyboard controls - **Visual Effects**: Smooth transitions, text highlighting, cinematic animations - **Responsive Design**: Optimized for desktop and mobile devices - **Zero Dependencies**: Built with vanilla JavaScript for fast loading ## Technology Stack - **HTML5**: Semantic structure with audio elements - **CSS3**: Advanced animations, filters, and responsive design - **Vanilla JavaScript**: ES6+ with modern browser APIs - **Anime.js**: Smooth animations and transitions - **Splitting.js**: Text animation effects ## File Structure ``` dream-web/ ├── index.html # Main HTML file ├── css/ │ └── dream.css # Stylesheet with cinematic effects ├── js/ │ └── dream.js # Interactive functionality ├── assets/ │ ├── img/ │ │ ├── page-01.jpg # Lincoln Memorial crowd │ │ ├── page-02.jpg # Aerial demonstration view │ │ └── ... # 16 total black-and-white images │ └── audio/ │ ├── 01.mp3 # "I am happy to join with you today..." │ ├── 02.mp3 # "Five score years ago..." │ └── ... # 16 total narration clips └── README.md # This file ``` ## Usage ### Controls - **Play/Pause**: Click the play button or press Space/Enter - **Navigation**: Click navigation dots, use arrow keys, or swipe on mobile - **Mute**: Click the speaker button or press 'M' key - **Seek**: Click on the progress bar ### Keyboard Shortcuts - `Space` or `Enter`: Play/Pause - `←` / `→`: Previous/Next page - `M`: Mute/Unmute ### Touch Controls - **Swipe Left**: Next page - **Swipe Right**: Previous page - **Tap**: Play/Pause ## Visual Design ### Aesthetic - **Black & White Photography**: High contrast, 50mm lens perspective - **Film Grain Effect**: Authentic 1960s documentary feel - **Typography**: Crimson Text serif for elegant readability - **Minimal UI**: Controls fade in/out for immersive experience ### Effects - **Page Transitions**: Smooth slide animations - **Text Highlighting**: Synchronized with audio narration - **Loading Screen**: Cinematic introduction - **Grain Overlay**: Subtle film texture on all pages ## Audio Specifications - **Format**: MP3, 44.1 kHz, 128 kbps - **Voice**: Male baritone with MLK-style delivery - **Effects**: Auditorium reverb, professional processing - **Duration**: 15-25 seconds per clip - **Content**: Complete "I Have a Dream" speech segments ## Image Specifications - **Format**: JPG, high quality - **Resolution**: 1536×1024 (16:9 aspect ratio) - **Style**: Ultra-realistic black-and-white photography - **Processing**: High contrast, film grain, shallow DOF - **Perspective**: 50mm prime lens simulation ## Browser Compatibility - **Modern Browsers**: Chrome 80+, Firefox 75+, Safari 13+, Edge 80+ - **Mobile**: iOS Safari 13+, Chrome Mobile 80+ - **Features**: ES6+, CSS Grid, Flexbox, Web Audio API ## Performance Optimization - **Lazy Loading**: Images load as needed - **Preloading**: Audio files preload for smooth playback - **Responsive Images**: Optimized for different screen sizes - **Minimal Dependencies**: Fast loading with vanilla JS ## Installation & Deployment ### Local Development 1. Clone or download the project files 2. Start a local server: ```bash python -m http.server 8000 ``` 3. Open `http://localhost:8000` in your browser ### Production Deployment 1. Upload all files to your web server 2. Ensure proper MIME types for audio files 3. Configure HTTPS for optimal audio playback 4. Set up proper caching headers for assets ## Customization ### Adding Custom Audio 1. Generate professional narration using text-to-speech 2. Apply auditorium reverb and EQ processing 3. Export as MP3 with specifications above 4. Replace files in `assets/audio/` directory ### Modifying Images 1. Create black-and-white photographs matching the storyboard 2. Apply high contrast and film grain effects 3. Export as JPG with 16:9 aspect ratio 4. Replace files in `assets/img/` directory ### Styling Changes - Edit `css/dream.css` for visual modifications - Adjust animations in `js/dream.js` - Modify color schemes and typography ## Credits - **Speech**: Martin Luther King Jr., August 28, 1963 - **Design**: Interactive audio book experience - **Photography**: AI-generated historical scenes - **Audio**: Professional narration with effects ## License This project is created for educational and historical purposes. The speech content is in the public domain. Images and audio are generated for this specific use case. ## Support For technical issues or customization requests, refer to the documentation or contact the development team. --- *"I have a dream that one day this nation will rise up and live out the true meaning of its creed: We hold these truths to be self-evident, that all men are created equal."* - Martin Luther King Jr.