{"id":"0f63a0c8-6281-4b58-9476-c8cd97c3c14d","slug":"celesta","kind":"skill","name":"Celesta","summary":"Celesta is a code-first video tool. Build animated scenes with React and TypeScript, combining video, images, text, shapes, and audio. Preview your work in the Celesta desktop app and export it as an","owner":"mika-f","repoUrl":"https://github.com/mika-f/Celesta","license":"Apache-2.0","licenseTier":"permissive","trust":"community","stars":7,"match":null,"fewStars":false,"format":"skill","createdAt":"2026-08-25T12:36:46.000Z","addedAt":"2026-10-21T17:58:55.821Z","logoUrl":"https://avatars.githubusercontent.com/u/10832834?u=847f31115f5b36d1943285d62f0dcf4fd212dd2b&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["design-media","developer-tools"],"tags":["dekstop-app","motion-graphics","programmatic-video","react","rust","timeline-editor","typescript","video"],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-25T19:59:09.652Z","sample":false,"url":"https://conduits.dev/tools/celesta","language":"Rust","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# Celesta\n\nCelesta is a code-first video tool. Build animated scenes with React and\nTypeScript, combining video, images, text, shapes, and audio. Preview your work\nin the Celesta desktop app and export it as MP4, transparent MOV or WebM, or\nPNG, JPEG, or WebP frames.\n\n**[Website](https://celesta.natsuneko.cat/)** ·\n**[Documentation](https://celesta.natsuneko.cat/en/docs/)** ·\n**[日本語ドキュメント](https://celesta.natsuneko.cat/ja/docs/)** ·\n**[Download](https://github.com/mika-f/Celesta/releases/latest)** ·\n**[Showcase](https://celesta.natsuneko.cat/en/showcase/)**\n\nCelesta is under active development. The official website includes a browser\nplayground, example projects, and the full user guide in English and Japanese.\n\n## See it in action\n\n### [Reel](examples/reel/film.tsx) by Claude Opus 5.5\n\nhttps://github.com/user-attachments/assets/df585cd3-26a1-4d35-aaff-e36eea4e7d14\n\nExplore the [showcase](https://celesta.natsuneko.cat/en/showcase/) to try\nbrowser-ready projects and view their source. The [examples directory](examples)\ncontains the projects and their setup instructions.\n\n## What you can do\n\n- **Compose with React:** build reusable scenes with components, hooks,\n  sequences, transitions, interpolation, and springs.\n- **Create motion graphics:** combine text, shapes, paths, particles, layouts,\n  and visual effects with local or remote media.\n- **Preview as you edit:** play with synchronized audio, scrub or step through\n  frames, and inspect layers and tracks. The app reloads when you save your source.\n- **Adjust on the canvas:** move, rotate, resize, or retype a layer, or edit its\n  props in the Properties tab. Celesta writes the change back into your source,\n  with undo.\n- **Build character dialogue:** combine image or PSD portraits, expressions,\n  subtitles, voice recordings, lip sync, and blinking.\n- **Export and automate:** render videos, PNG, JPEG, or WebP frames, and contact sheets from\n  the desktop app or CLI, with JSON results and MCP tools for scripts and agents.\n\n## Get started\n\n1. [Download and install Celesta](https://celesta.natsuneko.cat/en/docs/installation/)\n   for macOS or Windows. The packages include the React runtime, Node.js, and\n   media dependencies.\n2. Choose **File › Create New Project…**, pick a template, and select a folder.\n3. Edit the generated `film.tsx` in your text editor. Save to reload the preview,\n   then choose **Export…** to write a video.\n\nFor Linux, follow the [source-build guide](https://celesta.natsuneko.cat/en/docs/build-from-source/)\nor use the [headless container](packaging/linux/README.md).\n\nThe website documents the complete workflow:\n\n| Task | Guide |\n| --- | --- |\n| Start a project or use a template | [Create a project](https://celesta.natsuneko.cat/en/docs/create-project/) |\n| Write your first scene | [React compositions](https://celesta.natsuneko.cat/en/docs/react-compositions/) |\n| Play, scrub, and inspect | [Preview](https://celesta.natsuneko.cat/en/docs/preview/) |\n| Export video or check frames from the CLI | [Export](https://celesta.natsuneko.cat/en/docs/export/) |\n| Find components and hooks | [API reference](https://celesta.natsuneko.cat/en/docs/reference/) |\n| Resolve setup or rendering problems | [Troubleshooting](https://celesta.natsuneko.cat/en/docs/troubleshooting/) |\n\n## Use with AI agents\n\nInstall the [Celesta Agent Skill](skills/celesta) to teach coding agents such\nas Claude Code and Codex to write, inspect, and export compositions:\n\n```sh\nnpx skills add mika-f/celesta\n```\n\nThe desktop packages also ship `Celesta-mcp`, an MCP server for project\ninitialization, scene inspection, PNG frame and contact-sheet rendering, video\nexport, and documentation matching the installed version. For example, register\nit with Claude Code on macOS:\n\n```sh\nclaude mcp add celesta -- /Applications/Celesta.app/Contents/MacOS/Celesta-mcp\n```\n\nOn Windows, register `Celesta-mcp.exe` from the install folder. From source,\nbuild it with `cargo build -p celesta-mcp --release`. See the\n[skill setup guide](skills/celesta/references/setup.md) for runtime setup and\n[inspection tools](skills/celesta/scripts) for checks without the GUI.\n\n## Develop Celesta\n\nTo run from source, use Rust 1.89 or later, Node.js 26, the pnpm version in\n[`package.json`](package.json), and your platform's native build tools.\n[`mise.toml`](mise.toml) pins the Node.js and pnpm versions CI uses.\nPrepare the **FFmpeg 8.1.x development libraries** using the\n[source-build guide](https://celesta.natsuneko.cat/en/docs/build-from-source/)\nbefore running Cargo. The FFmpeg executable alone is insufficient; FFmpeg 9\nand later are not supported yet.\n\n```sh\ngit clone https://github.com/mika-f/Celesta.git celesta\ncd celesta\npnpm install\npnpm run build:runtime\ncargo run -p celesta-editor --release -- packages/cli/examples/title.tsx\n```\n\n`pnpm run build:runtime` also generates the TypeScript bindings from the Rust\ntypes. It regenerates them only when those Rust sources change, so run it again\nafter pulling.\n\nOn Linux, clone the repository before preparing FFmpeg so the guide's build\nscript is available. The [source of the build guide](packages/website/content/en/docs/05-(more)/03-build-from-source.md)\nis also in this repository.\n\nAfter building the runtime, check the area you changed. Common checks are:\n\n```sh\npnpm run test:runtime\npnpm run typecheck:examples\ncargo test --workspace --locked\n```\n\nTests that need a GPU adapter, Node.js, or a color emoji font print a line\nstarting with `skipping` and pass when it is missing. On a machine with a GPU,\nset `CELESTA_REQUIRE_GPU=1` so a missing adapter fails the GPU tests instead.\nCI lists the skipped tests in each job's summary.\n\nSee the [CI workflow](.github/workflows/ci.yml) for the full checks and platform\nsetup. For rendering changes, include screenshots of the same scene before and\nafter the change.\n\n### Repository guide\n\n| Location | Contents |\n| --- | --- |\n| [`crates/`](crates) | Native desktop app, renderers, exporter, media pipeline, and MCP server |\n| [`packages/`](packages) | React composition APIs and the Node.js runtime |\n| [`packages/web/`](packages/web/README.md) | Browser evaluator, Canvas preview, and MP4 exporter |\n| [`packages/website/`](packages/website/README.md) | Official website, English and Japanese documentation, and playground |\n| [`examples/`](examples) | Complete video projects; [`packages/cli/examples/`](packages/cli/examples) has smaller API examples |\n| [`templates/`](templates) | Starter projects bundled with Celesta |\n| [`skills/celesta/`](skills/celesta) | Agent instructions, API guides, and inspection scripts |\n| [`HANDOFF.md`](HANDOFF.md) | Architecture, runtime constraints, and validation for contributors |\n| [`docs/handoff/`](docs/handoff) | Dated implementation notes for each feature |\n| [`docs/superpowers/`](docs/superpowers) | Design specs and implementation plans |\n| [`docs/performance/`](docs/performance) | Benchmarks and renderer performance notes |\n\nTo build release packages, use the [macOS](packaging/macos/README.md),\n[Windows](packaging/windows/README.md), or [Linux container](packaging/linux/README.md)\npackaging guide.\n\n## Report a problem\n\n[Open an issue](https://github.com/mika-f/Celesta/issues) with your operating\nsystem, steps to reproduce the problem, and any error message. If possible,\ninclude a small project that reproduces it, along with media you have permission\nto share.\n\n## License\n\nCelesta's own source code is declared under MIT OR Apache-2.0.\n\nThe official Windows and macOS binary packages additionally bundle an FFmpeg\nbuild with the `x264` encoder enabled, which is GPL-2.0-or-later licensed.\nDistributing that FFmpeg build makes the binary package as a whole subject to\nGPL-2.0-or-later, in addition to Celesta's own MIT/Apache-2.0 source license.\nSee [`LICENSE-GPL-2.0`](LICENSE-GPL-2.0) for the license text and\n[`packaging/GPL-SOURCE-OFFER.md`](packaging/GPL-SOURCE-OFFER.md) for the\ncorresponding-source offer that accompanies each release. The same FFmpeg\nbuild also links `libvpx` and `libopus` (BSD-3-Clause), the WebM encoders.\nBuilding Celesta yourself from source, or building it with an LGPL-only FFmpeg\nconfiguration, is not affected.\n"}