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). Apps that bundle their own FFmpeg can point DT.ly at it with DTLY_FFMPEG and DTLY_FFPROBE.

H.264 encoder. MP4 exports use libx264 when your FFmpeg has it. LGPL builds don't (libx264 is GPL), so DT.ly then picks the platform hardware encoder that FFmpeg lists and that passes a tiny test encode (probed once per run): h264_videotoolbox on macOS; h264_nvenc, h264_qsv, h264_amf, then h264_mf on Windows. Force one with DTLY_VIDEO_ENCODER (or videoEncoder in renderVideo, --encoder on dtly render): auto (default), libx264, h264_videotoolbox, h264_mf, h264_qsv, h264_nvenc, h264_amf. The crf option (x264 scale, default 18) maps to each encoder's quality control:

Encoder	Quality options for CRF N
libx264	-crf N -preset medium
h264_videotoolbox	-q:v round(100 − 1.6·N) (CRF 16 → 74, 18 → 71)
h264_mf	-rate_control quality -quality round(100 − 1.6·N)
h264_nvenc	-rc constqp -qp N
h264_qsv	-global_quality N
h264_amf	-rc cqp -qp_i N -qp_p N

If an encoder rejects its quality mode in the test encode (VideoToolbox -q:v needs Apple Silicon), DT.ly uses an average bitrate instead (-b:v, about 9 Mb/s for 1080×1920 at 30 fps and CRF 18). Hardware encoders give somewhat bigger files than x264 at similar quality. When FFmpeg fails, the error carries the end of its own stderr.

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:

Agent	Setup
Codex	codex mcp add dtly -- npx -y @dnyantra/dtly mcp
Cursor	~/.cursor/mcp.json → {"mcpServers": {"dtly": {"command": "npx", "args": ["-y", "@dnyantra/dtly", "mcp"]}}}
Gemini CLI	~/.gemini/settings.json → same mcpServers block as Cursor
VS Code + Copilot	.vscode/mcp.json → {"servers": {"dtly": {"type": "stdio", "command": "npx", "args": ["-y", "@dnyantra/dtly", "mcp"]}}}
Windsurf	~/.codeium/windsurf/mcp_config.json → same mcpServers block as Cursor

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".

Studio — browser preview and timeline editor

npx @dnyantra/dtly studio project.json

This is the beginning of the README. Read the rest at the original. Read the full README ↗