MotionSlides is a high-fidelity, agentic presentation studio designed to bridge the gap between static design tools and cinematic motion. It brings Apple Keynote-level "Magic Move" transitions, developer-centric diagramming, and an integrated AI Design Studio to the browser.
Built for engineers, architects, and presenters who demand fluid, physics-based animations, MotionSlides treats every slide as a scene state, automatically interpolating motion, color, and structure using an advanced FLIP-based engine.
- Key Features
- AI Design Studio
- Magic Move Engine
- Architecture & Infrastructure Diagramming
- Sharing & Collaboration
- Professional Export
- Shortcuts & Hotkeys
- How To Guide
- Tech Stack
- Project Structure
- Architecture: How it Works
- Developer's Guide (Backend)
- Getting Started
- License
- Infinite Canvas & Camera: Pan, zoom, and navigate a responsive workspace inspired by Figma.
- Unsplash Integration: Built-in background image library with curated presets and custom URL support.
- Smart Identity Tracking: Every element has a unique ID used for seamless state interpolation.
- Theme Awareness: Toggle between sleek Dark and Light modes for both the editor and the presentation viewer.
- Cinematic Experience: A specialized guest interface that hides administrative panels and toolbars for a distraction-free presentation.
- Responsive Viewer: Automatically scales the canvas to fit any screen size while maintaining the intended aspect ratio (16:9, 4:3, 1:1, or 9:16).
MotionSlides includes a unified agentic chat interface designed for rapid technical storytelling:
- Iterative Refinement: A single chat input handles initial generation and continuous refinements. No more context switching.
- System Generation: Describe an architecture (e.g., "A multi-region Kubernetes cluster with RDS"), and the AI builds the complete diagram.
- Content Hydration: Paste a technical README or transcript, and the AI extracts themes, code blocks, and key takeaways into a structured deck.
- Icon Intelligence: Automatic contextual injection of 800+ AWS and GCP assets via a localized RAG icon resolver.
Unlike traditional "slide-by-slide" tools, MotionSlides uses a State-Based Diffing Engine:
- FLIP Animation: Elements present across multiple slides are automatically matched. The engine calculates the delta and applies smooth interpolation.
- Code Morphing: Powered by Shiki and custom LCS diffing. Unchanged code lines slide to new positions, while additions and deletions cascade with staggered delays.
- Spring Physics: All motion uses second-order differential equations (Springs), providing a weighted, premium feel without rigid linear paths.
- Identity Heuristics: Even if you change an element's type or color, MotionSlides maintains its motion identity.
Designed for technical documentation and cloud architecture reviews:
- Smart Anchors: Elements feature "snap-to" handles (Top, Right, Bottom, Left, Center) for precise line routing.
- Advanced Connectors: Support for Elbow, Curved, Straight, and Branching lines that stay attached to their targets during transforms.
- Tiers & Boundaries: Use the Section Tool to define VPC boundaries, security perimeters, or logical groupings with custom dashed borders and corner radii.
- Clustering: Automatically stack and cluster similar infrastructure icons (e.g., EC2 instances) to clean up complex diagrams.
MotionSlides features a robust, offline-first synchronization architecture:
- Link-Based Sharing: Toggle between Private, Link-Shared, and Collaborative modes.
- Monotonic Sync Engine: Uses a Last-Write-Wins (LWW) conflict resolution strategy hardened with monotonic timestamps to prevent clock-skew from blocking updates.
- Incognito Support: Access shared projects instantly via secure Share Keys without requiring a login.
- Persistence: Hybrid storage using Zustand for state, IndexedDB for local persistence, and Drizzle/Postgres for cloud synchronization.
Capture your transitions with frame-perfect accuracy:
- Deterministic Capture Engine: Uses a virtual clock to "freeze" the browser during capture, ensuring every frame of a Magic Move transition is rendered without drops.
- Multi-Format Support: Export high-bitrate WebM/VP9, MP4, or high-fidelity PDF.
- Frame Pipelining: Puppeteer-driven server architecture that pipes raw frame buffers directly into FFmpeg for maximum performance.
| Shortcut | Action |
|---|---|
Cmd/Ctrl + D |
Duplicate selected element(s) |
Cmd/Ctrl + G |
Group selected elements |
Cmd/Ctrl + Shift + G |
Ungroup selected group |
Backspace / Delete |
Delete selected element(s) |
Arrow Up / Down |
Navigate between slides |
| Shortcut | Action |
|---|---|
Space or Arrow Right |
Next Slide / Build Step |
Arrow Left |
Previous Slide / Build Step |
Escape |
Exit Presentation |
Managing complex diagrams is easy with grouping:
- Multi-Select: Click and drag on the canvas to lasso elements, or hold
Shiftwhile clicking. - Group: Press
Cmd/Ctrl + G. A dashed bounding box will appear. - Transform: Dragging or scaling the group handles will affect all children proportionally.
- Ungroup: Press
Cmd/Ctrl + Shift + Gto break the group back into individual elements.
To create a "Magic Move" transition:
- Create an element/elements on Slide 1.
- Duplicate Slide 1 using the icon next to the slide thumbnail, or copy and paste that element into Slide 2.
- Modify its properties on Slide 2 (change position, size, color, or rotation).
- MotionSlides will automatically detect the identical IDs and smoothly animate the transition between states.
- Framework: Next.js / TanStack Start (React 19)
- Animation: Framer Motion
- State: Zustand + IndexedDB
- Styling: Tailwind CSS 4
- Diagramming Core: @xyflow/react
- Icons: Lucide
- Auth: Better-Auth
- Database: PostgreSQL + Drizzle ORM
- AI Pipeline: Vercel AI SDK (GPT-4o, Claude 3.5 Sonnet)
- Syntax Highlighting: Shiki
apps/web: Main React application, editor UI, and TanStack Start server handlers.apps/export-server: Dedicated Node.js service for headless Puppeteer + FFmpeg rendering.packages/shared: Centralized Scene Graph definitions and TypeScript types.scripts/: Tools for asset manifest generation and RAG indexing.
The Magic Move engine operates on a 5-step lifecycle:
- Match: The
motionEnginecompares Slide A and Slide B to find elements with matching IDs or matching heuristics. - Diff: It identifies which elements are Continuing, Added, or Removed.
- Measure: The browser records the "Final" layout of all elements.
- Invert: The engine calculates the delta from the "Initial" layout.
- Animate: Framer Motion projects the elements back to their initial state and animates the deltas using spring physics.
MotionSlides leverages a high-performance backend architecture for AI and media processing.
The backend (TanStack Start handlers) handles the transformation of raw text into structured slide data:
- RAG Icon Resolver: Scans the
public/iconsdirectory to build a contextual map of available SVG paths, ensuring the AI selects real assets. - Structured Output: Uses Zod to enforce strict JSON schemas, guaranteeing that generated slides are always renderable.
- SSE Streaming: Progress events are streamed to the client in real-time.
The export-server handles high-bitrate video synthesis:
- Virtual Clock: Injects a timing override into the browser to capture animations frame-by-frame with 100% determinism.
- Frame Pipelining: Pipes raw JPEG buffers from Puppeteer directly into FFmpeg stdin to minimize disk I/O.
- Node.js (v20+)
- npm (recommended) or pnpm/yarn
- Clone the repository:
git clone https://github.com/Chifez/motion-slides.git
- Install dependencies:
npm install
- Set up environment variables:
Create a
.envfile inapps/webwith your database and AI provider keys. - Start the development studio:
npm run dev
- Open http://localhost:3000 in your browser.
This project is licensed under the MIT License - see the LICENSE file for details.
Built for the creative developer community.