A personal creative room where an idea turns into a short motion-graphics film.
Runs on your Mac with Claude Opus 5.5 or GPT-6.1 Sol.
English · 简体中文
<sub>This film was made in Kiteva, from one real run: 28 seconds with local Kokoro narration and a music bed the film agent wrote in code. Above is a silent 14-second loop from the middle; click it for the full MP4 with sound. How it was made.</sub>
Important
Non-commercial license. Kiteva's source is shared under the Kiteva Non-Commercial License. It's based on MIT but adds a no-commercial-use condition, so it's source-available and not an OSI-approved open source license. Third-party parts keep their own licenses. See License.
I'm not a professional designer. I'm a full-stack engineer working on content and creative tools, and along the way I picked up a few creative ideas. Then I noticed Opus 5.5 has a real feel for this kind of work. There's an internal hackathon coming up at my company, and I just find these motion effects fun, so I started collecting motion pieces that had that certain something, along with notes on what technology could make each one. The pile got big. So I built an agent to put that collection and Opus 5.5 to work, to see how far it could go. The results surprised me, so I'm sharing the agent's source here, under non-commercial terms.
I collected a lot. Some of it is dazzling, and some of it is probably wrong. I kept it all anyway 😄
Opus 5.5 is my favourite for the creative part. The Codex provider with GPT-6.1 Sol is wired up too, and I'm trying it out for fun. You choose the provider per project.
Idea → brief → Motion Graphic combinations → previews → full film → review and delivery
<sub>The room right after the intro film finished. The Assistant starts a new idea; each project lives in its own widget.</sub>
- A desktop-style room. Everything happens in windows on a personal desktop: an assistant that walks you through the idea, documents, images, websites, music and lyrics, and settings, plus a material shelf and one widget per project. Nothing calls a model until you pressCreate .
- A brief from your references. A small model reads your files and, if you add websites, opens them in a fresh headlessChromium browser to take screenshots. It writes a structured brief and then checks it.
- Motion Graphic combinations. The main model reads summaries of all 136 Motion Graphics and proposes a dozen or more directions. Each pairs one primary Motion Graphic with supporting ones. A separate evaluator,Typesafe 'sJEV , scores them and keeps the number of directions you asked for (1–5).
- Silent 3-second previews of the same story beat, one per direction, so you can compare.
- The full film continues the preview session you picked, at 1080p or 1440p, 30 or 60 fps, up to 5 minutes, with optional on-screen lyrics and local narration (Kokoro orPocket TTS ).
- Review and delivery. Every render is probed with
ffprobeand fully decoded. WithHyperFrames , the default renderer, layout and contrast checks run too, and findings are repaired in focused rounds. TheMultiplane trial skips those two checks and verifies frame consistency instead. A small model then reviews the result. You get an MP4, a poster, a project ZIP, a playback copy and a Storyboard.
| <sub>Explore all 136 Motion Graphics. Each card plays a reviewed 3-second demo.</sub> | <sub>The two directions Kiteva previewed for the film above. I picked Paper Room.</sub> |
<sub>The intro film's own Storyboard, caught during scene 2 of 9.</sub>
Every preview and film saves a STORYBOARD.json with timed scenes, beats, captions and audio notes
that match the actual composition. The Storyboard page plays it back as a little behind-the-scenes
rehearsal. A stick-figure director and crew (stagehand, lighting, lettering, sound, camera) walk to their
marks when a beat calls for their job, and you can play, replay or scrub through the film's timeline.
To be honest about what it is: the crew is a playful reading of the recorded cues, not real production staff and not a live render monitor. Live progress is in each project's activity lines in the room. And it has nothing to do with the UI-component tool called Storybook.
| Motion Graphics | 136 (assets/catalog/video-style-catalog.json ) |
| Motions | 46 (assets/catalog/motion-pattern-catalog.json ) |
| Technology pool entries | 92 recommendations across visual construction, motion, rendering and supporting tools |
| Bundled authoring skill | 1 (Anatomy ) |
| Renderers | HyperFrames (default),Multiplane (trial),Remotion (fallback only) |
Combinations are where it gets interesting. A direction can mix one primary Motion Graphic with supporting ones (1–3 in total for films under 30 seconds, up to 6 for films over three minutes), and the model picks motions and technologies to suit. That gives far more starting points than any single style. It doesn't promise that every combination works. Some won't, which is why there are previews, an evaluator and repairs.
| Job | Claude projects | Codex projects |
|---|---|---|
| Brief, reference checks, Motion Graphic summaries, lyrics, result review, simple repairs | Claude Haiku 5.5 | GPT-6 Luna |
| Combination proposals, previews, the full film, pacing/style repairs | Claude Opus 5.5 | GPT-6.1 Sol |
| Scoring and choosing directions | JEV viaTypesafe | JEV |
| Recording every call, token count and cost estimate | Governance report | Governance report |
More detail, including the workflow diagrams, is in docs/architecture.md.
You need macOS, Node.js 24+, Chrome or
Chromium, and FFmpeg with ffprobe. Then two kinds of access:
- A model provider, by API key or by an existing signed-in subscription. For Claude, set
ANTHROPIC_API_KEYorCLAUDE_CODE_OAUTH_TOKEN, or just be signed in toClaude Code on this Mac. For Codex, setCODEX_API_KEYorOPENAI_API_KEY, or be signed in to theCodex CLI (~/.codex/auth.json). Subscriptions work, but I haven't tested how subscription usage or remaining percentage is reported. - JEV, configured separately. Put
TYPESAFE_API_KEYin.env.local. It's needed whenever Kiteva generates directions. Picking Motion Graphics yourself skips it.
git clone https://github.com/delexw/kiteva.git
cd kiteva
npm ci
cp .env.example .env.local # add TYPESAFE_API_KEY (provider keys are optional if you're signed in)
npm run build
npm start # open http://127.0.0.1:4317
Optional: npm run speech:setup (Kokoro) or npm run speech:setup:pocket
(Pocket TTS) for local narration. They need Python 3.10–3.13. For UI development, keep the backend running and use npx vite (Vite, http://127.0.0.1:4319).
The catalogs, reviewed artwork and 136 preview clips ship with the repo, so browsing costs nothing. Your projects, uploads, room layout, databases and credentials stay in Git-ignored folders on your machine.
| Part | What it is | Status |
|---|---|---|
| Anatomy | Isometric technical-illustration skill and drawing kit (3D mode is beta) | The one bundled skill. 141 files pinned toe9488296 , SHA-256 checked, MIT, unchanged |
| HyperFrames 0.8.144 | HTML video composition and export | npm dependency, pinned, default renderer |
| Multiplane 0.3.10 | render(t) shot renderer with motion blur |
npm dependency, pinned, trial setting |
| Remotion 4.x | React video renderer | npm dependency, fallback only (has its own license terms) |
reference_browser /capture_video |
Headless website inspection, screenshots and walkthrough recording via Puppeteer | Built into Kiteva, for both providers |
| Kokoro ,Pocket TTS | Local narration | Python set up by npm run speech:setup* . Weights downloaded to Git-ignoredmodels/ |
Claude Agent SDK ,Codex SDK ,@typesafe-ai/sdk |
Model providers and JEV | npm dependencies |
| Caveman | Local token-compression proxy for SDK calls | npm dependency, on by default |
| GSAP ,Three.js ,PixiJS ,Paper.js ,Rough.js ,Motion ,chroma.js ,Pica | Drawing and motion libraries offered to generated films | npm dependencies |
| React ,Ant Design +Ant Design X ,Radix ,Tailwind CSS ,Vite ,Fastify ,Zod | App UI, server and shared contracts | npm dependencies |
| FFmpeg ,Chrome /Chromium ,Python ,Blender (optional) | External tools | Not bundled. You install them |
Being in the 92-entry technology pool doesn't mean a library is installed. Twelve pool entries are recommendations only, and generation can't install packages or use the network. The full list with a status for every entry, plus all 75 direct npm dependencies, is in docs/technology-pool.md.
From Kiteva's own governance report (snapshot 2026-10-17, app pricing date 2026-10-13), my three earlier development projects (all Claude, 90–120 s films, five preview directions each) came to $16.46, $18.73 and $37.42 in SDK-estimated, API-equivalent model usage. More than 90 % of input tokens were cache reads. Nearly all of the cost is Opus writing previews and the film. Haiku's preparation and review work cost cents, and JEV ranking under a cent. The expensive one regenerated its directions and needed nine repair calls.
That's three projects, not a benchmark or a per-minute price. Local compute (render time, electricity) isn't priced, and there's no GPT-6.1 Sol example yet. These are token counts priced at API rates. If you're signed in with a subscription instead of an API key, they are not your bill and not a meter of your plan's allowance. I haven't tested subscription usage or remaining-percentage reporting. Method and caveats: docs/costs.md.
-
macOS only for now (the render sandbox uses
sandbox-exec). Single user, local only. -
Multiplane is a trial: one sound file, no video clips inside scenes, and no automatic layout or contrast checks (frame consistency is still verified).
-
Remotion is a fallback, not a setting, and its renders skip the HyperFrames layout/contrast checks too.
-
No generated singing, image generation or stock footage. Visuals are drawn in code, or come from your uploads and website captures.
-
The catalog is my personal collection. Some descriptions or technology suggestions may be off. Issues are welcome.
-
Generation takes a while, often many minutes per preview, and uses real API credit or subscription usage.
-
Architecture : components, workflow, renderers, capture, skills, storage (Mermaid diagrams)
-
Technology inventory : all 92 pool entries, the bundled skill, renderers, TTS and every dependency
-
Costs : how the governance numbers are computed
-
Intro film provenance : how the film above was made in Kiteva
-
README references : open projects whose READMEs I learned from
Bug reports, catalog corrections and focused PRs are welcome. See CONTRIBUTING.md
for setup, the checks to run (npm run lint, npm test, npm run build), the creative quality bar
(seekable compositions, real rendered frames) and third-party rules.
Kiteva's own code, catalogs and docs are © 2026 Yang Liu (@delexw), licensed under the Kiteva Non-Commercial License. In short: you may use, copy, modify and share it for non-commercial purposes, such as personal projects, learning, research and evaluation, with the notice kept. Internal, non-production evaluation inside an organisation, like trying it at an internal hackathon, counts as non-commercial. Selling it, offering it as a paid service, using it for paid client work, or putting what you make with it into commercial production needs separate permission. Ask in an issue. This summary isn't legal advice, and the LICENSE text is what applies.
Bundled and dependent software keeps its own license: Anatomy (MIT), HyperFrames and Multiplane (Apache-2.0), Remotion (Remotion License), GSAP (GSAP Standard License) and the rest as listed in docs/technology-pool.md. Model providers, speech models and other services have their own terms.