DT.ly

After Effects-style motion graphics for code and AI agents. From the creator of CustomerPro.in.

DT.ly describes a video as plain JSON — compositions, layers, keyframes with easing curves, text animators, masks, track mattes, trim paths, parenting, effects and motion blur — and renders it to MP4. An MCP server lets AI agents edit projects keyframe by keyframe and look at the frames they make.

• Explainers & logos — SVG import as editable shapes, curved paths, shape morphing, repeaters, stars, gradients, and Lottie animations as layers.

• Infographics — counters (with ₹ and lakh/crore formatting), bar, line, donut and progress charts.

• App promos — phone mockups with true-perspective 3D tilt, corner pin, cursor and tap overlays.

• Stylised looks — glitch, RGB split, wave, light leaks; glitch, RGB-whip, warp and flash transitions.

• Colour grading — curves, colour wheels, exposure, temperature, vignette, 3D LUTs (.cube) and adjustment layers.

• Captions — word-highlight captions from SRT/VTT or automatic transcription (Sarvam AI, Indian languages).

• Maps — animated routes from coordinates with pins, labels and distance, over a stitched map background.

• Fine-grained animation — any property can be keyframed with AE-style eases, bezier curves or physical springs; wiggle included.

• Text animators — per grapheme, word or line, with stagger, order, blur, tracking, colour and masked line reveals. Indian scripts (Devanagari etc.) keep their conjuncts while animating.

• Presets — kinetic typography, logo openers, colour-bar openers, slideshows with Ken Burns, push/whip/wipe/zoom transitions, lower thirds, highlight plates. Presets write ordinary layers, so everything stays editable.

• Media — video, image and audio layers, volume keyframes, music mixing.

• Studio — a browser preview and After Effects-style timeline editor that stays in sync with agents.

• Agent-native — 26 MCP tools plus moti, a skill that turns your agent into a motion designer.

• No browser, no lock-in — renders with skia-canvas and FFmpeg. MIT licensed.

Install

Requires Node.js 20+ and FFmpeg on your PATH (brew install ffmpeg, sudo apt install ffmpeg, or winget install ffmpeg).

npm install @dnyantra/dtly

Try it without installing:

npx @dnyantra/dtly init hello.json --starter kinetic --title "Hello"
npx @dnyantra/dtly render hello.json hello.mp4

Use it from Claude Code

Install the plugin (MCP server + the moti skill) in one step:

/plugin install dtly --marketplace dnyantra/dtly

Or add the pieces yourself:

claude mcp add --scope user dtly -- npx -y @dnyantra/dtly mcp
npx @dnyantra/dtly skill install --agent claude

Use it from Codex, Cursor, Gemini CLI, Copilot or Windsurf

The moti skill uses the open Agent Skills format, so one command installs it for every supported agent:

npx skills add dnyantra/dtly          # or: npx @dnyantra/dtly skill install --agent all

Then add the MCP server (the editing tools) to your agent:

npx @dnyantra/dtly setup <agent> prints these steps for your agent. Agents without MCP can still use DT.ly through the skill's CLI fallback (init, still, sheet, render).

Then ask for things like /moti make a 10 second kinetic typography opener for my bakery or "ease the call-to-action in with a spring and move it 0.3 s later".

Related MCP server: ae-mcp

Studio — browser preview and timeline editor

npx @dnyantra/dtly studio project.json

• Live preview with the same renderer as the MP4 export, playback with audio, frame stepping.

• Timeline: drag layer bars to move them, drag the ends to trim, twirl open a layer to see every animated property, drag keyframes to retime them, double-click a property row to add a key. Everything snaps to frames and to the playhead.

• Inspector: After Effects-style stopwatches (⏱ animates a property, ◆ adds/removes a key at the playhead, ◀ ▶ jump between keys), scrubby numbers (drag sideways; Shift ×10, Alt ×0.1), colour pickers, text, an ease editor with curve preview (named eases, bezier, springs), raw JSON for the rest.

• Viewer: click to select the layer under the cursor, drag to move it (keyframes it if animated).

• Undo/redo, autosave to the project file, Render MP4 with progress.

• Live with agents: edits an agent makes through MCP appear instantly; the agent can open the studio for you with the studio_open tool.

The studio listens on 127.0.0.1 only and its API needs a per-session token.

Command line

After npm install -g @dnyantra/dtly (or via npx @dnyantra/dtly …):

dtly init <project.json> [--starter opener|kinetic|bars] [--title "Text"]
dtly render <project.json> <out.mp4> [--from s] [--to s] [--comp id] [--workers n]
dtly still  <project.json> <time> <out.png> [--scale 0.5]
dtly sheet  <project.json> <out.png> <t1,t2,...>
dtly import-svg <project.json> <file.svg> [--width 600] [--at x,y]
dtly captions <project.json> <audio|video|.srt|.vtt|.json> [--lang mr-IN]
dtly map-tiles <out.png> --tiles <url> --route "lat,lon;lat,lon" [--attribution "…"]
dtly studio <project.json> [--port 4400] [--no-open]
dtly presets
dtly mcp
dtly setup <claude|codex|cursor|gemini|copilot|windsurf>
dtly skill install [--agent claude|codex|cursor|gemini|copilot|all] [--project] [--dir path]

Library

import {newProject, addLayer, setKeyframe, PRESETS} from '@dnyantra/dtly';
import {writeProject, renderVideo} from '@dnyantra/dtly/node';

const p = newProject({name: 'Promo', duration: 5, background: '#111'});
addLayer(p, 'main', {
  type: 'text', id: 'title', text: 'Fresh bread daily', size: 120, color: '#ffffff',
  animators: [{unit: 'word', stagger: 0.1, duration: 0.6, ease: 'backOut', from: {opacity: 0, y: 60}}],
});
setKeyframe(p, 'title', 'transform.scale', 0, [90, 90], {spring: {stiffness: 180, damping: 12}});
setKeyframe(p, 'title', 'transform.scale', 1, [100, 100]);
PRESETS['element.highlightWord'].apply(p, 'main', {layer: 'title', at: 1});

writeProject('promo.json', p);
await renderVideo('promo.json', 'promo.mp4');

Entry points: @dnyantra/dtly (model, edits, presets, renderer — browser-safe), @dnyantra/dtly/node (MP4/PNG rendering, project files), @dnyantra/dtly/mcp (MCP server). Installing the package also gives you the dtly command.

The model

Layer index 0 is the top of the stack, as in After Effects. See plugin/skills/moti/SKILL.md for the full guide.

Development

git clone https://github.com/dnyantra/dtly && cd dtly
npm install          # also builds dist/
npm test             # typecheck + end-to-end smoke test (renders + MCP round trip)
npm run test:studio  # drives the Studio in your installed Chrome (puppeteer-core)
npm run dev -- render examples/kinetic.json out.mp4

Opening Claude Code in the repo loads the local MCP server (.mcp.json) and the skill.

Roadmap

• Studio: graph editor, drag-to-reorder layers, multi-select, media import by drag and drop

• Faster rendering: layer-bounds buffers, caching finished layers

• Templates with brand kits and media slots for fixed 30/60 s videos

• Templates with media slots; audio-reactive animation; beat-synced cuts

License

MIT for the code. Bundled fonts (Baloo 2, Mukta) are under the SIL Open Font License 1.1.

DT.ly is made by the creator of CustomerPro.in — WhatsApp marketing, campaigns and AI agents for small businesses.