<Cover />- A cover slide component with the title and subtitle<QuoteBlock />- A component to show quote with author name<CodeBlock />- A component to show some code<Points />- A slide component for bullet points<Profile />- A slide component for showing profiles of people<SingleImage />- A slide component for showing single large image<MultiImage />- A slide component for showing multiple images<About />- A slide component to tell about yourself<End />- An outro slide component with social links (passlinksto customise,{username}is replaced)
<Wrapper></Wrapper>- A wrapper components with appropriate spacing to wrap your slide/regular components
| Key | Action |
|---|---|
→ / D / PageDown |
Next slide |
← / A / PageUp |
Previous slide |
Shift + F |
Toggle fullscreen |
F |
Toggle footer |
C |
Toggle controls |
P |
Toggle page numbers |
S |
Open presenter view |
Swipe left/right to navigate on touch screens. The current slide is kept in the URL (?slide=3), so refreshing or sharing a link opens the same slide.
Slides are defined in app/page.tsx:
const slides: Slide[] = [
{
id: "cover",
content: <Cover title="Welcome" />,
notes: "Speaker notes, shown in the presenter view",
},
]Press S to open the presenter view in a new window: a timer (R to reset), the current and next slide, and the speaker notes. Navigating in either window moves both.
Print the page (Cmd/Ctrl + P) and save as PDF. Each slide becomes its own 16:9 page.
- Tailwind CSS - for styling
- Motion(prev Framer Motion) - for animations
- Akar Icons - for icons
Install Dependencies
bun installSetup Pre-commit
bun run prepareStart Development Server
bun run devLint all the files
bun run lintFormat all files with oxfmt
bun run formatRun tests
bun run testCheck TypeScript issues
bun run type-checkBuild for Production
bun run buildStart Production Server
bun start