12 components.
Built for engagement.
Every component is interactive, animated, and designed to keep your audience paying attention.
The full toolkit. One by one.
Each component comes with built-in animations, responsive layout, and dark-mode styling.
Flip Cards
Two-sided cards that flip on click to reveal additional detail. Perfect for Q&A, team intros, or concept reveals.
"Show the team as flip cards — name and role on front, bio on back"
Expandable Cards
Collapsible sections that expand to show detail on click. Great for progressive disclosure and feature breakdowns.
"List our 5 product features as expandable cards with details"
Code Blocks
Syntax-highlighted code with copy button and language label. Supports all major languages with automatic detection.
"Show a Python code example for the API authentication flow"
Architecture Flows
Connected node diagrams showing system relationships. Animated connections that draw attention to data flow and dependencies.
"Create an architecture flow showing frontend → API → database"
Stats & Metrics
Animated number counters with labels and optional trend indicators. Numbers count up on scroll for maximum impact.
"Show Q4 metrics: 247% revenue growth, 12.4k users, 98.9% uptime"
Charts
Bar, line, and pie chart visualizations rendered in pure CSS and SVG. No external charting libraries needed.
"Show monthly active users as a bar chart for the last 6 months"
Timelines
Vertical or horizontal event sequences with dates. Animated entry points that guide your audience through chronological stories.
"Create a product roadmap timeline from Q1 to Q4 2026"
Comparisons
Side-by-side feature tables for comparing options. Clean layouts that make differences obvious at a glance.
"Compare our Free vs Pro plan features in a comparison table"
Quotes
Styled testimonial or citation blocks with attribution. Add social proof and memorable pull-quotes to any slide.
"Add a customer quote from our head of engineering"
Checklists
Interactive task or feature lists with check marks. Clickable items that let you walk through progress during a presentation.
"Show our launch checklist: security audit, load testing, docs, beta"
Image Grids
Responsive photo or screenshot galleries. Masonry and uniform layouts that adapt to any screen size.
"Display 6 product screenshots in a grid layout"
Custom Layouts
Freeform slide designs for unique content. Full creative freedom when you need something the standard components don't cover.
"Create a full-bleed hero slide with our tagline over a gradient"
Start using these
components today.
Install the HTMLSlides skill and describe the components you need. The AI handles the rest — layout, styling, animations, and interactivity.
Free and open source. Works with Claude Code.