Magazine Animated HTML Slides

Problem

Many presentation tools force a tradeoff between dense slides and over-designed web components. 动画ppt targets single-person sharing sessions, internal talks, product demos, and demo days, producing a self-contained index.html that can be opened locally. It fixes layout, theme palette, navigation, and animation into a reusable template, reducing CSS and JS maintenance while preventing ad-hoc color changes from breaking the visual system.

How It Works

The skill starts by clarifying audience, duration, source material, images, theme preference, and hard constraints. If no outline exists, it drafts a narrative arc before creating slides. It then copies assets/template.html, selects one of five preset themes, and replaces the :root color variables as a whole block. Content is added from ten layout skeletons, such as cover, section intertitle, stat page, pipeline, comparison, and quote page. Motion is driven by Motion One through data-anim hooks; the template includes WebGL hero backgrounds, serif headings, sans-serif body text, monospace metadata, and Lucide icons. Before delivery, the workflow checks class-name existence, theme rhythm, and a checklist to avoid style fallbacks caused by missing classes like h-hero, stat-card, or pipeline.

Boundaries

It is best for stylized, single-author, offline web slides. It is not a fit for heavy tables, complex charts, frequent training decks, or collaborative editing. Images should live in a sibling images/ folder and use stable ratios; one deck should use one theme palette, not mixed variables.