pitch-deck
Full-stack pitch deck framework with magic link auth, session tracking, slide analytics, admin dashboard, and a 16:9 animated slide engine. Ships as a Vercel project.
Comes with a demo deck for American Nail — a parody nail company "defeating communism one fastener at a time" with products like The Patriot-16, The Citadel, and The Minuteman. The demo showcases every component in the design system: hero backgrounds, bar charts, image grids, capability cards, testimonials, and more.
Features
- 16:9 animated slide engine — fixed-canvas scaling, scroll-snap navigation, reveal animations, bar chart animations
- Magic link auth — passwordless login via email (Resend)
- Session tracking — slide views + heartbeat beacons
- Admin dashboard — manage access, invites, analytics
- Data room — access-controlled file sharing with download tracking
- Invite links — temporary codes for granting access
- Responsive — works on desktop + mobile (landscape lock, tap navigation)
- Dot rail navigation — section-level nav on desktop, bottom sheet on mobile
Quick Start
# Install deps
npm install
# Build the deck (concatenates slides into content/page.html)
node build.js
# Start local dev server (no auth, no DB needed)
node dev-server.js
# Open http://localhost:3334
Deploy to Vercel
Option A: GitHub Actions (recommended)
A CI workflow at .github/workflows/deploy.yml handles build + deploy. Push to main deploys to production; PRs get preview deployments with a comment.
- Create a Vercel project:
vercel link
- Add a Neon Postgres database (or any Postgres)
- Run the migrations in
migrations/ against your database
- Set these GitHub repository secrets (Settings > Secrets > Actions):
| GitHub Secret | Purpose |
|---|
VERCEL_TOKEN | Vercel personal access token |
VERCEL_ORG_ID | From .vercel/project.json after vercel link |
VERCEL_PROJECT_ID | From .vercel/project.json after vercel link |
POSTGRES_URL | Neon/Postgres connection string |
RESEND_API_KEY | Email sending (magic links) |
RESEND_FROM | Verified sender email address (e.g. Acme <noreply@acme.com>) |
SITE_URL | Production URL (e.g. https://deck.acme.com) |
ADMIN_PASSWORD | Admin dashboard password |
The workflow syncs these secrets to Vercel env vars on each deploy.
Option B: Direct Vercel deploy
vercel link to create/connect a project
- Set env vars in the Vercel dashboard (see table above, skip VERCEL_* ones)
vercel --prod to deploy
Configuration
All runtime config lives in api/_lib/config.js and reads from environment variables:
siteUrl: process.env.SITE_URL || 'http://localhost:3334'
resendFrom: process.env.RESEND_FROM || 'Pitch Deck <noreply@example.com>'
For local dev, create .env.local (gitignored) with your values, or just use the defaults.
Creating Your Own Deck
- Edit
content/slides.yaml to define sections and slide order
- Create HTML files in
content/slides/ for each slide
- Customize colors in
content/head.html (:root CSS variables)
- Run
node build.js to regenerate content/page.html
Slide Types
Each slide is a <div class="slide"> containing a <section> of one type:
.hero — full-bleed hero with background
.section — standard content slide (1600x900, padded)
.act-divider — full-screen interstitial
.cta-section — closing slide
CSS Variables
:root {
--bg: #000000; /* Background */
--text: #ECEEE2; /* Primary text */
--text-secondary: ...; /* Subtitles */
--text-muted: ...; /* Labels */
--accent: #E85D2C; /* Brand accent */
--accent-soft: ...; /* Accent backgrounds */
--divider: ...; /* Borders */
}
Layout Components
.cap-grid — 3/4/2 column card grid
.channels-grid — 3 column info cards
.window-grid — 2 column stat cards
.bar-chart — animated vertical bar chart
.comparison-table — data comparison table
.econ-callout — centered big-number callout
.team-grid — 2 column team member cards
.timeline-grid — 3 column timeline
.logo-wall — horizontal pill-style logo list
Project Structure