Keyloom

An open-source library of animated video primitives, plus a browser studio to assemble them — built on Remotion.

By TheExperienceCompany

Browse 40+ 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
• Two ways to use it
• What's inside
• Tech Stack
• Repo layout
• Getting started
• License
• Contributing
• 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

• 40+ scenes — text animations, animated charts (bar / line / area / pie / radar / radial), chat mockups (iMessage, WhatsApp, Slack, Discord, Telegram, Instagram), tweets, phone and laptop frames, pricing and testimonial cards, terminal, QR code, GitHub star button, and more.
• Universal style controls — every 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

bun install
cp .env.example apps/web/.env.local   # optional: fill in only what you use
bun run --cwd apps/web dev

Then open http://localhost:3000/studio. The Studio, captions editor and split-screen maker work with no environment variables; forks need DATABASE_URL, Whisper captions need OPENAI_API_KEY, and cloud export needs the REMOTION_* values. See .env.example.

Other useful commands:

bun run typecheck                      # tsc across every workspace
bun run check                          # biome lint + format check
bun run --cwd apps/remotion dev        # Remotion Studio for the compositions
bun run --cwd apps/web mcp             # local stdio MCP server

License

MIT.

---

Contributing

Star History

Made with ❤️ by
heygaia.io • Documentation • Contact Us