Vision Deck

A markdown-based presentation builder built with Next.js, MDX, and Framer Motion. Create beautiful, AI-agent-friendly slides using simple .mdx files with frontmatter configuration.

Features

MDX-based slides - Write slides in Markdown with YAML frontmatter
Animated transitions - Smooth Framer Motion animations between slides
Six slide types: Hero, Timeline, Messages, Stats, Quote, and Terminal
Automatic ordering - Slides are sorted alphabetically by filename
Syntax highlighting - Prism-based code highlighting for technical demos
Frontmatter validation - Catch errors before they break your presentation
AI-ready - Clean JSON types and programmatic control for AI agents

🚀 Quick Start

cd preso-builder
npm install
npm run dev

Open http://localhost:3000 to view the presentation.

📺 Demo Presentation

Vision Deck includes a built-in demo showcasing all 6 slide types. The demo slides are numbered 10- through 12- to appear after the existing example slides.

Demo Slide Types

#	Slide	Description
10	Stats	Platform statistics with animated counters
11	Quote	Testimonial with author attribution
12	Terminal	Code walkthrough with syntax highlighting

Running the Demo

The demo is included in the default installation:

npm run dev
# Open http://localhost:3000
# Navigate through all slides using arrow keys or click the dots

Demo Source Files

app/slides/
├── 10-demo-stats.mdx      # Stats slide demo
├── 11-demo-quote.mdx      # Quote slide demo
└── 12-demo-terminal.mdx   # Terminal slide demo

Validate Demo Slides

npm run validate
# ✅ All slides are valid!

Creating Slides

Add .mdx files to the app/slides/ directory. Slides are automatically sorted and rendered in alphabetical order.

Slide Types

1. Hero Slide

For title slides with a main heading and subtitle:

---
type: hero
title: "Your Title Here"
subtitle: "Your subtitle or tagline"
---

2. Timeline Slide

For displaying a chronological sequence of events:

---
type: timeline
title: "Timeline Title"
subtitle: "Optional subtitle"
points:
  - date: "2024 Q1"
    title: "First milestone"
  - date: "2024 Q2"
    title: "Second milestone"
  - date: "2024 Q3"
    title: "Third milestone"
---

3. Messages Slide

For displaying cards with icons and descriptions:

---
type: messages
title: "Key Messages"
cards:
  - number: "01"
    title: "First Message"
    icon: "rocket"
    description: "Description of your first message"
  - number: "02"
    title: "Second Message"
    icon: "star"
    description: "Description of your second message"
  - number: "03"
    title: "Third Message"
    icon: "zap"
    description: "Description of your third message"
---

4. Stats Slide

For KPIs and metrics with animated counters:

---
type: stats
title: "Our Impact"
subtitle: "2024 Annual Report"
layout: "grid"  # options: "grid" | "row" | "columns"
stats:
  - value: 1000
    label: "Total Users"
    suffix: "+"
  - value: 99.9
    label: "Uptime"
    suffix: "%"
  - value: 50000
    label: "Revenue"
    prefix: "$"
  - value: 150
    label: "Team Members"
---

5. Quote Slide

For testimonials and inspiring quotes:

---
type: quote
quote: "The future belongs to those who believe in the beauty of their dreams."
author: "Eleanor Roosevelt"
title: "Visionary Leader"
company: "Historical Figures Inc."
avatar: "https://example.com/avatar.jpg"  # Optional
background: "gradient"  # options: "gradient" | "minimal" | "accent"
---

6. Terminal Slide

For code demonstrations and command tutorials:

---
type: terminal
title: "Quick Start"
theme: "dark"  # options: "dark" | "light" | "monokai"
commands:
  # Terminal command style (with prompt)
  - prompt: "~"
    command: "npm install vision-deck"
    output: "added 3 packages in 2s"
  # Code block style (no prompt, specify language)
  - command: |
      import { createDeck } from 'vision-deck'

      const deck = await createDeck({
        theme: 'dark',
        slides: ['./slides/*.mdx']
      })

      await deck.present()
    language: "typescript"
---

MDX Components

Use these components directly in your slide content for rich formatting:

<Callout type="info" title="Note">
  This is an informational callout box.
</Callout>

<Highlight color="yellow">Important text</Highlight>

<Badge variant="success">New Feature</Badge>

<Progress value={75} label="Completion" />

<Step number={1} title="First Step">
  Content for step 1
</Step>

Component	Props	Description
`<Callout>`	`type?`, `title?`	Info/warning/success/error boxes
`<Highlight>`	`color?`	Text highlighting (yellow, green, blue, pink, purple)
`<Badge>`	`variant?`, `size?`	Status badges
`<Progress>`	`value`, `label?`, `showValue?`, `color?`	Animated progress bars
`<Code>`	-	Inline code styling
`<Counter>`	`value`, `prefix?`, `suffix?`	Animated number counters
`<AnimatedNumber>`	`value`, `decimals?`	Precise animated numbers
`<Step>`	`number`, `title`, `active?`	Step-by-step content
`<AccordionItem>`	`title`, `defaultOpen?`	Collapsible sections

Available Icons

The Messages slide supports icons from Lucide React:

rocket, star, zap, lightning (alias for zap)
target, crosshair, compass
trending-up, growth, chart
shield, lock, key
heart, smile, users
And any other Lucide React icon name

Using Templates

Copy templates from the templates/ directory to app/slides/:

cp templates/stats.mdx.template app/slides/06-stats.mdx
cp templates/quote.mdx.template app/slides/07-quote.mdx
cp templates/terminal.mdx.template app/slides/08-terminal.mdx

Validation

Run the validation script to check your slides for errors:

npm run validate

This will verify:

Required frontmatter fields are present
Array fields have content
Slide types are valid

File Naming

Use numbered prefixes to control slide order:

01-hero.mdx
02-timeline.mdx
03-messages.mdx
04-stats.mdx
05-quote.mdx
06-terminal.mdx

Project Structure

preso-builder/
├── app/
│   ├── slides/          # Add your .mdx slide files here
│   │   ├── 01-hero.mdx
│   │   ├── 02-timeline.mdx
│   │   └── ...
│   ├── api/
│   │   └── slides/      # API endpoint for loading slides
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── slides/          # Slide component definitions
│   │   ├── HeroSlide.tsx
│   │   ├── TimelineSlide.tsx
│   │   ├── MessagesSlide.tsx
│   │   ├── StatsSlide.tsx
│   │   ├── QuoteSlide.tsx
│   │   └── TerminalSlide.tsx
│   └── mdx/             # MDX components for slide content
│       └── MDXComponents.tsx
├── lib/
│   ├── slides.ts        # Slide loading & parsing logic
│   ├── slides-client.ts # Client-side types
│   └── validate-slides.ts # Frontmatter validation
├── templates/           # Slide templates
│   ├── stats.mdx.template
│   ├── quote.mdx.template
│   └── terminal.mdx.template
└── public/              # Static assets

Available Scripts

npm run dev        # Start development server
npm run build      # Build for production
npm run start      # Start production server
npm run lint       # Run ESLint
npm run validate   # Validate slide frontmatter

Tech Stack

Next.js 16 - React framework
React 19 - UI library
MDX - Markdown with JSX
Framer Motion - Animations
Tailwind CSS 4 - Styling
gray-matter - YAML frontmatter parsing
next-mdx-remote - MDX compilation
Lucide React - Icons
prism-react-renderer - Syntax highlighting

AI Agent Integration

Vision Deck is designed for AI agent usage:

Programmatic Slide Control

import { loadSlides, SlideData } from '@/lib/slides-client';

// Load all slides
const slides: SlideData[] = await loadSlides();

// Access slide content programmatically
for (const slide of slides) {
  console.log(`Slide ${slide.id}: ${slide.content.type}`);
}

TypeScript Types

All slide content is strongly typed:

type SlideContent =
  | HeroSlideContent
  | TimelineSlideContent
  | MessagesSlideContent
  | StatsSlideContent
  | QuoteSlideContent
  | TerminalSlideContent;

API Endpoints

GET /api/slides - Returns all slides as JSON for programmatic access

Deployment

Deploy to Vercel with zero configuration:

npm run build

Then connect your repository to Vercel.

Customization

Adding New Slide Types

Define the content type interface in lib/slides.ts and lib/slides-client.ts
Create a new component in components/slides/
Add the component to app/page.tsx for rendering
Add validation schema in lib/validate-slides.ts
Use the new slide type in your .mdx files

Styling

Modify app/globals.css for global styles or use Tailwind utility classes in individual slide components.

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
app		app
components		components
lib		lib
public		public
templates		templates
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next-env.d.ts		next-env.d.ts
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
public-demo-screenshot.png		public-demo-screenshot.png
public-screenshot.png		public-screenshot.png
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

Vision Deck

Features

🚀 Quick Start

📺 Demo Presentation

Demo Slide Types

Running the Demo

Demo Source Files

Validate Demo Slides

Creating Slides

Slide Types

1. Hero Slide

2. Timeline Slide

3. Messages Slide

4. Stats Slide

5. Quote Slide

6. Terminal Slide

MDX Components

Available Icons

Using Templates

Validation

File Naming

Project Structure

Available Scripts

Tech Stack

AI Agent Integration

Programmatic Slide Control

TypeScript Types

API Endpoints

Deployment

Customization

Adding New Slide Types

Styling

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages