<a href="#english">English</a> | <a href="#中文">中文</a>

---

<a id="english"></a>

# aws-html-slides

An agent skill for creating stunning, animation-rich HTML presentations — from scratch or by converting PowerPoint files.

Based on [@zarazhangrui](https://github.com/zarazhangrui)'s [frontend-slides](https://github.com/zarazhangrui/frontend-slides).

### Demo: re:Invent Keynote (Style #2)

https://github.com/user-attachments/assets/c264cc34-67d5-4cbd-a884-9c1b20d06f7a

### Demo: Neon Cyber (Style #1)

https://github.com/user-attachments/assets/54dfbf37-7a7a-44e1-ad7e-585b99e9c77a

## What This Does

**aws-html-slides** helps non-designers create beautiful web presentations without knowing CSS or JavaScript. Instead of asking you to describe your aesthetic preferences in words, it provides **2 pre-built visual previews** and lets you pick what you like.

## Layout Gallery

A peek at the built-in content layouts. Every shot below is a real frame from the two preview decks (`aws-html-slides/preview/`) — captured live, animations and all. Open the previews to see them move.

### Neon Cyber

<table> <tr> <td width="50%"><img src="docs/layouts/neon-title.png" alt="Neon kinetic title over WebGL aurora"><br>_{<b>Kinetic title</b> — per-character reveal over a WebGL aurora background.}</td> <td width="50%"><img src="docs/layouts/neon-bento.png" alt="Neon bento grid with border-beam hero"><br>_{<b>Bento grid</b> — asymmetric cards with a rotating border-beam hero.}</td> </tr> <tr> <td width="50%"><img src="docs/layouts/neon-metrics.png" alt="Neon gauge rings with count-up"><br>_{<b>Data HUD</b> — SVG gauge rings with count-up animation.}</td> <td width="50%"><img src="docs/layouts/neon-comparison.png" alt="Neon VS comparison"><br>_{<b>VS compare</b> — before/after columns with a glowing pivot.}</td> </tr> <tr> <td width="50%"><img src="docs/layouts/neon-pipeline.png" alt="Neon circuit pipeline with pulse dots"><br><sub><b>Circuit pipeline</b> —