LeClap

Deterministic, on-device, agent-callable video — composed by prompt or by hand.

Describe a video in one JSON template — sections, filters, music, overlays — then render that same template on a phone (React Native, on-device) or in the browser (WebAssembly). No upload, no server, no generative model: the render is deterministic and reproducible, not sampled.

Quick start · Templates · Library API · Architecture · Docs

✨ What is LeClap?

One JSON template. It renders on Node, in the browser via WebAssembly, and natively on-device on React Native — same template, same pipeline, reproducible run after run on a given platform. No upload, no server, no generative model.

🎥 Demo

https://github.com/user-attachments/assets/e5e6f7a1-3c84-479b-b6d7-83209e83017d

🤔 Why LeClap?

Generative tools can't reproduce a result twice. Cloud renderers can't run in your user's pocket. Remotion renders without a server, but needs a browser engine to do it — LeClap links FFmpeg into the app itself.

_{¹ Per platform, not across them: Node and the browser encode with libx264, Android with libopenh264, iOS with h264_videotoolbox, and the on-device build drops boxblur and rewrites eq→lutyuv. Same composition, different pixels.}

LeClap vs Remotion → — the reasoning behind each row, the full caveats, every claim sourced to vendor docs, and when to pick Remotion instead.

🧰 Highlights

🎬 Don't describe the change. Show it.

LeClap can sit inside an agentic development loop. After implementing a change, an agent collects a short screen recording and a precise review focus, authors a reusable template, validates it, and renders a deterministic MP4. The resulting clip can be attached to a pull or merge request beside the diff, so the reviewer sees the behavior before digging into the implementation.

The workflow is explicit: implement → collect evidence → author template → validate → render → attach to PR/MR. LeClap creates the video artifact; the surrounding workflow decides when and where to upload it.

See the use case → · Run the example · Copy the agent skill

🧭 Let your browser's agent drive the builder

In a browser with WebMCP, the web template builder registers its tools with the browser's own agent: 9 read, 9 edit (each lands as one undo step; undo reverts the agent's own last one) and 5 consequential ones. Replacing the draft, opening a sample, rendering a preview and saving never run until you allow them in the page; capturing stills only reads a preview you already allowed. An Agent drawer turns it on or off, can ask before every edit, and logs each call with an Undo. The page holds no API key, and the tool names the builder shares with @leclap/mcp mean the same on both surfaces.

Watch the 70 s walkthrough · Read the guide

🚀 Quick start

💡 Recommended: mise. mise install provisions Node 24, pnpm 12, FFmpeg 8.1.1, and stable Rust. Node/pnpm release lines and Rust stable can advance; packageManager pins pnpm to 12.6.0. Managing versions yourself? Bring Node ≥ 24.11.0 and pnpm 12.6.0.

git clone https://github.com/heristop/leclap.git
cd leclap
mise install     # Node 24, pnpm 12, FFmpeg 8.1.1 + Rust
pnpm install

Build the shared core, then pick an app:

pnpm --filter ffmpeg-video-composer build
pnpm app:web      # web app — compiles videos in-browser (no server)
pnpm app:expo     # Expo mobile app — compiles fully on-device (no server)

Or use the CLI — @leclap/cli is the leclap dev tool:

npx @leclap/cli samples list          # discover the packaged showcase
npx @leclap/cli samples show web-app-promo
npx @leclap/cli samples export native-timing --output timing.json
npx @leclap/cli init my-video         # scaffold a starter project
npx @leclap/cli render template.json  # render it (`leclap diagnose` checks your FFmpeg)

Or drive it from an AI agent: the @leclap/mcp server exposes the engine as MCP tools — sample discovery → customize → validate → render — with no LLM in the output path.

To hand a template to a person, leclap studio template.json (or the MCP open_in_builder tool) prints a leclap.dev/studio/builder#t=… link that opens it in the web builder. The template travels in the URL fragment, which browsers never send to a server: nothing is uploaded.

The installed CLI and MCP expose all 51 showcase samples (41 native, 10 Remotion), including creative direction and required clips, copy, fonts and assets. Exported descriptor JSON embeds referenced partials; supply your own media before rendering. Registered Remotion effects require the configured MCP Node/Chromium backend and, where indicated, a trusted operator catalog. Discovery itself needs neither FFmpeg nor Remotion. See CLI sample commands and MCP discovery.

📦 Monorepo

pnpm workspaces (apps/*, packages/*, plus examples/llm-remotion-title) — no turbo/nx. The root is a private orchestrator (leclap); ffmpeg-video-composer, @leclap/cli, and @leclap/mcp are published to npm. The web and mobile apps both run the same core — the mobile app drives it fully on-device via the embedded native engine (no server), the web app in-browser via WASM.

🧩 Templates & library

A template is a Zod-validated JSON descriptor — a global block plus an ordered list of sections, each a clip with its own inputs → maps → filters pipeline and {{ variable }} placeholders. Start from a creative-kit template and tweak text, colors, and media — by prompt (MCP) or in the visual builder.

• 📖 Template configuration reference — global config, sections, the FFmpeg pipeline, placeholders.
• 📥 Use it as a library — install, the compile() API, entry points (Node / browser / RN), and automatic FFmpeg detection.

📚 Documentation

• 🌐 Descriptor reference (web) — the full, schema-driven descriptor reference, one page per topic (sections, transitions, looks, grade, motion, audio, captions, filters, examples, JSON Schema).
• 🧩 Template Configuration — the template JSON reference.
• 🖼 Gallery — what every kinetic preset, camera move, graphic, transition, caption style, layout, theme, platform, format, look and footage edit looks like, rendered with leclap snapshot.
• 🎬 Effects Configuration — generated effect contracts, custom registration, bounds, assets and preview/edit workflow.
• ⚙️ Engine Configuration — host ProjectConfig, CLI bindings, MCP flags, deadlines, cache and output precedence.
• ✨ Generate with AI — bring-your-own-key template generation in the web builder, with validation, automatic repair and optional Jev brief routing.
• 🧭 Browser agents (WebMCP) — the builder's in-browser agent tools, confirmations, undo and security.
• 🏗 Architecture — system architecture and design patterns.
• 🔧 FFmpeg Fallback Strategy — how automatic FFmpeg detection works.
• 📱 On-Device Compilation — the serverless Expo compile pipeline.
• 🤖 AGENTS.md — repo layout, commands, and conventions for contributors and AI agents.

Creative direction

Record the visual brief in meta.creativeDirection, then implement it with explicit JSON settings or registered Remotion props. The CLI starter and MCP authoring prompt accept the same direction. See the guide and distinct example treatments.

🤝 Contributing & License

Issues and PRs welcome. Keep changes formatted (pnpm fmt) and lint-clean (pnpm lint) before committing. The code is licensed under the MIT License.

Brand & trademark. The MIT License covers the code, not the brand. The LeClap name and logo are trademarks of Alexandre Mogère — you can fork and reuse the code freely, but please give your fork a different name and don't imply endorsement. See TRADEMARK.md for details.