presentation-builder

Presentation Builder Skill

Build full-screen animated slide deck web apps optimized for live presentation.

Inputs

| Parameter | Required | Description | | ----------------- | -------- | ------------------------------- | | Slide count | Yes | Number of slides | | Theme | Yes | dark / light / custom | | Content per slide | Yes | Title, body, media, layout type | | Video backgrounds | Optional | HLS stream URLs per slide | | Brand assets | Optional | Logo SVG, fonts, colors |

Tech Stack

| Package | Purpose | | ----------------- | ---------------------------------------- | | React | Component framework | | Tailwind CSS | Utility-first styling | | hls.js | HLS video background streaming | | lucide-react | Icon library | | Plus Jakarta Sans | Default presentation font (Google Fonts) |

Design System

Global Rules

• Font: Plus Jakarta Sans (400, 500, 700) via Google Fonts import
• Theme: Dark/black throughout, all text white
• Font sizes: Responsive clamp() values (e.g., clamp(12px, 1.05vw, 20px))
• Spacing: Percentage-based (e.g., px-[5.2%], pt-[4%]) for full responsiveness
• No shadows: Use liquid glass aesthetic instead

Liquid Glass Aesthetic

backdrop-filter: blur(24px) saturate(1.4);
background: linear-gradient(
  135deg,
  rgba(255, 255, 255, 0.08),
  rgba(255, 255, 255, 0.03)
);
border: 1px solid rgba(255, 255, 255, 0.12);
/* Subtle radial specular highlight at top-left */

Component Architecture

Presentation.tsx (Framework)

Props: Array of slide React elements, renders full-screen.

Keyboard Navigation:

| Key | Action | | ------------------------------ | ----------------- | | ArrowRight / ArrowDown / Space | Next slide | | ArrowLeft / ArrowUp | Previous slide | | F | Toggle fullscreen | | Escape | Exit fullscreen |

Transitions: 500ms ease-in-out opacity fade + subtle scale (0.95 past, 1.05 future, 1 current).

Auto-hiding Controls (appear on mouse move, hide after 3s inactivity, 300ms fade):

| Position | Element | | ------------- | ----------------------------------------------------------------------------- | | Bottom-left | Slide counter ("1 / 5", white/50, 13px, tabular-nums) | | Bottom-center | Progress dots (6px circles, active = 24px pill white/90, inactive = white/30) | | Bottom-right | Prev/next chevrons + divider + fullscreen toggle (white/50, hover white/90) | | Top-right | Keyboard hints ("Arrow Navigate, F Fullscreen", 11px, white/40) |

Video Background Pattern (per slide)

Identical implementation across all video slides:

// HLS.js: if supported, create instance, load source, attach, auto-play on MANIFEST_PARSED
// Safari fallback: native HLS on <video src={url}>
// <video>: absolute inset-0 w-full h-full object-cover, autoPlay loop muted playsInline
// No overlay, no dimming, 100% opacity
// Content sits on top via relative z-10

Slide Types

Cover Slide

• Video background (HLS)
• Header: logo left, label right
• Center: title (clamp 32px-96px), subtitle (clamp 20px-48px), author (clamp 14px-24px)
• Footer: year centered

Content Slide (Multi-Column)

• Video background (HLS)
• Header: logo, title, page number
• Title section
• 2-3 column layout with stats, paragraphs, mini charts (SVG)

Card Grid Slide

• Video background (HLS)
• Header + centered title
• Card grid: top row (3 cards) + bottom row (2 cards)
• Liquid glass cards with icon, title, description
• Icons from lucide-react (white stroke)

Quote Slide

• Video background (HLS)
• Centered: attribution + quote (smart quotes)
• Max-width 70%

Contact/Outro Slide

• Video background (HLS)
• Title + description paragraph
• Contact items: icon + text, stacked vertically
• Social icons: custom SVG paths for Instagram/Facebook

Workflow

1. Gather content: slides, media, brand assets
2. Scaffold: Presentation.tsx + individual slide components
3. Implement video: HLS.js pattern per slide
4. Style: Liquid glass cards, clamp() typography, percentage spacing
5. Navigation: Keyboard handlers, progress dots, auto-hide controls
6. Wire: App.tsx imports all slides into Presentation component

Output

| Deliverable | Description | | ---------------- | -------------------------------------------------- | | Presentation.tsx | Framework with navigation, transitions, controls | | [Name]Slide.tsx | One component per slide | | App.tsx | Wires slides into Presentation | | index.css | Global styles, font import, liquid glass utilities |

Quality Checklist

• [ ] All font sizes use clamp()
• [ ] All spacing uses percentage values
• [ ] No shadows (liquid glass only)
• [ ] HLS.js with Safari fallback on all video slides
• [ ] Keyboard navigation working (arrows, F, Escape)
• [ ] Controls auto-hide after 3s
• [ ] Transitions smooth (500ms ease-in-out)
• [ ] Responsive at all viewport sizes
• [ ] Content readable over video backgrounds

Related

/brand-identity (brand strategy + presentation design) | /ui-design (component specs) | /design-systems (design tokens)