Slides Generation

Slides Generation Mission

Generate a high-fidelity cinematic presentation as interactive HTML slides.

Deliverable

• Interactive slide deck with keyboard/click navigation (index.html + JS)
• NOT a video, NOT a static website — navigable slides

Architecture

1. Use the Dictionary-Based Builder Pattern (PROJECT_FILES dict)
2. BAN ALL f-strings — use string concatenation or .format() only
3. JSX double-brace syntax: style={{ color: 'red' }}
4. Modular structure: index.html (loader), js/slides.js (content), js/app.js (engine)
5. Load dependencies via CDN: React, ReactDOM, Babel (same pattern as website generation)

Slide Design Guidelines

• Each slide should be a full-viewport section with smooth transitions
• Use arrow keys and click for navigation
• Add a slide counter/progress indicator
• Support at least: title slides, content slides, image slides, split-layout slides
• Transitions: fade, slide-left, slide-right, zoom, or custom CSS animations
• Typography: large readable headings, clean body text, consistent spacing
• Color: cohesive palette with strong contrast for readability
• Add subtle entrance animations for text/images on each slide
• Include speaker notes support (toggleable with 'N' key)
• Responsive: adapt to different screen sizes