html-ppt — HTML PPT 스튜디오

전문 HTML 프레젠테이션을 제작하기 위한 세계적 수준의 AgentSkill 36개 테마, 15개 전체 덱 템플릿, 31개 페이지 레이아웃, 47개 애니메이션(CSS 27개 + 캔버스 FX 20개), 그리고 정확한 발표자 모드 픽셀 단위 미리보기 + 발표자 스크립트 + 타이머 포함 — 모두 순수 정적 HTML/CSS/JS로, 빌드 과정 필요 없음.

작성자: lewis <sudolewis@gmail.com> 라이선스: MIT 중국어 문서: README.zh-CN.md

한 명령으로 36개 테마 × 20개 캔버스 FX × 31개 레이아웃 × 15개 전체 덱 + 발표자 모드를 설치할 수 있습니다. 위 모든 미리보기는 실 템플릿 파일이 덱 안에서 렌더링되는 라이브 iframe입니다 — 스크린샷이나 모형 아님.

🎤 발표자 모드 (신규!)

모든 덱에서 S를 누르면 전용 발표자 창이 열립니다. 이 창에는 네 개의 드래그 가능하고 크기 조절 가능한 마그네틱 카드가 있습니다: 현재 슬라이드, 다음 슬라이드 미리보기, 발표자 스크립트(逐字稿), 타이머. 두 창은 BroadcastChannel로 동기화됩니다.

미리보기가 픽셀 단위 정확한 이유: 각 카드는 동일한 덱 HTML을 ?preview=N 쿼리 파라미터와 함께 로드하는 `` 요소입니다. 런타임이 이를 감지해 슬라이드 N만 크롬 없이 렌더링합니다 — 따라서 미리보기는 같은 CSS, 테마, 글꼴, 뷰포트를 관중에게 보이는 것과 동일하게 사용합니다. 색상과 레이아웃이 동일하게 보장됩니다.

매끄러운(재로드 없는) 네비게이션: 슬라이드 변경 시, 발표자 창이 각 iframe에 postMessage({type:'preview-goto', idx:N})를 보냅니다. iframe은 단지 슬라이드 간 .is-active를 토글합니다 — 재로드 없음, 깜빡임 없음.

발표자 스크립트 규칙 (3가지 황금법칙):

1. **P

---

🌐 본 텍스트는 빠른 이해를 돕기 위한 요약 번역본입니다. 정확한 기술 정보 및 전체 코드는 GitHub 원문에서 확인하실 수 있습니다.