html-ppt-skill

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

html-ppt-skill — HTML PPT Studio

html-ppt-skill — HTML演示文稿工作室

Skill by ara.so — Daily 2026 Skills collection.

A world-class AgentSkill for producing professional HTML presentations using 36 themes, 14 full-deck templates, 31 page layouts, and 47 animations (27 CSS + 20 canvas FX) — all pure static HTML/CSS/JS, zero build step.

由ara.so开发的Skill——Daily 2026技能合集。

一款世界级的AgentSkill，可使用36种主题、14套完整演示文稿模板、31种页面布局和47种动画效果（27种CSS动画 + 20种Canvas特效）制作专业HTML演示文稿——全部基于纯静态HTML/CSS/JS，无需任何构建步骤。

Install

安装

bash

undefined

bash

undefined

Register with your agent runtime

在你的Agent运行时中注册

npx skills add https://github.com/lewislulu/html-ppt-skill

Or clone directly

或者直接克隆

git clone https://github.com/lewislulu/html-ppt-skill

---

git clone https://github.com/lewislulu/html-ppt-skill

---

Scaffold a New Deck

搭建新演示文稿

bash

undefined

bash

undefined

Create a new deck from the base template

基于基础模板创建新演示文稿

./scripts/new-deck.sh my-talk

Output: examples/my-talk/index.html (ready to edit)

输出结果：examples/my-talk/index.html（可直接编辑）

---

---

Project Structure (Key Paths)

项目结构（关键路径）

html-ppt-skill/
├── assets/
│   ├── base.css                  # shared tokens + primitives
│   ├── runtime.js                # keyboard nav + presenter + overview
│   ├── themes/*.css              # 36 theme token files
│   └── animations/
│       ├── animations.css        # 27 named CSS animations
│       ├── fx-runtime.js         # auto-init [data-fx] on slide enter
│       └── fx/*.js               # 20 canvas FX modules
├── templates/
│   ├── deck.html                 # minimal starter
│   ├── theme-showcase.html       # all 36 themes (iframe-isolated)
│   ├── layout-showcase.html      # all 31 layouts
│   ├── animation-showcase.html   # 47 animation slides
│   ├── full-decks-index.html     # 14-deck gallery
│   ├── full-decks/<name>/        # 14 scoped multi-slide decks
│   └── single-page/*.html        # 31 layout files with demo data
└── examples/demo-deck/           # complete working deck

html-ppt-skill/
├── assets/
│   ├── base.css                  # 共享样式变量 + 基础样式
│   ├── runtime.js                # 键盘导航 + 演示者模式 + 概览功能
│   ├── themes/*.css              # 36个主题样式文件
│   └── animations/
│       ├── animations.css        # 27种命名CSS动画
│       ├── fx-runtime.js         # 幻灯片进入时自动初始化[data-fx]
│       └── fx/*.js               # 20个Canvas特效模块
├── templates/
│   ├── deck.html                 # 极简启动模板
│   ├── theme-showcase.html       # 包含全部36种主题（iframe隔离）
│   ├── layout-showcase.html      # 包含全部31种布局
│   ├── animation-showcase.html   # 47种动画效果演示幻灯片
│   ├── full-decks-index.html     # 14套演示文稿画廊
│   ├── full-decks/<name>/        # 14套多幻灯片演示文稿
│   └── single-page/*.html        # 31个带演示数据的布局文件
└── examples/demo-deck/           # 完整的演示文稿示例

Minimal Deck Template

极简演示文稿模板

Every deck follows this structure —

assets/base.css

+ one theme file +

runtime.js

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Talk</title>
  <!-- Base system -->
  <link rel="stylesheet" href="../../assets/base.css" />
  <!-- Pick ONE theme -->
  <link rel="stylesheet" href="../../assets/themes/tokyo-night.css" />
  <!-- Optional: animations -->
  <link rel="stylesheet" href="../../assets/animations/animations.css" />
</head>
<body>

  <!-- Slide 1: Cover -->
  <section class="slide" data-layout="cover">
    <div class="slide-content">
      <h1 class="animate-on-enter rise-in">My Presentation</h1>
      <p class="animate-on-enter fade-up" style="--delay:0.3s">Subtitle goes here</p>
    </div>
  </section>

  <!-- Slide 2: Bullets -->
  <section class="slide" data-layout="bullets">
    <div class="slide-content">
      <h2>Key Points</h2>
      <ul class="stagger-list">
        <li>First important point</li>
        <li>Second important point</li>
        <li>Third important point</li>
      </ul>
    </div>
  </section>

  <!-- Slide 3: Big Quote -->
  <section class="slide" data-layout="big-quote">
    <div class="slide-content">
      <blockquote class="animate-on-enter zoom-pop">
        "Design is not just what it looks like. Design is how it works."
      </blockquote>
      <cite>— Steve Jobs</cite>
    </div>
  </section>

  <!-- Slide 4: Thanks -->
  <section class="slide" data-layout="thanks">
    <div class="slide-content">
      <h1>Thank You</h1>
      <p>github.com/yourhandle</p>
    </div>
  </section>

  <script src="../../assets/runtime.js"></script>
  <script src="../../assets/animations/fx-runtime.js"></script>
</body>
</html>

每套演示文稿都遵循此结构——

assets/base.css

+ 一个主题文件 +

runtime.js

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Talk</title>
  <!-- 基础样式系统 -->
  <link rel="stylesheet" href="../../assets/base.css" />
  <!-- 选择一个主题 -->
  <link rel="stylesheet" href="../../assets/themes/tokyo-night.css" />
  <!-- 可选：动画效果 -->
  <link rel="stylesheet" href="../../assets/animations/animations.css" />
</head>
<body>

  <!-- 幻灯片1：封面 -->
  <section class="slide" data-layout="cover">
    <div class="slide-content">
      <h1 class="animate-on-enter rise-in">My Presentation</h1>
      <p class="animate-on-enter fade-up" style="--delay:0.3s">Subtitle goes here</p>
    </div>
  </section>

  <!-- 幻灯片2：项目符号 -->
  <section class="slide" data-layout="bullets">
    <div class="slide-content">
      <h2>Key Points</h2>
      <ul class="stagger-list">
        <li>First important point</li>
        <li>Second important point</li>
        <li>Third important point</li>
      </ul>
    </div>
  </section>

  <!-- 幻灯片3：大引用 -->
  <section class="slide" data-layout="big-quote">
    <div class="slide-content">
      <blockquote class="animate-on-enter zoom-pop">
        "Design is not just what it looks like. Design is how it works."
      </blockquote>
      <cite>— Steve Jobs</cite>
    </div>
  </section>

  <!-- 幻灯片4：致谢 -->
  <section class="slide" data-layout="thanks">
    <div class="slide-content">
      <h1>Thank You</h1>
      <p>github.com/yourhandle</p>
    </div>
  </section>

  <script src="../../assets/runtime.js"></script>
  <script src="../../assets/animations/fx-runtime.js"></script>
</body>
</html>

Themes (36 total)

主题（共36种）

Swap the single

<link>

to change the entire deck's appearance. All themes live in

assets/themes/*.css

html

<!-- Light / Editorial -->
<link rel="stylesheet" href="assets/themes/minimal-white.css" />
<link rel="stylesheet" href="assets/themes/editorial-serif.css" />
<link rel="stylesheet" href="assets/themes/soft-pastel.css" />
<link rel="stylesheet" href="assets/themes/academic-paper.css" />

<!-- Dark / Moody -->
<link rel="stylesheet" href="assets/themes/tokyo-night.css" />
<link rel="stylesheet" href="assets/themes/dracula.css" />
<link rel="stylesheet" href="assets/themes/catppuccin-mocha.css" />
<link rel="stylesheet" href="assets/themes/gruvbox-dark.css" />
<link rel="stylesheet" href="assets/themes/nord.css" />

<!-- Bold / Design-forward -->
<link rel="stylesheet" href="assets/themes/neo-brutalism.css" />
<link rel="stylesheet" href="assets/themes/glassmorphism.css" />
<link rel="stylesheet" href="assets/themes/cyberpunk-neon.css" />
<link rel="stylesheet" href="assets/themes/memphis-pop.css" />
<link rel="stylesheet" href="assets/themes/vaporwave.css" />

<!-- Business / Professional -->
<link rel="stylesheet" href="assets/themes/corporate-clean.css" />
<link rel="stylesheet" href="assets/themes/pitch-deck-vc.css" />
<link rel="stylesheet" href="assets/themes/swiss-grid.css" />

<!-- Special / Cultural -->
<link rel="stylesheet" href="assets/themes/xiaohongshu-white.css" />
<link rel="stylesheet" href="assets/themes/japanese-minimal.css" />
<link rel="stylesheet" href="assets/themes/terminal-green.css" />

Browse all 36 themes live:

open templates/theme-showcase.html

替换单个

<link>

标签即可改变整个演示文稿的外观。所有主题都位于

assets/themes/*.css

中。

html

<!-- 浅色/编辑风格 -->
<link rel="stylesheet" href="assets/themes/minimal-white.css" />
<link rel="stylesheet" href="assets/themes/editorial-serif.css" />
<link rel="stylesheet" href="assets/themes/soft-pastel.css" />
<link rel="stylesheet" href="assets/themes/academic-paper.css" />

<!-- 深色/氛围感 -->
<link rel="stylesheet" href="assets/themes/tokyo-night.css" />
<link rel="stylesheet" href="assets/themes/dracula.css" />
<link rel="stylesheet" href="assets/themes/catppuccin-mocha.css" />
<link rel="stylesheet" href="assets/themes/gruvbox-dark.css" />
<link rel="stylesheet" href="assets/themes/nord.css" />

<!-- 醒目/设计导向 -->
<link rel="stylesheet" href="assets/themes/neo-brutalism.css" />
<link rel="stylesheet" href="assets/themes/glassmorphism.css" />
<link rel="stylesheet" href="assets/themes/cyberpunk-neon.css" />
<link rel="stylesheet" href="assets/themes/memphis-pop.css" />
<link rel="stylesheet" href="assets/themes/vaporwave.css" />

<!-- 商务/专业风格 -->
<link rel="stylesheet" href="assets/themes/corporate-clean.css" />
<link rel="stylesheet" href="assets/themes/pitch-deck-vc.css" />
<link rel="stylesheet" href="assets/themes/swiss-grid.css" />

<!-- 特殊/文化风格 -->
<link rel="stylesheet" href="assets/themes/xiaohongshu-white.css" />
<link rel="stylesheet" href="assets/themes/japanese-minimal.css" />
<link rel="stylesheet" href="assets/themes/terminal-green.css" />

在线浏览全部36种主题：

open templates/theme-showcase.html

Layouts (31 total)

布局（共31种）

Set via

data-layout

on each

<section class="slide">

html

<!-- Structural -->
<section class="slide" data-layout="cover">…</section>
<section class="slide" data-layout="toc">…</section>
<section class="slide" data-layout="section-divider">…</section>
<section class="slide" data-layout="thanks">…</section>
<section class="slide" data-layout="cta">…</section>

<!-- Content -->
<section class="slide" data-layout="bullets">…</section>
<section class="slide" data-layout="two-column">…</section>
<section class="slide" data-layout="three-column">…</section>
<section class="slide" data-layout="big-quote">…</section>
<section class="slide" data-layout="table">…</section>
<section class="slide" data-layout="code">…</section>
<section class="slide" data-layout="diff">…</section>
<section class="slide" data-layout="terminal">…</section>

<!-- Data / Stats -->
<section class="slide" data-layout="stat-highlight">…</section>
<section class="slide" data-layout="kpi-grid">…</section>
<section class="slide" data-layout="chart-bar">…</section>
<section class="slide" data-layout="chart-line">…</section>
<section class="slide" data-layout="chart-pie">…</section>
<section class="slide" data-layout="chart-radar">…</section>

<!-- Diagrams / Process -->
<section class="slide" data-layout="flow-diagram">…</section>
<section class="slide" data-layout="timeline">…</section>
<section class="slide" data-layout="roadmap">…</section>
<section class="slide" data-layout="mindmap">…</section>
<section class="slide" data-layout="arch-diagram">…</section>
<section class="slide" data-layout="process-steps">…</section>
<section class="slide" data-layout="gantt">…</section>

<!-- Comparison -->
<section class="slide" data-layout="comparison">…</section>
<section class="slide" data-layout="pros-cons">…</section>
<section class="slide" data-layout="todo-checklist">…</section>

<!-- Visual -->
<section class="slide" data-layout="image-hero">…</section>
<section class="slide" data-layout="image-grid">…</section>

Browse all 31 layouts live:

open templates/layout-showcase.html

通过在每个

<section class="slide">

上设置

data-layout

来指定布局。

html

<!-- 结构类 -->
<section class="slide" data-layout="cover">…</section>
<section class="slide" data-layout="toc">…</section>
<section class="slide" data-layout="section-divider">…</section>
<section class="slide" data-layout="thanks">…</section>
<section class="slide" data-layout="cta">…</section>

<!-- 内容类 -->
<section class="slide" data-layout="bullets">…</section>
<section class="slide" data-layout="two-column">…</section>
<section class="slide" data-layout="three-column">…</section>
<section class="slide" data-layout="big-quote">…</section>
<section class="slide" data-layout="table">…</section>
<section class="slide" data-layout="code">…</section>
<section class="slide" data-layout="diff">…</section>
<section class="slide" data-layout="terminal">…</section>

<!-- 数据/统计类 -->
<section class="slide" data-layout="stat-highlight">…</section>
<section class="slide" data-layout="kpi-grid">…</section>
<section class="slide" data-layout="chart-bar">…</section>
<section class="slide" data-layout="chart-line">…</section>
<section class="slide" data-layout="chart-pie">…</section>
<section class="slide" data-layout="chart-radar">…</section>

<!-- 图表/流程类 -->
<section class="slide" data-layout="flow-diagram">…</section>
<section class="slide" data-layout="timeline">…</section>
<section class="slide" data-layout="roadmap">…</section>
<section class="slide" data-layout="mindmap">…</section>
<section class="slide" data-layout="arch-diagram">…</section>
<section class="slide" data-layout="process-steps">…</section>
<section class="slide" data-layout="gantt">…</section>

<!-- 对比类 -->
<section class="slide" data-layout="comparison">…</section>
<section class="slide" data-layout="pros-cons">…</section>
<section class="slide" data-layout="todo-checklist">…</section>

<!-- 视觉类 -->
<section class="slide" data-layout="image-hero">…</section>
<section class="slide" data-layout="image-grid">…</section>

在线浏览全部31种布局：

open templates/layout-showcase.html

CSS Animations

CSS动画

Add class to any element. Use

--delay

CSS variable for staggering.

html

<!-- Fade / Entrance -->
<h1 class="animate-on-enter rise-in">Title</h1>
<p class="animate-on-enter fade-up" style="--delay:0.2s">Subtitle</p>
<img class="animate-on-enter zoom-pop" style="--delay:0.4s" src="..." />
<p class="animate-on-enter blur-in">Blurred entrance</p>

<!-- Text Effects -->
<h2 class="typewriter">Typed out text</h2>
<span class="glitch-in">Glitched text</span>
<span class="neon-glow">Glowing text</span>
<span class="shimmer-sweep">Shimmer effect</span>
<div class="gradient-flow">Animated gradient background</div>

<!-- Lists -->
<ul class="stagger-list">
  <li>Appears first</li>
  <li>Appears second</li>
  <li>Appears third</li>
</ul>

<!-- Numbers -->
<span class="counter-up" data-target="1000000">0</span>

<!-- 3D / Advanced -->
<div class="card-flip-3d">…</div>
<div class="cube-rotate-3d">…</div>
<div class="page-turn-3d">…</div>
<div class="perspective-zoom">…</div>

<!-- Scroll / Motion -->
<div class="marquee-scroll">Scrolling ticker text…</div>
<div class="kenburns"><img src="..." /></div>
<div class="parallax-tilt">Tilt on hover</div>
<div class="ripple-reveal">Ripple entrance</div>
<div class="spotlight">Spotlight effect</div>

为任意元素添加类名。使用

--delay

CSS变量实现分步动画。

html

<!-- 淡入/入场效果 -->
<h1 class="animate-on-enter rise-in">Title</h1>
<p class="animate-on-enter fade-up" style="--delay:0.2s">Subtitle</p>
<img class="animate-on-enter zoom-pop" style="--delay:0.4s" src="..." />
<p class="animate-on-enter blur-in">模糊入场</p>

<!-- 文本效果 -->
<h2 class="typewriter">打字机效果文本</h2>
<span class="glitch-in">故障文本效果</span>
<span class="neon-glow">霓虹发光文本</span>
<span class="shimmer-sweep">扫光效果</span>
<div class="gradient-flow">渐变背景动画</div>

<!-- 列表效果 -->
<ul class="stagger-list">
  <li>第一个出现</li>
  <li>第二个出现</li>
  <li>第三个出现</li>
</ul>

<!-- 数字动画 -->
<span class="counter-up" data-target="1000000">0</span>

<!-- 3D/高级效果 -->
<div class="card-flip-3d">…</div>
<div class="cube-rotate-3d">…</div>
<div class="page-turn-3d">…</div>
<div class="perspective-zoom">…</div>

<!-- 滚动/动态效果 -->
<div class="marquee-scroll">滚动字幕文本…</div>
<div class="kenburns"><img src="..." /></div>
<div class="parallax-tilt">悬停倾斜效果</div>
<div class="ripple-reveal">波纹入场</div>
<div class="spotlight">聚光灯效果</div>

Canvas FX Animations

Canvas特效动画

Add

data-fx

attribute to trigger cinematic canvas effects on slide enter:

html

<!-- Particle effects -->
<section class="slide" data-layout="cover" data-fx="particle-burst">
  <div class="slide-content">
    <h1>Big Launch</h1>
  </div>
</section>

<!-- Celebration -->
<section class="slide" data-layout="thanks" data-fx="confetti-cannon">
  <div class="slide-content"><h1>Thank You!</h1></div>
</section>

<!-- Tech / Data -->
<section class="slide" data-layout="arch-diagram" data-fx="knowledge-graph">
  <div class="slide-content">…</div>
</section>

<section class="slide" data-fx="neural-net">…</section>
<section class="slide" data-fx="matrix-rain">…</section>
<section class="slide" data-fx="data-stream">…</section>

<!-- Space / Ambient -->
<section class="slide" data-fx="starfield">…</section>
<section class="slide" data-fx="constellation">…</section>
<section class="slide" data-fx="galaxy-swirl">…</section>
<section class="slide" data-fx="orbit-ring">…</section>

<!-- Text FX -->
<section class="slide" data-fx="typewriter-multi">…</section>
<section class="slide" data-fx="word-cascade">…</section>
<section class="slide" data-fx="letter-explode">…</section>
<section class="slide" data-fx="counter-explosion">…</section>

<!-- Visual -->
<section class="slide" data-fx="gradient-blob">…</section>
<section class="slide" data-fx="sparkle-trail">…</section>
<section class="slide" data-fx="shockwave">…</section>
<section class="slide" data-fx="firework">…</section>
<section class="slide" data-fx="chain-react">…</section>
<section class="slide" data-fx="magnetic-field">…</section>

fx-runtime.js

auto-initialises these on slide enter — no extra JS needed.

添加

data-fx

属性可在幻灯片进入时触发电影级Canvas特效：

html

<!-- 粒子效果 -->
<section class="slide" data-layout="cover" data-fx="particle-burst">
  <div class="slide-content">
    <h1>Big Launch</h1>
  </div>
</section>

<!-- 庆祝效果 -->
<section class="slide" data-layout="thanks" data-fx="confetti-cannon">
  <div class="slide-content"><h1>Thank You!</h1></div>
</section>

<!-- 科技/数据效果 -->
<section class="slide" data-layout="arch-diagram" data-fx="knowledge-graph">
  <div class="slide-content">…</div>
</section>

<section class="slide" data-fx="neural-net">…</section>
<section class="slide" data-fx="matrix-rain">…</section>
<section class="slide" data-fx="data-stream">…</section>

<!-- 太空/氛围效果 -->
<section class="slide" data-fx="starfield">…</section>
<section class="slide" data-fx="constellation">…</section>
<section class="slide" data-fx="galaxy-swirl">…</section>
<section class="slide" data-fx="orbit-ring">…</section>

<!-- 文本特效 -->
<section class="slide" data-fx="typewriter-multi">…</section>
<section class="slide" data-fx="word-cascade">…</section>
<section class="slide" data-fx="letter-explode">…</section>
<section class="slide" data-fx="counter-explosion">…</section>

<!-- 视觉效果 -->
<section class="slide" data-fx="gradient-blob">…</section>
<section class="slide" data-fx="sparkle-trail">…</section>
<section class="slide" data-fx="shockwave">…</section>
<section class="slide" data-fx="firework">…</section>
<section class="slide" data-fx="chain-react">…</section>
<section class="slide" data-fx="magnetic-field">…</section>

fx-runtime.js

会在幻灯片进入时自动初始化这些特效——无需额外JS代码。

Full-Deck Templates (14 total)

完整演示文稿模板（共14套）

Pre-built complete decks in

templates/full-decks/<name>/

bash

undefined

预构建的完整演示文稿位于

templates/full-decks/<name>/

：

bash

undefined

Business / Generic

商务/通用类

templates/full-decks/pitch-deck/ templates/full-decks/product-launch/ templates/full-decks/tech-sharing/ templates/full-decks/weekly-report/ templates/full-decks/course-module/

Social / Chinese

社交/中文类

templates/full-decks/xhs-post/ # 9-slide 3:4 ratio templates/full-decks/xhs-white-editorial/ templates/full-decks/xhs-pastel-card/

templates/full-decks/xhs-post/ # 9张幻灯片，3:4比例 templates/full-decks/xhs-white-editorial/ templates/full-decks/xhs-pastel-card/

Technical / Dark

技术/深色类

templates/full-decks/graphify-dark-graph/ templates/full-decks/hermes-cyber-terminal/ templates/full-decks/knowledge-arch-blueprint/

Specific Styles

特定风格类

templates/full-decks/obsidian-claude-gradient/ templates/full-decks/testing-safety-alert/ templates/full-decks/dir-key-nav-minimal/


Each deck uses scoped `.tpl-<name>` CSS — safe to embed multiple decks side-by-side.

Browse all: `open templates/full-decks-index.html`

---

templates/full-decks/obsidian-claude-gradient/ templates/full-decks/testing-safety-alert/ templates/full-decks/dir-key-nav-minimal/


每套演示文稿都使用作用域`.tpl-<name>` CSS——可安全地并排嵌入多套演示文稿。

浏览全部模板：`open templates/full-decks-index.html`

---

Common Deck Patterns

常见演示文稿模式

Pitch Deck (VC Style)

风投风格演示文稿

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Pitch Deck</title>
  <link rel="stylesheet" href="../../assets/base.css" />
  <link rel="stylesheet" href="../../assets/themes/pitch-deck-vc.css" />
  <link rel="stylesheet" href="../../assets/animations/animations.css" />
</head>
<body>

  <section class="slide" data-layout="cover" data-fx="gradient-blob">
    <div class="slide-content">
      <h1 class="animate-on-enter rise-in">CompanyName</h1>
      <p class="animate-on-enter fade-up" style="--delay:0.3s">
        One-line value proposition
      </p>
      <p class="animate-on-enter fade-up" style="--delay:0.5s">Seed Round · 2026</p>
    </div>
  </section>

  <section class="slide" data-layout="stat-highlight">
    <div class="slide-content">
      <h2>Traction</h2>
      <div class="kpi-row">
        <div class="kpi">
          <span class="counter-up" data-target="50000">0</span>
          <label>Users</label>
        </div>
        <div class="kpi">
          <span class="counter-up" data-target="120">0</span>
          <label>% MoM Growth</label>
        </div>
        <div class="kpi">
          <span>$<span class="counter-up" data-target="2">0</span>M</span>
          <label>ARR</label>
        </div>
      </div>
    </div>
  </section>

  <section class="slide" data-layout="two-column">
    <div class="slide-content">
      <h2>The Problem / Solution</h2>
      <div class="col">
        <h3>😩 Problem</h3>
        <ul class="stagger-list">
          <li>Pain point one</li>
          <li>Pain point two</li>
        </ul>
      </div>
      <div class="col">
        <h3>✅ Solution</h3>
        <ul class="stagger-list">
          <li>How we fix it</li>
          <li>Why we win</li>
        </ul>
      </div>
    </div>
  </section>

  <section class="slide" data-layout="cta" data-fx="confetti-cannon">
    <div class="slide-content">
      <h1>Join Us</h1>
      <p>hello@company.com</p>
    </div>
  </section>

  <script src="../../assets/runtime.js"></script>
  <script src="../../assets/animations/fx-runtime.js"></script>
</body>
</html>

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Pitch Deck</title>
  <link rel="stylesheet" href="../../assets/base.css" />
  <link rel="stylesheet" href="../../assets/themes/pitch-deck-vc.css" />
  <link rel="stylesheet" href="../../assets/animations/animations.css" />
</head>
<body>

  <section class="slide" data-layout="cover" data-fx="gradient-blob">
    <div class="slide-content">
      <h1 class="animate-on-enter rise-in">CompanyName</h1>
      <p class="animate-on-enter fade-up" style="--delay:0.3s">
        One-line value proposition
      </p>
      <p class="animate-on-enter fade-up" style="--delay:0.5s">Seed Round · 2026</p>
    </div>
  </section>

  <section class="slide" data-layout="stat-highlight">
    <div class="slide-content">
      <h2>Traction</h2>
      <div class="kpi-row">
        <div class="kpi">
          <span class="counter-up" data-target="50000">0</span>
          <label>Users</label>
        </div>
        <div class="kpi">
          <span class="counter-up" data-target="120">0</span>
          <label>% MoM Growth</label>
        </div>
        <div class="kpi">
          <span>$<span class="counter-up" data-target="2">0</span>M</span>
          <label>ARR</label>
        </div>
      </div>
    </div>
  </section>

  <section class="slide" data-layout="two-column">
    <div class="slide-content">
      <h2>The Problem / Solution</h2>
      <div class="col">
        <h3>😩 Problem</h3>
        <ul class="stagger-list">
          <li>Pain point one</li>
          <li>Pain point two</li>
        </ul>
      </div>
      <div class="col">
        <h3>✅ Solution</h3>
        <ul class="stagger-list">
          <li>How we fix it</li>
          <li>Why we win</li>
        </ul>
      </div>
    </div>
  </section>

  <section class="slide" data-layout="cta" data-fx="confetti-cannon">
    <div class="slide-content">
      <h1>Join Us</h1>
      <p>hello@company.com</p>
    </div>
  </section>

  <script src="../../assets/runtime.js"></script>
  <script src="../../assets/animations/fx-runtime.js"></script>
</body>
</html>

Tech Talk / Engineering

技术分享/工程类演示文稿

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Tech Sharing</title>
  <link rel="stylesheet" href="../../assets/base.css" />
  <link rel="stylesheet" href="../../assets/themes/tokyo-night.css" />
  <link rel="stylesheet" href="../../assets/animations/animations.css" />
</head>
<body>

  <section class="slide" data-layout="cover" data-fx="neural-net">
    <div class="slide-content">
      <h1 class="neon-glow">How We Scaled to 10M RPS</h1>
      <p>Engineering Deep Dive · 2026</p>
    </div>
  </section>

  <section class="slide" data-layout="code">
    <div class="slide-content">
      <h2>The Bottleneck</h2>
      <pre><code class="language-python">

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Tech Sharing</title>
  <link rel="stylesheet" href="../../assets/base.css" />
  <link rel="stylesheet" href="../../assets/themes/tokyo-night.css" />
  <link rel="stylesheet" href="../../assets/animations/animations.css" />
</head>
<body>

  <section class="slide" data-layout="cover" data-fx="neural-net">
    <div class="slide-content">
      <h1 class="neon-glow">How We Scaled to 10M RPS</h1>
      <p>Engineering Deep Dive · 2026</p>
    </div>
  </section>

  <section class="slide" data-layout="code">
    <div class="slide-content">
      <h2>The Bottleneck</h2>
      <pre><code class="language-python">

Before: naive approach — O(n²) lookup

def find_user(users, uid): for user in users: # 💀 scans entire list if user.id == uid: return user

After: hash map — O(1)

user_index = {u.id: u for u in users} def find_user(uid): return user_index.get(uid) # ⚡ instant </code></pre> </div>

</section> <section class="slide" data-layout="timeline"> <div class="slide-content"> <h2>Migration Roadmap</h2> <div class="timeline"> <div class="timeline-item"> <span class="date">Q1</span> <span class="event">Audit + profiling</span> </div> <div class="timeline-item"> <span class="date">Q2</span> <span class="event">Hash-map refactor</span> </div> <div class="timeline-item"> <span class="date">Q3</span> <span class="event">Cache layer + CDN</span> </div> <div class="timeline-item"> <span class="date">Q4</span> <span class="event">10M RPS achieved ✓</span> </div> </div> </div> </section> <script src="../../assets/runtime.js"></script> <script src="../../assets/animations/fx-runtime.js"></script> </body> </html> ```

user_index = {u.id: u for u in users} def find_user(uid): return user_index.get(uid) # ⚡ instant </code></pre> </div>

小红书 Style (3:4 ratio)

小红书风格（3:4比例）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>小红书图文</title>
  <link rel="stylesheet" href="../../assets/base.css" />
  <link rel="stylesheet" href="../../assets/themes/xiaohongshu-white.css" />
  <link rel="stylesheet" href="../../assets/animations/animations.css" />
  <style>
    /* 3:4 aspect ratio for XHS */
    .slide { aspect-ratio: 3 / 4; max-width: 480px; }
  </style>
</head>
<body>

  <section class="slide" data-layout="cover">
    <div class="slide-content">
      <h1 class="animate-on-enter rise-in">5个让你效率翻倍的工具</h1>
      <p class="animate-on-enter fade-up" style="--delay:0.3s">
        📌 收藏备用！
      </p>
    </div>
  </section>

  <section class="slide" data-layout="image-hero">
    <div class="slide-content">
      <div class="tag">工具 01</div>
      <h2>Notion</h2>
      <p>把你的大脑外包给它，笔记 / 任务 / Wiki 一体化</p>
    </div>
  </section>

  <!-- Repeat for tools 2–5 -->

  <section class="slide" data-layout="thanks">
    <div class="slide-content">
      <h2>觉得有用的话</h2>
      <p>💾 收藏 + 👍 点赞 + 💬 评论你用什么工具</p>
    </div>
  </section>

  <script src="../../assets/runtime.js"></script>
</body>
</html>

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>小红书图文</title>
  <link rel="stylesheet" href="../../assets/base.css" />
  <link rel="stylesheet" href="../../assets/themes/xiaohongshu-white.css" />
  <link rel="stylesheet" href="../../assets/animations/animations.css" />
  <style>
    /* 小红书3:4比例 */
    .slide { aspect-ratio: 3 / 4; max-width: 480px; }
  </style>
</head>
<body>

  <section class="slide" data-layout="cover">
    <div class="slide-content">
      <h1 class="animate-on-enter rise-in">5个让你效率翻倍的工具</h1>
      <p class="animate-on-enter fade-up" style="--delay:0.3s">
        📌 收藏备用！
      </p>
    </div>
  </section>

  <section class="slide" data-layout="image-hero">
    <div class="slide-content">
      <div class="tag">工具 01</div>
      <h2>Notion</h2>
      <p>把你的大脑外包给它，笔记 / 任务 / Wiki 一体化</p>
    </div>
  </section>

  <!-- 重复此结构添加工具2-5 -->

  <section class="slide" data-layout="thanks">
    <div class="slide-content">
      <h2>觉得有用的话</h2>
      <p>💾 收藏 + 👍 点赞 + 💬 评论你用什么工具</p>
    </div>
  </section>

  <script src="../../assets/runtime.js"></script>
</body>
</html>

Speaker Notes

演示者备注

Add notes inside

.slide-notes

— revealed by pressing

html

<section class="slide" data-layout="bullets">
  <div class="slide-content">
    <h2>Architecture Overview</h2>
    <ul class="stagger-list">
      <li>Service A handles ingestion</li>
      <li>Service B handles processing</li>
    </ul>
  </div>
  <!-- Hidden from audience, shown in presenter overlay -->
  <aside class="slide-notes">
    Mention: Service A uses Kafka. Budget 3 min here. 
    Demo link: internal.company.com/demo
  </aside>
</section>

在

.slide-notes

中添加备注——按下

键即可查看：

html

<section class="slide" data-layout="bullets">
  <div class="slide-content">
    <h2>Architecture Overview</h2>
    <ul class="stagger-list">
      <li>Service A handles ingestion</li>
      <li>Service B handles processing</li>
    </ul>
  </div>
  <!-- 对观众隐藏，在演示者覆盖层显示 -->
  <aside class="slide-notes">
    Mention: Service A uses Kafka. Budget 3 min here. 
    Demo link: internal.company.com/demo
  </aside>
</section>

Deep Linking & URL Navigation

深度链接与URL导航

Link directly to a slide by appending

#N

?slide=N

html

<!-- Link to slide 5 in a shared deck -->
<a href="my-deck/index.html#5">Jump to Architecture slide</a>

<!-- From JS -->
window.location.hash = '3';

通过追加

#N

或

?slide=N

直接链接到指定幻灯片：

html

<!-- 链接到共享演示文稿的第5张幻灯片 -->
<a href="my-deck/index.html#5">跳转到架构幻灯片</a>

<!-- 通过JS实现 -->
window.location.hash = '3';

Keyboard Controls

键盘快捷键

Key	Action
`← → Space PgUp PgDn`	Navigate slides
`Home / End`	First / last slide
`F`	Fullscreen
`S`	Speaker notes overlay
`O`	Slide overview grid
`T`	Cycle through themes
`A`	Demo animation on current slide

按键	操作
`← → Space PgUp PgDn`	切换幻灯片
`Home / End`	跳转到第一张/最后一张幻灯片
`F`	全屏模式
`S`	显示演示者备注覆盖层
`O`	幻灯片概览网格
`T`	循环切换主题
`A`	在当前幻灯片演示动画效果

Render to PNG (Headless Chrome)

渲染为PNG（无头Chrome）

bash

undefined

bash

undefined

Single template, default viewport

单个模板，默认视口

./scripts/render.sh templates/theme-showcase.html

Specific deck, 12 slides

指定演示文稿，12张幻灯片

./scripts/render.sh examples/my-talk/index.html 12

Output lands in scripts/verify-output/

输出结果位于scripts/verify-output/

ls scripts/verify-output/*.png

---

ls scripts/verify-output/*.png

---

Browse Showcase Files

浏览演示文件

bash

undefined

bash

undefined

All 36 themes (each in an isolated iframe)

全部36种主题（每个主题在独立iframe中）

open templates/theme-showcase.html

All 31 layouts with real demo data

全部31种布局带真实演示数据

open templates/layout-showcase.html

All 47 animations (CSS + canvas FX)

全部47种动画（CSS + Canvas特效）

open templates/animation-showcase.html

All 14 full-deck templates in a gallery

全部14套完整演示文稿画廊

open templates/full-decks-index.html

---

open templates/full-decks-index.html

---

Troubleshooting

故障排除

Animations not firing on slide enter

Ensure
```
fx-runtime.js
```
is loaded after
```
runtime.js
```
Check
```
data-fx
```
value matches a name in
```
assets/animations/fx/*.js
```
Canvas FX requires a visible
```
<canvas>
```
—
```
fx-runtime.js
```
injects one automatically if absent

Theme not applying

Only one theme
```
<link>
```
should be active at a time
Theme file must be loaded after
```
base.css
```
Scoped deck templates use
```
.tpl-<name>
```
class on
```
<body>
```
— add it when embedding

Fonts not loading (offline)

```
fonts.css
```
loads Noto Sans SC / Noto Serif SC from Google Fonts CDN
For offline use, download fonts and update
```
@font-face
```
paths in
```
assets/fonts.css
```

3:4 ratio slides look stretched

Add
```
aspect-ratio: 3 / 4
```
and constrain
```
max-width
```
on
```
.slide
```
(see XHS example above)
Default slides are 16:9 widescreen

Code blocks not highlighted

Include highlight.js from CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

Call
```
hljs.highlightAll()
```
after DOM load

Chart layouts blank

```
chart-bar
```
,
```
chart-line
```
,
```
chart-pie
```
,
```
chart-radar
```
layouts expect Chart.js

Include:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

幻灯片进入时动画未触发

确保
```
fx-runtime.js
```
在
```
runtime.js
```
之后加载
检查
```
data-fx
```
值是否与
```
assets/animations/fx/*.js
```
中的文件名匹配
Canvas特效需要可见的
```
<canvas>
```
元素——如果不存在，
```
fx-runtime.js
```
会自动注入一个

主题未生效

同一时间只能激活一个主题
```
<link>
```
标签
主题文件必须在
```
base.css
```
之后加载
作用域演示文稿模板在
```
<body>
```
上使用
```
.tpl-<name>
```
类——嵌入时需添加此类

字体无法加载（离线环境）

```
fonts.css
```
从Google Fonts CDN加载Noto Sans SC / Noto Serif SC字体
如需离线使用，请下载字体并更新
```
assets/fonts.css
```
中的
```
@font-face
```
路径

3:4比例幻灯片显示拉伸

在
```
.slide
```
上添加
```
aspect-ratio: 3 / 4
```
并限制
```
max-width
```
（见上方小红书示例）
默认幻灯片为16:9宽屏比例

代码块未高亮

从CDN引入highlight.js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

DOM加载完成后调用
```
hljs.highlightAll()
```

图表布局显示空白

```
chart-bar
```
、
```
chart-line
```
、
```
chart-pie
```
、
```
chart-radar
```
布局依赖Chart.js

引入Chart.js：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>