`. ```html

…

``` Browse all 31 layouts live: `open templates/layout-showcase.html` --- ## CSS Animations Add class to any element. Use `--delay` CSS variable for staggering. ```html

Title

Subtitle

Blurred entrance

Typed out text

Glitched text Glowing text Shimmer effect

Animated gradient background

Appears first
Appears second
Appears third

…

Scrolling ticker text…

Tilt on hover

Ripple entrance

Spotlight effect

``` --- ## Canvas FX Animations Add `data-fx` attribute to trigger cinematic canvas effects on slide enter: ```html

Big Launch

Thank You!

…

``` `fx-runtime.js` auto-initialises these on slide enter — no extra JS needed. --- ## Full-Deck Templates (14 total) Pre-built complete decks in `templates/full-decks//`: ```bash # 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/ # 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-` CSS — safe to embed multiple decks side-by-side. Browse all: `open templates/full-decks-index.html` --- ## Common Deck Patterns ### Pitch Deck (VC Style) ```html Pitch Deck

CompanyName

One-line value proposition

Seed Round · 2026

Traction

0 Users

0 % MoM Growth

$0M ARR

The Problem / Solution

😩 Problem

Pain point one
Pain point two

✅ Solution

How we fix it
Why we win

Join Us

hello@company.com

``` ### Tech Talk / Engineering ```html Tech Sharing

How We Scaled to 10M RPS

Engineering Deep Dive · 2026

The Bottleneck


# 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

Migration Roadmap

Q1 Audit + profiling

Q2 Hash-map refactor

Q3 Cache layer + CDN

Q4 10M RPS achieved ✓

``` ### 小红书 Style (3:4 ratio) ```html 小红书图文

5个让你效率翻倍的工具

📌 收藏备用！

工具 01

Notion

把你的大脑外包给它，笔记 / 任务 / Wiki 一体化

觉得有用的话

💾 收藏 + 👍 点赞 + 💬 评论你用什么工具

``` --- ## Speaker Notes Add notes inside `.slide-notes` — revealed by pressing `S`: ```html

Architecture Overview

Service A handles ingestion
Service B handles processing

``` --- ## Deep Linking & URL Navigation Link directly to a slide by appending `#N` or `?slide=N`: ```html Jump to Architecture slide 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 | --- ## Render to PNG (Headless Chrome) ```bash # Single template, default viewport ./scripts/render.sh templates/theme-showcase.html # Specific deck, 12 slides ./scripts/render.sh examples/my-talk/index.html 12 # Output lands in scripts/verify-output/ ls scripts/verify-output/*.png ``` --- ## Browse Showcase Files ```bash # All 36 themes (each in an isolated iframe) open templates/theme-showcase.html # All 31 layouts with real demo data open templates/layout-showcase.html # All 47 animations (CSS + canvas FX) open templates/animation-showcase.html # All 14 full-deck templates in a gallery 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 `

My Presentation

Key Points

Thank You