https://github.com/theexperiencecompany/keyloom
Design Beautiful Motion Graphics Videos 📹
https://github.com/theexperiencecompany/keyloom
agentic motion motion-graphics video
Last synced: 12 days ago
JSON representation
Design Beautiful Motion Graphics Videos 📹
- Host: GitHub
- URL: https://github.com/theexperiencecompany/keyloom
- Owner: theexperiencecompany
- License: mit
- Created: 2026-05-08T06:38:18.000Z (about 2 months ago)
- Default Branch: master
- Last Pushed: 2026-06-22T18:35:27.000Z (14 days ago)
- Last Synced: 2026-06-22T20:18:23.794Z (14 days ago)
- Topics: agentic, motion, motion-graphics, video
- Language: TypeScript
- Homepage: https://keyloom.app
- Size: 104 MB
- Stars: 67
- Watchers: 0
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Roadmap: ROADMAP.md
Awesome Lists containing this project
README
Keyloom
An open-source library of animated video primitives, plus a browser studio to assemble them — built on Remotion.
Browse 70+ animated scenes — every preview is a one-click drop onto the timeline.
Assemble scenes on a timeline, edit per-clip styling and transitions, export to MP4.
---
## Table of Contents
- [What this is](#what-this-is)
- [Two ways to use it](#two-ways-to-use-it)
- [What's inside](#whats-inside)
- [Tech Stack](#tech-stack)
- [Repo layout](#repo-layout)
- [Getting started](#getting-started)
- [License](#license)
- [Contributing](#contributing)
- [Star History](#star-history)
---
## What this is
A set of high-quality, animated video scenes — every scene is a single React component you can copy into your own project. On top of that lives a browser-based **Studio** for stitching scenes on a timeline, configuring per-clip styling and transitions, and exporting to MP4.
No SDK. No install. The library and the studio share the same scene registry, so anything you see in the docs is one click away from being on a timeline.
## Two ways to use it
- **You drive it.** Open the Studio, pick scenes from the Library, edit props in the Inspector, set transitions, hit Export.
- **An agent drives it.** Every scene has a typed props interface that AI coding agents (Claude Code, Codex, Cursor) read trivially. Tell an agent "build me a 12-second SaaS launch reel" and it composes `TitlePopup` → `Terminal` → `BarChart` → `Toast` → `LogoCloud` for you.
## What's inside
- **70+ scenes** — text animations, animated charts (bar / line / area / pie / radar / radial), brand-locked chat (iMessage, WhatsApp, Slack, Discord, Telegram, Instagram), tweets, frame mockups (phone / laptop / browser), feature & pricing cards, terminal, toast, GitHub star button, and more.
- **Universal style controls** — every non-brand-locked scene exposes background / text / font / accent so you can match a brand kit in seconds.
- **Per-clip transitions** — fade, swipe, zoom between scenes.
- **Stackable effects** — fade-out, slide-out, Ken Burns, zoom-out layered on top of any clip.
- **Project save / load** as JSON, plus MP4 export.
## Tech Stack
Keyloom is a Bun + Turbo monorepo. The web app is Next.js; the video engine is Remotion; the agent flow runs on the Vercel AI SDK with OpenAI.
Layer
Tools
Web Frontend
Video Engine
AI / Agent
State & Interaction
Data & UI Atoms
Tooling
Infrastructure
## Repo layout
```
apps/
web/ Next.js app — the Studio, docs, and registry-driven pages
remotion/ Remotion compositions (every scene lives here)
packages/
ui/ Shared shadcn/ui components
```
## Getting started
```bash
bun install
bun run --cwd apps/web dev
```
Then open [http://localhost:3000/studio](http://localhost:3000/studio).
## License
MIT.
---
## Contributing
## Star History
Made with ❤️ by
heygaia.io • Documentation • Contact Us