Text to HTML Presentation Animation

Problem

Turning a popular-science paragraph into a demo page with a large model often yields a loose structure, thin HTML, and CSS animations that stop replaying after slide changes. Content about OSI layers, network models, or deep-learning concepts needs hierarchy, flow, and comparison, not just static text. This skill turns text-to-demo generation into a controllable workflow for PPT-style HTML and a flat-UI flowchart restyle.

How it works

• Default PPT mode: build a more specific presentation prompt from the input, generate complete HTML, and inject animation-reset JS so slide changes retrigger CSS animations instead of relying on one-shot animation-fill-mode: forwards.
• Template restyling: the model reads SUMMARY.md, then selects a built-in PPT template based on content type, such as VS layouts for comparisons, step animations for flows, or red-pulse styles for warnings.
• Flowchart mode: when explicitly requested, restyle the existing AI_Animation.html into a flat-UI Animation template rather than generating new content.

Boundaries

It fits structured educational content: protocols, model architecture, experiments, and process steps. It is not aimed at live dashboards, external data visualization, or brand design systems. Output path and template path can be specified; the default output is AI_Animation.html on the desktop.