High-performance, code-first presentation application built with Next.js, Tailwind CSS, and Framer Motion.
- Fixed Resolution Scaling: All slides render at 1920x1080 and scale to fit any viewport
- 120+ Components: Pre-built component library organized into 7 suites
- Smooth Transitions: Powered by Framer Motion
- Code-First: Build presentations programmatically with React
- Keyboard Navigation: Arrow keys, Home, End for slide control
- Scroll Snapping: Smooth slide-to-slide transitions
# Install dependencies
bun install
# Start development server
bun run dev Visit http://localhost:3000 to see your presentation.
The scaling engine that ensures slides render at 1920x1080 and scale to fit the viewport.
Handles slide navigation, scroll snapping, and keyboard controls.
HeroTitleCentered, HeroTitleGradient, HeroTitleSplit, TextBlockQuote, TextListBulleted, TextListCheckmark, TextListNumbered, TextParagraphLarge, TextPullQuote, TextSubheadingWithLine, BadgePill, BadgeCorner, TextHighlight, TextStrokeOutline, TextGlitch
LayoutSplit5050, LayoutSplit6040, LayoutSplit3070, LayoutGrid2x2, LayoutGrid3x3, LayoutFullBleed, LayoutSidebarLeft, LayoutHolyGrail, LayoutBentoGrid, LayoutMasonry, LayoutCardStack, LayoutOverlayCenter, LayoutTimelineVertical, LayoutTimelineHorizontal, LayoutProcessChevrons, LayoutZPattern, LayoutTabsHorizontal, LayoutAccordionVertical, LayoutStickyScroll, LayoutCornerBadge
ChartBarSimple, ChartPieCSS, ChartTrendUp, ChartTrendDown, ChartProgressThermometer, StatBigNumber, StatRow3, StatRow4, StatCardProgress, ChartSWOT, ChartPricingTier, ChartBarStacked, ChartBarVertical, ChartDonutCSS, ChartFunnel, ChartPyramid, ChartVenn2, ChartVenn3, ChartGanttSimple, ChartComparisonTable, ChartRadarSimple, ChartHeatmapGrid, ChartDecisionTree, ChartKpiDashboard, ChartIconArray
CodeBlockSimple, CodeBlockWindow, CodeTerminal, CodeDiffView, CodeInlineSnippet, CodeNpmInstall, CodeFileTree, CodeEnvVars, CodeKeyboardShortcut, CodeGitGraph, CodeJsonViewer, CodeBrowserConsole, CodeStackOverflow, CodeLineFocus, CodeTypewriterBlock
MockupPhonePortrait, MockupLaptopMacbook, MockupBrowserChrome, MockupTabletLandscape, MockupDesktopScreen, MockupWindowMac, MediaImageFrame, MediaAvatarGroup, MediaImageCollage, MediaVideoPlayer, MediaAudioWaveform, MockupPhoneLandscape, MockupPhoneClay, MockupBrowserSafari, MockupAppIcon, MockupTweet, MockupNotification, MockupCreditCard, MockupTicket, MediaBeforeAfterSlider
UtilSpacer, UtilDividerHorizontal, UtilDividerVertical, UtilButtonPrimary, UtilButtonSecondary, UtilButtonGhost, UtilLogoPlaceholder, UtilIconGrid, UtilQRCode, UtilDividerDots, UtilLinkExternal, UtilAvatar, UtilCountdownTimer, UtilConfettiExplosion, UtilSkeletonLoader, UtilAlertBox, UtilTooltip, UtilProgressBarGlobal, UtilArrowHandDrawn, UtilCircleHandDrawn
TemplateTitleSlide, TemplateAgendaSlide, TemplateSectionDivider, TemplateQuoteSlide, TemplateThankYou
Arrow Down/Arrow Right/Space- Next slideArrow Up/Arrow Left- Previous slideHome- First slideEnd- Last slide
- Framework: Next.js 14+ (App Router)
- Styling: Tailwind CSS v4
- Animation: Framer Motion
- Icons: Lucide React
- Fonts: FalakSans (Custom)
- Package Manager: Bun
Decks are automatically discovered! Simply create a deck file and register it once.
- Create your deck file:
decks/my-presentation.tsx
import SlideWrapper from '@/components/core/SlideWrapper';
// Deck metadata (auto-discovered!)
export const deckConfig = {
title: 'My Presentation',
description: 'An amazing presentation',
};
// Export slides
export const slides = [
<SlideWrapper key="slide-1">
{/* Your content */}
</SlideWrapper>,
];- Register once in
decks/index.ts:
const deckModules = {
demo: () => import('./demo'),
'my-presentation': () => import('./my-presentation'), // Add this line
} as const;- That's it! Navigate to
/my-presentation
See DECK_SYSTEM.md for complete documentation.
localhost:3000/ → Lobby (lists all presentations)
localhost:3000/demo → Demo presentation
localhost:3000/your-deck → Your custom deck
- Create your deck:
decks/my-deck.tsx - Register it: Add to
decks/index.ts - Access it:
http://localhost:3000/my-deck
See ROUTING_GUIDE.md for detailed instructions.