@dnyantra/dtly 0.1.1 → 0.2.1

package/dist/studio-app/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>DT.ly Studio</title>
+    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22%3E%3Crect width=%2232%22 height=%2232%22 rx=%227%22 fill=%22%23e8692a%22/%3E%3Cpath d=%22M11 9l13 7-13 7z%22 fill=%22white%22/%3E%3C/svg%3E" />
+    <link rel="stylesheet" href="/app/app.css" />
+    <script>window.DTLY = __DTLY_CONFIG__;</script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/app/app.js"></script>
+  </body>
+</html>

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "0.1.1";
+export declare const VERSION = "0.2.1";
 export declare const BRAND = "DT.ly \u2014 from the creator of CustomerPro.in";

package/dist/version.js

@@ -1,3 +1,3 @@
-export const VERSION = '0.1.1';
+export const VERSION = '0.2.1';
 export const BRAND = 'DT.ly — from the creator of CustomerPro.in';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnyantra/dtly",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "DT.ly — After Effects-style motion graphics as JSON, rendered to MP4, with an MCP server for AI agents. From the creator of CustomerPro.in.",
   "keywords": [
     "motion-graphics",
@@ -58,13 +58,14 @@
     "node": ">=20"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && chmod +x dist/cli.js",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && chmod +x dist/cli.js && node scripts/build-studio.mjs",
     "prepare": "npm run build",
-    "typecheck": "tsc -p .",
+    "typecheck": "tsc -p . && tsc -p tsconfig.app.json",
     "dev": "tsx src/cli.ts",
     "mcp": "tsx src/cli.ts mcp",
     "test": "npm run typecheck && tsx test/smoke.ts",
-    "prepublishOnly": "npm test && npm run build"
+    "prepublishOnly": "npm test && npm run build",
+    "test:studio": "tsx test/studio.e2e.ts"
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.32.1",
@@ -73,6 +74,9 @@
   },
   "devDependencies": {
     "@types/node": "^26.6.5",
+    "esbuild": "^0.28.2",
+    "preact": "^11.0.2",
+    "puppeteer-core": "^24.43.1",
     "tsx": "^4.23.15",
     "typescript": "^7.0.2"
   },

package/plugin/skills/dtly/SKILL.md

@@ -1,89 +1,178 @@
 ---
 name: dtly
-description: Make motion graphics and videos with DT.ly — After Effects-style compositions, layers, keyframes, text animators, kinetic typography, openers, slideshows and transitions — through the dtly MCP tools. Use when asked to create or edit a promo, ad, reel, opener, title sequence, lyric/kinetic text video, slideshow or lower third, or to change timing, easing or animation of an existing DT.ly project.
+description: Make motion graphics and short videos with DT.ly — After Effects-style layers, keyframes and text animators — for ads, promos, reels, openers, kinetic typography, slideshows, lower thirds and title cards, in any language including Indian scripts. Uses the dtly MCP tools (or the dtly CLI). Use when someone asks to make, animate, retime or edit a video, reel, ad, opener or motion graphic, or mentions a DT.ly project.
 ---
 
-# DT.ly motion design
+# DT.ly
 
-DT.ly is a layer-and-keyframe motion engine, modelled on After Effects. A project is a JSON
-file; you edit it only through the `dtly` MCP tools, then look at rendered frames to check it.
+You are the motion designer. You plan the piece, build it layer by layer, look at your own frames,
+and hand over a video someone would actually post.
 
-## Workflow
+The bar: it should feel made by a good studio for this exact brand — every move eased, every line
+readable, nothing on screen that doesn't earn its place.
 
-1. **Plan the beats first.** Write a shot list with times before touching tools: what is on
-   screen, for how long, and what moves. Reading time ≈ 0.4 s per word + 0.5 s, minimum 0.8 s.
-2. `project_create` (default 1080x1920, 30 fps). Scenes that are edited as a unit → `comp_add`
-   and drop them in as `precomp` layers.
-3. Build bottom-up: background (video/image/solid) → graphics → text → audio.
-   `layer_add` uses index 0 = top, so add the background with a high `index` or first.
-4. Reach for presets (`preset_list`) for anything standard, then refine with
-   `keyframe_set` / `keyframe_ease` / `layer_update`.
-5. **Always look.** `render_sheet` across the key moments (entrances mid-way, holds, exits),
-   fix, look again. `render_frame` at scale 0.4 for detail. `project_validate` before export.
-6. `render_video` only when the sheet looks right.
+| Option | Default |
+|---|---|
+| Format | vertical 1080×1920 at 30 fps; also `landscape` 1920×1080, `square` 1080×1080 |
+| Length | 15 s for a reel or ad; 6 s for an opener; follow the brief when it says |
+| Style | inferred from the brief (see [Styles](#styles)) |
+| Language | the language of the brief; keep brand names and numbers as the client writes them |
 
-## The model (AE vocabulary)
+Work in a `dtly-output/` folder in the current directory unless the user names a project file:
+`project.json`, `plan.md`, the final `.mp4`, and a `work/` subfolder for frames and downloads.
 
-| After Effects | DT.ly |
-|---|---|
-| Composition / precomp | `comps[]`, layer `type: "precomp"` |
-| Layer in/out point | `inPoint` / `outPoint` (comp seconds) |
-| Transform | `transform.anchor/position/scale(%)/rotation(°)/opacity(%)/skew` |
-| Stopwatch keyframes | any property as `{keyframes:[{t,v,ease}]}`; `ease` shapes the segment *leaving* that key |
-| Easy Ease / graph editor | `easyEase`, `easeIn`, `easeOut`, `cubicOut`, `expoIn/Out/InOut`, `backOut`, bezier `[x1,y1,x2,y2]`, `{spring:{stiffness,damping}}`, `hold` |
-| wiggle() | `{keyframes:[…], wiggle:{freq, amp, seed}}` |
-| Parenting / null | `parent: layerId`, `type: "null"` (transform only, not opacity) |
-| Masks | `masks: [{shape: rect|ellipse|path, rect:[x,y,w,h] (animatable), inverted}]` in layer space |
-| Track matte | `matte: {layer, mode: alpha|alphaInverted}`; the matte layer is not drawn on its own |
-| Trim Paths | shape `trim: {start, end}` in % — draw-on lines, rings, underlines |
-| Text Animator + range selector | `animators: [{unit: grapheme|word|line, stagger, duration, delay, order, ease, from:{opacity,x,y,scale,rotation,blur,tracking,color}, clip, mode:"out"}]` |
-| Effects | `effects: blur, dropShadow, glow, fill, brightness, saturate, contrast` |
-| Motion blur switch | `motionBlur: {samples, shutter}` |
-| Blending modes | `blendMode: multiply|screen|overlay|add|…` |
-
-Layer-space origins: solids/images/videos/precomps use their top-left with the anchor at the
-centre by default; shapes are centred on the origin; text is anchored at its alignment point,
-vertically centred on the block. Position defaults to comp centre.
-
-## Motion design rules of thumb
-
-- **Ease everything.** Entrances: `cubicOut`/`expoOut` (fast in, gentle settle). Exits: `easeIn`/`expoIn`.
-  Moves between two rests: `easyEase` or `expoInOut`. Linear only for constant drift (Ken Burns, rotation loops).
-- **Timing.** UI-style moves 0.3–0.6 s; titles 0.6–1.2 s; nothing important shorter than 0.25 s.
-  Stagger: graphemes 0.02–0.05 s, words 0.06–0.15 s, lines 0.1–0.2 s.
-- **Overshoot sparingly** (`backOut`, springs): one bouncy element per beat, the rest calm.
-- **Overlap actions.** Start the next element before the previous one settles (≈ 30–50 % overlap); it reads as one gesture.
-- **Hierarchy.** One hero element per moment. Size contrast ≥ 1.6× between title and support text.
-- **Legibility.** Text on footage needs a plate (`box`), a `dropShadow`, or a darkened background
-  (`brightness` 40–60 %). Keep text inside the safe area: for 9:16 keep important content
-  between y ≈ 250 and y ≈ 1600 and x 60–1020 (UI covers the edges on Reels/Shorts).
-- **Hold.** Let finished text sit still long enough to read before the next thing moves.
-- **Kinetic typography.** Vary scale and colour for emphasis words; alternate entrance directions;
-  cut on the beat of the music (markers help: `comp_update` with `markers`).
-
-## Indian scripts (Devanagari, etc.)
-
-- Shaping is correct at any unit; per-grapheme animation keeps conjuncts (क्ष, श्र, र्ह) intact.
-- Prefer `word` units for Marathi/Hindi body text — readers parse whole words; keep `grapheme`
-  effects for short display words.
-- Avoid large `tracking` on Devanagari: it breaks the visual headline (शिरोरेखा) between letters.
-- Bundled fonts: `Baloo 2` (display, default) and `Mukta` (text). Register others in `project.fonts`.
+## 0. Tools
+
+DT.ly's editing tools come from its MCP server: `project_create`, `layer_add`, `keyframe_set`,
+`preset_apply`, `render_sheet`, `render_video`, `studio_open` and more (some agents prefix them
+`dtly` or `mcp__dtly__`). If they're missing, give the user their one-line setup and carry on with
+the CLI meanwhile:
+
+- Claude Code: `claude mcp add --scope user dtly -- npx -y @dnyantra/dtly mcp`
+- Codex: `codex mcp add dtly -- npx -y @dnyantra/dtly mcp`
+- Cursor, Gemini CLI, Windsurf, VS Code Copilot: `npx @dnyantra/dtly setup <agent>` prints the config.
+- **CLI fallback:** edit `project.json` directly (see [The model](#the-model)), check with
+  `dtly sheet project.json work/sheet.png 0.5,2,4` and look at the image, render with
+  `dtly render project.json out.mp4`. `dtly init --starter opener|kinetic|bars` gives a start.
+  Use the installed `dtly` command if there is one (`npm i -g @dnyantra/dtly`); otherwise
+  `npx @dnyantra/dtly …`, which needs network access.
 
-## Presets
+If a tool call is refused for approval, or neither the tools nor the CLI run, stop and tell the user
+exactly what to fix. Don't rebuild the video with other tools — they asked for a DT.ly project they
+can open and edit.
 
-`preset_list` is the source of truth. Highlights:
-- `text.*` — fadeUp, popIn, slam, blurIn, maskedLines, cascade, trackingIn, centerOut, typewriter, colorSweep, exits (`fadeOutDown`, `blurOut`, `maskedLinesOut`).
-- `kinetic.sequence` — phrase-by-phrase kinetic typography with emphasis words.
-- `opener.logoReveal`, `opener.bars` — brand openers.
-- `slides.slideshow` — sliders from images/clips with Ken Burns, captions and transitions.
-- `transition.between` — push, crossfade, zoom, wipe, whip (motion-blurred), slideUp between two overlapping layers.
-- `element.lowerThird`, `element.highlightWord`.
+DT.ly needs Node.js 20+ and FFmpeg on the PATH.
 
-Presets only write ordinary layers and keyframes, so everything they make stays editable.
+## 1. Gather
 
-## Checks before you call it done
+Collect the real material before designing anything.
+
+| Source | What to take from it |
+|---|---|
+| The brief | the offer, the audience, the one action the viewer should take, the script if given |
+| Brand | logo, exact colours, fonts, tagline, phone, address, website |
+| Media | the client's clips and photos — look at them (`render_frame` on a test layer, or extract stills) and note the strongest shots |
+| An existing DT.ly project | `project_describe` first; change only what was asked |
+
+Then answer, in one line each: What is being sold? To whom? Why them over the shop next door? What
+must the viewer remember? What should they do next, and how (call, visit, tap)? What's the visual
+hook for the first two seconds?
+
+Never invent facts: no made-up phone numbers, prices, discounts, ratings or testimonials. If the
+brief leaves a contact detail out, use a clearly marked placeholder and say so when you deliver.
+
+## 2. Plan
+
+Write `plan.md`: the angle, the hook, the beats with durations that add up to the length, the
+style, the colours and fonts, and what moves in each beat.
+
+**Shape for ads and promos:** Hook (2–3 s) → Brand (2–3 s) → 2–3 benefits or proofs → Call to
+action (3–4 s, the phone number or address on screen long enough to write down). A starting
+shape, not a template — openers and kinetic pieces have their own rhythm.
+
+If the user points at one thing — a new product, an offer, a festival — make the whole piece
+about that.
+
+## Creative laws
+
+- **The hook decides.** The first two seconds must move and must say something. Plan them first.
+- **One idea per beat.** One hero element on screen at a time; support text at least 1.6× smaller.
+- **Ease everything.** Entrances `expoOut`/`cubicOut`, exits `easeIn`/`expoIn`, moves between rests
+  `easyEase`. Linear only for slow drifts. One bouncy (`backOut`, spring) element per beat, the rest calm.
+- **Readable.** A line the viewer must read stays fully settled for about 0.35 s per word, counted
+  from when the whole line has landed. Pace comes from cuts and motion, not from yanking text early.
+- **Overlap, don't queue.** Start the next element while the last one is settling (30–50 %). It
+  reads as one gesture instead of a slideshow.
+- **Use the real thing.** The client's footage, photos, logo and words beat stock shapes. Darken or
+  blur footage behind text (`brightness` 40–60 %, light `blur`) rather than hiding it.
+- **Safe and legible.** Keep text inside x 60–1020, y 250–1600 on vertical (platform UI covers the
+  edges). Text on busy footage gets a plate (`box`), a `dropShadow`, or a darker background.
+- **Specific.** Their words, their colours, their town. "Quality you can trust" on its own is banned;
+  say what makes it true.
+- **Every frame postable.** Pause anywhere — it should still look designed.
+
+## Styles
+
+Presets are defaults; a freeform direction from the user ("like a Diwali sale banner") overrides them.
+
+| Style | Feel | Motion and cuts |
+|---|---|---|
+| `clean` | Calm, trustworthy, local business | `fadeUp`/`maskedLines`, pushes and crossfades, long holds |
+| `bold` | Loud offer, sale, launch | `slam`/`popIn`, colour bars, whip transitions, short beats |
+| `premium` | Elegant, restrained | `blurIn`/`trackingIn`, slow eases, lots of empty space |
+| `kinetic` | Words are the visuals | `kinetic.sequence`, emphasis words bigger and coloured, cut on the beat |
+| `festive` | Celebration, greetings | warm palette, `cascade`/`popIn`, gentle wiggle on accents |
+| `explainer` | Steps, features | lower thirds, numbered cards, slideUp transitions |
+
+## Sound
+
+Music sits under everything; a voiceover sits on top of the music. Under a voice keep music around
+0.15–0.25 volume, raise it in the gaps, and fade it out over the last second (`fadeOut`). Match cuts
+to the beat where you can (`comp_update` with `markers` helps). For voiceovers in Indian languages,
+generate them per beat so each line fits its scene, and check the spoken words against the script.
+
+## 3. Build
+
+- `project_create` with the chosen format and length. Scenes edited as a unit → `comp_add` and
+  `precomp` layers.
+- Build bottom-up: background → graphics → text → audio. `layer_add` index 0 is the top.
+- Reach for presets first (`preset_list`): openers, `kinetic.sequence`, `slides.slideshow`,
+  `transition.between`, `element.lowerThird`, the `text.*` animators. They write ordinary layers
+  and keyframes, so refine them with `keyframe_set`, `keyframe_ease`, `keyframe_move`, `layer_update`.
+- If a person is around, `studio_open` early: they watch your edits land live and can drag keyframes
+  or fix text themselves. Their edits save to the same file — `project_describe` again before your
+  next change when they say they adjusted something.
+
+## 4. Look, then fix
+
+Before rendering, `render_sheet` across every beat **and** mid-transition, and `render_frame` at
+scale 0.4 for detail. Fix text overflowing or colliding, low contrast, anything clipped by the safe
+area, and entrances still moving when the viewer should be reading. Two busy layouts crossfading
+make a muddy double exposure: move the old content out, then bring the new in, or dip through the
+background. Run `project_validate`. Only then `render_video`.
+
+## 5. Deliver
+
+- The `.mp4`, plus a poster: the strongest settled frame (text fully landed, not mid-move) saved
+  with `render_frame` as `poster.png`.
+- Tell the user where the files are, the angle in one sentence, any placeholders they must fill,
+  and offer the next step: open it in Studio to tweak, another style, or 30 s / 60 s and square versions.
 
-- `project_validate` returns no problems.
-- A `render_sheet` across the whole timeline shows nothing clipped, overlapping or unreadable,
-  and every entrance has finished before the viewer needs to read it.
-- Audio: music under voice ≈ 0.15–0.25 volume; fade the end (`fadeOut`) so it doesn't cut.
+---
+
+## The model
+
+A project is JSON: `comps[]`, each with `width`, `height`, `fps`, `duration`, `background` and
+`layers[]` (index 0 is the top layer).
+
+| After Effects | DT.ly |
+|---|---|
+| Composition / precomp | `comps[]`, layer `type: "precomp"` |
+| Layer in/out | `inPoint` / `outPoint` (seconds) |
+| Transform | `transform.anchor/position/scale(%)/rotation(°)/opacity(%)/skew` |
+| Keyframes | any property as `{keyframes: [{t, v, ease}]}`; `ease` shapes the segment *leaving* that key |
+| Easing | `easyEase`, `easeIn`, `easeOut`, `cubicOut`, `expoIn/Out/InOut`, `backOut`, bezier `[x1,y1,x2,y2]`, `{spring: {stiffness, damping}}`, `hold` |
+| `wiggle()` | `{keyframes: […], wiggle: {freq, amp, seed}}` |
+| Parenting / null | `parent: layerId`, `type: "null"` (inherits transform, not opacity) |
+| Masks | `masks: [{shape: rect\|ellipse\|path, rect: [x,y,w,h], inverted}]`, in layer space |
+| Track matte | `matte: {layer, mode: alpha\|alphaInverted}` |
+| Trim paths | shape `trim: {start, end}` in % — draw-on lines, rings, underlines |
+| Text animators | `animators: [{unit: grapheme\|word\|line, stagger, duration, delay, order, ease, from: {opacity, x, y, scale, rotation, blur, tracking, color}, clip, mode: "out"}]` |
+| Effects | `blur`, `dropShadow`, `glow`, `fill`, `brightness`, `saturate`, `contrast` |
+| Motion blur | `motionBlur: {samples, shutter}` |
+| Blending | `blendMode: multiply\|screen\|overlay\|add\|…` |
+
+Layer types: `text`, `shape` (`rect`, `ellipse`, `polygon`, `path`, `line`), `solid`, `image`,
+`video` (`trimIn`, `speed`, `volume`), `audio` (`volume`, `fadeIn`, `fadeOut`), `precomp`, `null`.
+Solids, images, videos and precomps are anchored at their centre; shapes are centred on their
+origin; text is anchored at its alignment point, vertically centred. Position defaults to the
+comp centre.
+
+## Indian scripts
+
+- Devanagari and other Indic scripts shape correctly at every unit; per-letter animation keeps
+  conjuncts (क्ष, श्र, र्ह) whole.
+- Animate body text by `word` — readers take Marathi and Hindi in whole words. Save `grapheme`
+  effects for one or two display words.
+- Avoid wide `tracking` on Devanagari; it breaks the headline bar (शिरोरेखा) between letters.
+- Bundled fonts: `Baloo 2` (display, default) and `Mukta` (text). Register others in `project.fonts`.