# PPTX-to-HTML Process Decks with 3D / Motion Overlays

Use this reference when a user wants an HTML presentation derived from an existing PowerPoint deck, especially when they ask to preserve the original CI/layout but add motion, interactivity, or 3D emphasis.

## Pattern

1. **Preserve the source deck visually first**
   - Render the relevant PPTX slide range to images/PDF.
   - Use the rendered slide images as the base layer in the HTML deck.
   - This keeps corporate identity, layout, typography, and detailed process graphics intact.
   - Do not redraw complex process diagrams unless the user explicitly wants a redesign.

2. **Add motion as an overlay, not a replacement**
   - Put process highlights, pulsing markers, route navigation, cards, and 3D effects above the original slide image.
   - Keep overlays semi-transparent and avoid hiding the actual flowchart text.
   - For process walkthroughs, add clickable step nodes that map to the original slide sequence.

3. **For process-heavy decks**
   - Treat each original process slide as a stage in a guided path.
   - Add a compact route bar such as `P1 → P2 → P3 → ...` near an unused edge, not across the core diagram.
   - Add one floating context card with the current step and a short speaker note.
   - Use pulsing highlights sparingly to indicate the active area.

4. **Add “presenter controls” separately from the deck canvas**
   - Side rail: slide numbers / quick navigation.
   - Right panel: phase, title, short note, next/previous buttons.
   - Shortcuts: left/right, full screen, overview, clean presenter mode, reduced motion/3D.
   - Provide a clean mode that hides UI panels for actual presenting.

5. **3D without external fragility**
   - Prefer CSS 3D transforms and Canvas/WebGL-like lightweight effects for portable single-file prototypes.
   - Avoid relying on external CDN libraries unless the user accepts network dependency.
   - A rotating canvas network/grid can provide depth without needing Three.js.

## QA checklist

- Open the local HTML in a browser.
- Check the JavaScript console: no errors.
- Inspect at least the title slide and one animated process slide visually.
- Verify route overlays do not cover essential flowchart text.
- Test keyboard navigation and at least one clickable process node / next button.
- Re-check after any overlay size/position adjustment.

## Pitfalls

- Do not over-redesign when the user asks to stay close to the original Vorlage/CI.
- Large route overlays can make process charts unreadable; shrink them and place them at the bottom or an unused edge.
- A deck can initially render off-screen if the app grid does not constrain height. Set fixed viewport height, `grid-template-rows: minmax(0, 1fr)`, and hide overflow.
- If embedding slide images as base64 in a single HTML file, also provide a `.zip` for easier delivery and portability.