Lustro Slideshow Template
Lustro Slideshow is a free, fully responsive nine-slide presentation template built with pure HTML, CSS, and JavaScript. No frameworks, no build tools, no dependencies. Designed around a calm, dark glassmorphic aesthetic with an indigo-to-pink gradient accent, it gives founders, agencies, and indie SaaS makers a polished foundation for product launches, internal demos, and investor decks. Every slide flows into the next with smooth cross-fade transitions, layered reveal animations, and considered typography that reads as confidently on a 4K display as it does on a phone.
The structure follows a real product launch narrative: a cinematic cover, a problem statement, a feature introduction with a tilted mock dashboard, a four-up capability grid, a transparent four-quarter roadmap, beta metrics with sparklines and a customer quote, a side-by-side comparison table with a "Recommended" badge, a cross-promo grid, and a closing call-to-action. Each section uses a unified design system of CSS custom properties, glass-card components, gradient text accents, and a shared font stack of Space Grotesk, DM Sans, and JetBrains Mono. Customizing one part updates the whole deck cleanly.
Navigation is built for both quick demos and long presentations. A popup table-of-contents menu lets viewers jump to any slide. Arrow keys, spacebar, and number shortcuts (1 to 9) work for keyboard-driven walk-throughs. Swipe gestures with vertical-scroll detection handle mobile. On phones the slides become genuinely scrollable when content overflows, the chrome unsticks itself into an in-flow footer to free up screen space, and a custom-styled gradient scrollbar replaces the browser's default. Drop the file into any folder and it just works.
Features
+ Single-file vanilla HTML, CSS, and JavaScript with no frameworks
+ Nine fully designed slides covering a complete product launch story
+ Dark glassmorphic theme with indigo, pink, and cyan gradient accents
+ Unified CSS custom property system for one-line palette and font swaps
+ Popup navigation menu with slide previews and keyboard shortcut hints
+ Smooth cross-fade slide transitions with staggered reveal animations
+ Side-by-side comparison table with a "Recommended" column badge
+ Four-quarter roadmap timeline with status indicators and gradient connector
+ Animated SVG line chart, bar fills, and sparklines on metric cards
+ Tilted glassmorphic mock dashboard preview on the product slide
+ Cross-promotion card grid linking to other TemplateMo templates
+ Mobile-scrollable slides with custom-styled gradient scrollbars
+ In-flow footer on mobile that replaces sticky chrome to save screen space
+ Keyboard navigation: arrow keys, spacebar, M for menu, 1 to 9 to jump
+ Touch swipe gestures with intelligent vertical-scroll detection
+ Click-anywhere-to-jump system via simple `data-goto="N"` attributes
+ Fully responsive across desktop, tablet, mobile, and landscape viewports
+ Three Google Fonts loaded: Space Grotesk, DM Sans, JetBrains Mono
+ Compatible with all modern browsers (Chrome, Firefox, Safari, Edge)
The structure follows a real product launch narrative: a cinematic cover, a problem statement, a feature introduction with a tilted mock dashboard, a four-up capability grid, a transparent four-quarter roadmap, beta metrics with sparklines and a customer quote, a side-by-side comparison table with a "Recommended" badge, a cross-promo grid, and a closing call-to-action. Each section uses a unified design system of CSS custom properties, glass-card components, gradient text accents, and a shared font stack of Space Grotesk, DM Sans, and JetBrains Mono. Customizing one part updates the whole deck cleanly.
Navigation is built for both quick demos and long presentations. A popup table-of-contents menu lets viewers jump to any slide. Arrow keys, spacebar, and number shortcuts (1 to 9) work for keyboard-driven walk-throughs. Swipe gestures with vertical-scroll detection handle mobile. On phones the slides become genuinely scrollable when content overflows, the chrome unsticks itself into an in-flow footer to free up screen space, and a custom-styled gradient scrollbar replaces the browser's default. Drop the file into any folder and it just works.
Features
+ Single-file vanilla HTML, CSS, and JavaScript with no frameworks
+ Nine fully designed slides covering a complete product launch story
+ Dark glassmorphic theme with indigo, pink, and cyan gradient accents
+ Unified CSS custom property system for one-line palette and font swaps
+ Popup navigation menu with slide previews and keyboard shortcut hints
+ Smooth cross-fade slide transitions with staggered reveal animations
+ Side-by-side comparison table with a "Recommended" column badge
+ Four-quarter roadmap timeline with status indicators and gradient connector
+ Animated SVG line chart, bar fills, and sparklines on metric cards
+ Tilted glassmorphic mock dashboard preview on the product slide
+ Cross-promotion card grid linking to other TemplateMo templates
+ Mobile-scrollable slides with custom-styled gradient scrollbars
+ In-flow footer on mobile that replaces sticky chrome to save screen space
+ Keyboard navigation: arrow keys, spacebar, M for menu, 1 to 9 to jump
+ Touch swipe gestures with intelligent vertical-scroll detection
+ Click-anywhere-to-jump system via simple `data-goto="N"` attributes
+ Fully responsive across desktop, tablet, mobile, and landscape viewports
+ Three Google Fonts loaded: Space Grotesk, DM Sans, JetBrains Mono
+ Compatible with all modern browsers (Chrome, Firefox, Safari, Edge)