Svelte Motion

Make videos programmatically with Svelte

A framework for creating videos programmatically using Svelte and SvelteKit - a lighter and faster alternative to Remotion.

🎯 Goal

Create videos programmatically using Svelte components, with better performance and developer experience.

📦 Project Structure

svelte-motion/
├── packages/
│   ├── core/           # Core API (stores, interpolate, spring)
│   ├── cli/            # Command-line tool
│   ├── renderer/       # Rendering engine (WebCodecs + FFmpeg)
│   ├── player/         # Preview component
│   ├── studio/         # SvelteKit Studio (preview UI)
│   └── utils/          # Utilities
├── templates/
│   └── default/        # Starter project template
├── docs/               # Documentation site
└── docs-planning/      # Planning documents (analyses)

🚀 Status

In Development - This project is in early planning stage.

Roadmap

📄 Planning Documentation

The following documents are available in docs-planning/:

1. research-findings.md - Detailed Remotion analysis
2. architecture-analysis.md - Architecture analysis and migration matrix
3. implementation-design.md - Implementation design with code examples
4. implementation-plan.md - Complete implementation plan (18-week roadmap)
5. TUTORIAL.md - Complete step-by-step tutorial

🛠️ Technologies

• Framework: SvelteKit 2.x
• Language: TypeScript 5.x
• Build: Vite 5.x
• Package Manager: pnpm
• Monorepo: Turborepo
• Rendering: WebCodecs API + FFmpeg

📦 Installation (Future)

# Create new project
npx create-svelte-motion@latest my-video
cd my-video
pnpm install

# Start preview
pnpm dev

# Render video
pnpm render App output.mp4

🤝 Contributing

Contributions are welcome! Please read the planning documents to understand the project vision.

📄 License

MIT

Author: Isamu
Created: 2026-03-26