Show HN: Chorono – Open-source 2D animation editor controllable via MCP

wpnews.pro

Create animations with your AI agent. Refine every layer and keyframe visually.

Chorono is an open-source, local-first 2D animation and motion graphics editor. Use Claude Code or Codex through MCP to create editable scenes, then adjust layers, keyframes, easing and timing in the browser.

Create with an agent or by hand. Work through MCP or use the visual editor directly.
Keep creative control. Refine shapes, text, particles and animation timing in the same scene.
Continue where you left off. Save a portable editable project and reopen it for the next revision.

The editor runs on your computer with Node.js 20+, npm, Git and a modern browser.

Install Chorono · Türkçe kurulum · Editable example · Documentation · Get help

Open the first-animation example to inspect a four-second scene with eight named layers and 51 editable keyframes. Change its headline or a circle's color, save the scene, and reopen it to continue editing.

Claude Code or Codex can set up the editor, start it on your computer, and create editable animations through MCP. Start with the installation guide (Türkçe) or the documentation index.

Install Node.js 20+, npm, Git, and a modern browser. In Terminal on macOS/Linux or PowerShell on Windows:

git clone https://github.com/codie1982/chorono-editor.git
cd chorono-editor
npm ci
npm run cli:build
npm run chorono -- setup
npm run chorono -- start --background --open

setup installs missing editor dependencies, builds missing outputs, prepares MCP client settings, and installs the bundled skills. The default --agent all selects Codex, Claude Code and Claude Desktop for MCP; use --agent codex, --agent claude-code or --agent claude-desktop to select one. Filesystem skills are installed for Codex and Claude Code. Claude Desktop has a separate skill import mechanism.

Use --project /path/to/animation-project on setup, start and doctor to keep animation projects separate from the editor checkout. Existing checkouts are preserved; setup never pulls or resets them. The installation guide covers paths, client settings, stopping and rebuilding.

Open the URL printed by start and choose MCP → Connect this editor. Reload your client's MCP connections or start a new agent session, then check:

npm run chorono -- doctor

Readiness requires a connected editor tab as well as a running server. Reconnect after a browser reload. Ask your agent:

Use Chorono to create a scene with circles and text. Add intro, idle and outro animations, inspect preview frames, and save the editable project.

Portable projects are saved under <animation-project>/projects/. This local MCP workflow needs no model-provider API key. See troubleshooting (Türkçe) if doctor reports an incomplete connection.

Skill	What it teaches the agent	Source
`chorono-setup`	Install/start the editor, configure MCP clients, diagnose connections and manage skills	SKILL.md
`chorono`	Create/edit scenes, keyframes and timelines; inspect preview images; validate and save editable projects	SKILL.md

The source structure keeps the main instructions short and loads topic references when needed:

skills/
├── chorono-setup/
│   ├── SKILL.md
│   └── agents/openai.yaml
└── chorono/
    ├── SKILL.md
    ├── agents/openai.yaml
    └── references/
        ├── connection.md
        ├── animation.md
        ├── interaction.md
        └── media-and-output.md

Setup already installs these skills for the selected agents. To manage only skills from a checkout after npm run cli:build:

npm run skills -- list
npm run skills -- install --dry-run
npm run skills -- install
npm run skills -- check
npm run skills -- update

Project installs go to .agents/skills/ for Codex and .claude/skills/ for Claude Code. Add --global --agent codex for a user-wide Codex install, or choose --agent claude-code. Modified copies are preserved.

Alternatively, install only the instructions directly from GitHub with the third-party skills CLI (currently requires Node.js 22.20+):

npx skills add codie1982/chorono-editor --skill chorono --skill chorono-setup -a claude-code -a codex --copy

Installing skills alone does not install/start the editor or connect MCP. Continue with steps 1–2. See the agent skills guide (Türkçe) for scope, updates and the difference between installation methods.

The standalone CLI source is packages/cli (@codie1982/chorono). This quick start works from GitHub without relying on an npm release. For local tarballs and maintainer packaging, see the distribution guide.

WebGL2-accelerated rendering (feature/gpu-particle-renderer-v1):

Particles via WebGL instanced quads — every particle in an emitter draws in a single GPU draw call
9 SDF particle shapes — Circle, Soft Circle, Rectangle, Rounded Rectangle, Line, Triangle, Star, Smoke Puff, Flame Blob — all anti-aliased in-shader (fwidth)
GPU post-effects — separable Gaussian blur shared by blur, glow, and shadow
After Effects-quality motion blur — accumulation of many equal-weight sub-frame samples (smooth smear, not discrete ghosts)
Automatic CPU fallback — graceful degradation to Canvas 2D when WebGL is unavailable
Smart GPU compositor — correct source-over / additive / screen / multiply blending against the scene below
Hardened — event system on every class, error handling, SSR-safe GPU capability probing, WebGL context-loss recovery

GPU offloads the render; particle simulation (spawn/evaluate) stays on CPU.

Particles   CPU render   GPU render   speedup
   1,000      1.9 ms       0.01 ms      ~140×
  10,000      4.9 ms       0.12 ms       ~42×
  50,000     49.5 ms       0.6 ms        ~84×

At ~50k particles the CPU draw alone (49.5 ms) blows the 16.6 ms/60 FPS budget; the GPU draw stays sub-millisecond.

Natural language animation creation — Describe your animation:"Mavi daire ekle, soldan sağa kay, fade in yap" → instant keyframes
Multi-turn agent loop — AI reasons → mutates scene → verifies → continues (max 5 turns, 30 tools)
Context-aware AI — Scene state, layer visibility, timeline position fed to every agent turn
Read & Mutate tools — Separate action types; AI can inspect before deciding next steps
Intent classification — Zero-cost system prompt analysis (no LLM round-trip)
Quality scoring — Automatic overlap detection, off-screen layers, composition balance check
High-level animation actions —create_stagger_animation ,center_layer ,align_layers ,fit_to_canvas ,create_loop_animation
Anthropic Claude — Native tool-use with caching support
OpenAI GPT-4o — tool_use_id round-trip compatible
Custom providers — Ollama, Groq, Together, Azure, local models
Fallback rendering — Graceful degradation if API unavailable
Editable paths — Circle, Rectangle, Line, Ellipse, Arc, Donut, N-gon, Star
Point editing — Corner, smooth, bezier, bezier-corner types
Segment operations — Insert anchors (De Casteljau), delete, reverse, open/close
Text-to-spline — Convert text outlines to editable splines via OpenType.js
Hit-testing — Point, handle, segment, and contour selection with visual feedback
Select Similar — Match by scale, rotation, edge distance, type, opacity
Select by Transform — Rule-based selection (AND/OR/NOT logic)
Canvas tools — Box, Lasso, Circle, Paint selection modes
Inside vs Touching — 3ds Max Window/Crossing containment toggle
Non-intrusive — Selection state lives in UI layer, doesn't mutate scene
Clone tool — Live instances; source edits propagate automatically
Array patterns — Linear, Grid, Radial, Path, and Repeater (non-destructive)
Path array — Arc-length distribution along Bézier paths
Instance resolver — Render & hit-test aware of instancing hierarchy
Bake support — Convert instance to independent copy
Gizmos — Move, rotate, scale with live visual feedback
Multi-select rotation/scale — Shared pivot (centroid) for multiple layers
Snap guides — Vertex, angle, scale, smart guides with numeric display
Transform history — Every gizmo operation undoable
Out-of-range modes — Constant, Cycle, Loop, Ping-pong, Linear interpolation
Work area & markers — Playback regions, navigation markers (Cmd+click to create)
Keyframe tools — Slide by frame, range select, stagger dialog, spreadsheet editor
Ruler interactions — Shift+drag for range selection, visual feedback
Drive any property — Link layers via expressions and scene parameters
Formula categories — Clamp, Remap, Range, Curve, Phase, Modulo
Live preview — Real-time feedback of wired values
Broken-wire detection — Visual warnings for invalid references
Dock panel — Dedicated wiring panel with enable/edit/delete controls
Track header indicators — Show which parameters are wired
Node-graph editor — Visual state/transition design (SVG-based)
Per-state timelines — Each state references its own Timeline (Rive/Unity Animator model)
Guard conditions — Parameter-based transition rules (no explicit trigger needed)
Blend support — Smooth animation blending between states
Runtime player — ChronoPlayer with multi-state playhead
Export ready — Full .json serialization for headless playback
Sub-mode toggle — [● Animation] [○ State Machine] within single canvas
Full undo/redo — Scripts operate through command system (automatic undo)
Scene API — Add layers, update properties, delete, group
Timeline API — Create tracks, add keyframes, evaluate at time
Event system — Listen to layer events (transform, visibility, etc.)
Expression evaluator — Runtime property calculation with parameter context
MAXScript/Blender Python style —card = scene.add('rect') syntax
Command wrapping — Every script mutation wrapped in undoable command
Game engine foundation — Extensible for future engine workflows
Headless ChronoPlayer — Standalone animation playback (no UI)
DevTools-style console — Live event log, REPL, watch expressions
Macro recording — Record user actions as scripts
Trigger system — Time-based, event-based, and manual triggers
Arithmetic — Sine, Pulse, Quantize, Offset, Scale, Clamp
Noise — Fractal, Jitter, Perlin noise-driven variation
Time manipulation — TimeWarp (slow/fast), EaseCurve, Multiplier
Spring — Oscillation with damping (frequency, damping ratio)
Decay — Exponential falloff
Elastic — Overshoot oscillation
Bounce — Elastic collision simulation
Overshoot — Anticipation + follow-through
Separable Gaussian blur — Shared by blur, glow, and shadow
Motion blur — After Effects-style accumulation (smooth smear)
CSS filter fallback — Graceful degradation on non-GPU browsers
Real-time preview — Effect strength and quality adjustable
6 emission shapes — Point, Line, Circle, Rectangle, Path, Source Layer
9 particle types — Circle, Soft Circle, Rectangle, Rounded Rectangle, Line, Triangle, Star, Smoke Puff, Flame Blob
Scene-layer emission — Emit from any layer's geometry (live motion)
Dedicated dock tab — Separate particle controls from main properties
Density, speed, lifetime — All animatable via keyframes
Rotation, scale, color — Per-particle parameters
Blend modes — Normal, Screen, Additive, Multiply
Particle preview — In-modal SVG ghost preview with preset browser
LifeGradient editor — Animate color/opacity over particle lifetime
Preset browser — Curated particle effect library
Multi-source emitter — Emit from multiple layer geometries
Custom shapes — Polygon, N-gon, spiral, helix
Spawn velocity fields — Direction and speed variation
Tangent-follow orientation — Particles align to motion
File formats — Images (JPG, PNG, WebP, etc.), video (MP4, WebM), audio (MP3, WAV), SVG, Lottie, dotLottie, Chorono scenes
Clipboard support — Paste images directly from clipboard
Asset registry — Centralized collection, inventory, orphan cleanup
Preview & preflight — Single-file modal preview before import
Atomic transactions — All-or-nothing import (undo fully supported)
SVG sanitization — Strip scripts, XXE protection, external-ref blocking
HTTPS-only validation — No mixed-content imports
URL validator — Prevent data: and javascript: URIs
6 align operations — Left, Right, Top, Bottom, Center H/V
3 reference modes — Selection bounds, Canvas bounds, Key Object
Distribute centers/spacing — Equal distribution with gap control
Pack & tidy — Auto-arrange with configurable spacing
Smart guides — Live center, edge, spacing overlays (CSS-filter fallback)
Auto-key — Automatically add keyframes when aligning animated layers
Right-click actions — LayerPanel, SceneCanvas, AssetsPanel, ParametersPanel, EventsPanel
Quick access — Add Layer, Fit/Zoom, Delete, Duplicate workflows

Embed animations in any website:

<script src="https://cdn.chorono.io/web-sdk/latest.js"></script>

<div id="animation-container"></div>

<script>
  const player = new ChronoPlayer({
    container: '#animation-container',
    sceneUrl: 'https://cdn.example.com/my-animation.json',
    autoplay: true,
    loop: true
  });
</script>

Features:

Lightweight bundle — ~45KB (gzipped), lazy-loaded WebGL/Canvas
Event system —play ,`` ,seek ,complete events
Property binding — Drive DOM attributes with animation values
Headless playback — ChronoPlayer with zero UI
Responsive — Auto-scale to container
Browser support — Chrome, Firefox, Safari 12+, Edge, mobile browsers

API:

player.play();
player.();
player.seek(timeMs);
player.setPlaybackRate(1.5);
player.setProperty('layer.id', { opacity: 0.5 });
player.on('complete', () => console.log('Done!'));

Headless playback for Node.js and CLI:

npm install @chorono/runtime

See npm package for latest version.

Features:

Headless ChronoPlayer — Standalone animation playback (no UI)
Server-side rendering — Render frames to PNG/WebP for video generation
CLI tool — Export scenes to MP4, GIF, or frame sequences
Full Scene API — Manipulate scenes programmatically
Event system — Listen to animation events

Native animation playback on Android:

// Gradle
dependencies {
    implementation 'io.chorono:chorono-android:1.0.0'
}

// Usage
val player = ChronoPlayer(context)
player.loadScene(uri)  // File, Uri, or Stream
player.play()

// Listen to events
player.onEvent { event ->
    when(event) {
        is PlayEvent -> Log.d("Chorono", "Playing")
        is CompleteEvent -> Log.d("Chorono", "Finished")
    }
}

// Control playback
player.()
player.seek(2000)  // ms
player.setPlaybackRate(1.5)

Features:

Native Canvas rendering — Android Canvas API (CPU) + OpenGL ES 3.0 (GPU particles optional)
Efficient — Frame-skipping on low-end devices, adaptive quality
Kotlin-first API — Coroutines support, lifecycle-aware
File & Network — Load from assets, Uri, InputStream
Scene composition — Merge multiple scenes, layer visibility control
Event forwarding — Animation events to app logic

Repository	Platform	Language/Framework
`chorono-ios-sdk`	iOS / macOS	Swift
`chorono-macos`	macOS native	Swift
`chorono-flutter`	iOS + Android	Flutter/Dart
`chorono-react-native`	iOS + Android	React Native
`chorono-kmp`	iOS + Android	Kotlin Multiplatform
`chorono-desktop`	Windows / Linux / macOS	Electron
`chorono-qt`	Embedded / Desktop	Qt / C++
`chorono-python`	Server / scripting	Python
`chorono-node`	Server / CLI	Node.js
`chorono-embed`	Lightweight embed	Vanilla JS
`chorono-wechat`	WeChat Mini Program	JS
`chorono-tizen`	Samsung Smart TV	Tizen JS
`chorono-webos`	LG Smart TV	webOS JS
`chorono-harmony`	Huawei devices	HarmonyOS
`chorono-core`	Cross-platform engine	C++
`chorono-gpu`	GPU rendering module	WGSL / GLSL
`chorono-runtime`	Headless playback	TypeScript

The local MCP server is implemented in this repository. It connects Claude Desktop, Claude Code and Codex to the actual editor, with isolated QuickJS scripting, multi-timeline control, PNG previews, portable project persistence and the native ActionRegistry tools.

Run npm run mcp:build, npm run mcp:setup, then npm run dev:mcp (or build and npm run start:mcp). Open http://127.0.0.1:2000, then click MCP → Connect this editor. Generated client configurations are in .chorono/client-configs/. See the MCP setup and tool reference for configuration, all capabilities, security boundaries and smoke tests.

Claude Desktop, Cursor, VS Code Copilot integration:

Native tools — Layer, keyframe, path, spline, particle, parameter and state-machine actions
Live scene — Tools read and mutate a connected browser tab with revision checks and undo/redo
Isolated scripting — QuickJS memory/time limits, atomic edits and commit-without-replay plans
Multiple animations — Explicit timelines, modifiers, controllers, preview isolation and runtime controls
Persistence — Portable scene JSON with embedded local media, runtime JSON, SVG and image sequence exports
Node.js 20+ and npm
Git
Modern browser with WebGL2 support (Chrome, Firefox, Safari 15+, Edge)

git clone https://github.com/codie1982/chorono-editor.git
cd chorono-editor
npm ci
npm run dev

Open http://localhost:2000 (the dev server runs on port 2000)

This starts the manual editor. For agent control, follow Set up and control Chorono from an agent, which also configures MCP and installs skills. Stop any running Next server before installing dependencies or building.

Provider keys are for the editor's built-in AI panel. The external Claude/Codex MCP workflow above uses the model client and needs no provider key in the editor.

ANTHROPIC_API_KEY=sk-...
OPENAI_API_KEY=sk-...
ChronoScene → Layer → Timeline → Track → Keyframe
src/lib/render/gpu/
├── GPUCapabilities.ts                  # WebGL2/WebGL1 + extension detection (SSR-safe)
├── GPUCompositor.ts                    # Identity-transform blend & blit to 2D canvas
├── GPUEvents.ts                        # Shared typed event emitter base
├── particles/
│   ├── ParticleGPUBackend.ts           # Abstract backend
│   ├── WebGLInstancedQuadBackend.ts    # Instanced-quad particle renderer
│   ├── WebGLParticleShader.ts          # 9-shape SDF shaders (WebGL2/1)
│   └── ParticleBufferPacker.ts         # Per-frame instance staging buffer
└── effects/
    ├── GPUEffectShaders.ts             # Blur + motion-blur GLSL
    ├── GPUImageEffects.ts              # Separable Gaussian blur engine
    └── GPUMotionBlur.ts                # Accumulation motion-blur engine

src/lib/render/renderMotionBlurAccumulated.ts   # Motion-blur orchestration

src/lib/core/ — Data model (Layer, Timeline, ChronoScene)
src/lib/editor/ — Commands and state management
src/lib/ai/ — AI integration (ActionRegistry, AgentLoop)
src/lib/render/ — Canvas + GPU rendering pipeline
src/components/ — UI panels and canvas

npm test                    # Run all tests
npm test -- --watch       # Watch mode
npm test -- --coverage    # Coverage report

1,000+ tests (1,086) covering core features, GPU buffer/transform logic, particle physics, and animation.

npm run build
npm start

Critical: Never run next build while dev server is running — it corrupts .next/.

OOP with abstract base classes
Private properties + getter/setters
Event emission for all new classes
Self-documenting code (minimal comments)

Browse the documentation index for the full guide list.

Guide	English	Türkçe
Computer installation and MCP connection	Installation	Bilgisayara kurulum
Skill structure, installation and updates	Agent skills	Ajan skill'leri
Connection and installation problems	Troubleshooting	Sorun giderme
First animation in the editor	Getting started	Başlangıç
JavaScript scene authoring	Scripting	Betik yazımı

Technical references: MCP tools and limits, CLI and skill distribution, and CLI package.

Feature	Status	Highlights
GPU Particle Renderer	✅ Ready	10K+ particles @ 60 FPS, 9 SDF shapes, motion blur
State Machines (FSM)	✅ Ready	Node-graph editor, guard conditions, timeline per-state
Parameter Wiring	✅ Ready	17+ presets, broken-wire detection, track-header indicators
AI Agent Loop	✅ Ready	Multi-turn reasoning, read/mutate tools, intent classification
Spline Object System	✅ Ready	8 primitives, point editing, text-to-spline conversion
Smart Selection	✅ Ready	Select Similar/Transform, canvas tools, Inside/Touching toggle
Clone & Array	✅ Ready	Live instances, 5 array patterns, instance resolver
JavaScript Scripting	✅ Ready	Full undo/redo, Scene/Timeline/Event APIs

Branch	Feature	ETA
`feature/gpu-particle-renderer-v1`	GPU blur + motion blur post-effects	Next
`feature/particle-effect-engine-bl13`	Particle v2 (LifeGradient editor, presets, custom shapes)	Sprint 2
`feat/text-element-typography`	Per-character animation framework	Sprint 3
`feat/align-distribute-tools`	Advanced composition (smart guides, auto-key)	Sprint 3

Chorono is built on a multi-mode architecture. The 2D Animation mode is production-ready today. Additional modes are under active development:

Mode	Description	Status
🎨 Drawing Mode	Vector illustration tools, brush engine, freehand paths	Coming Soon
🎮 Game Engine Mode	GameObjects, physics, collision, state-machine-first workflow	Coming Soon
🎬 Video Editor Mode	Clip timeline, transitions, color grading, multi-track audio	Coming Soon
🧊 3D Modeling Mode	Three.js-based 3D objects, cameras, lighting, GLTF export	Coming Soon

Each mode shares the same AI panel, scripting API, state machine system, and SDK export pipeline — only the scene object type, tools, and renderer change.

Feature	Description	Effort
Particle V2+	Preset browser, physics fields, GPU trails	3 weeks
Runtime Console	DevTools-style debugging	2 weeks
Export formats	MP4, GIF, Lottie, SVG sequences	4 weeks
Drawing Mode	Brush engine + vector illustration	6 weeks
Game Engine Mode	Physics + collision + GameObject system	8 weeks

Install and connect: Follow theinstallation guide (Türkçe ).
Resolve setup or MCP problems: Checktroubleshooting (Türkçe ).
Ask a question, report a bug or suggest a feature:Search existing issues oropen a new issue .
Share your first-run experience: Use thefirst-animation feedback form .
Share your work or discuss workflows: VisitChorono Discussions .

For installation or animation problems, include your operating system, Node.js version, agent client, steps to reproduce, and the expected and actual behavior. If relevant, include the output of npm run chorono -- doctor. Remove API keys, tokens and other private information before sharing logs or project files.

Follow OOP style guide (CLAUDE.md)
Write tests for new features
Emit events for scripting support
Update BACKLOG.md with progress
Create PR with detailed description

MIT License

Made with ❤️ by the Chorono team

One platform. Every screen. Every creative tool.

source & further reading

github.com — original article Show HN: PentestCanvas – Pentesting Workspace; with Claude and Kali Show HN: Overhead – the planes overhead, painted on an e-ink frame Treeverse/Dvc: Data Versioning and ML Experiments

Show HN: Chorono – Open-source 2D animation editor controllable via MCP

Run your AI side-project on zahid.host