@autoaiai/aicut 0.1.11 → 0.1.13

package/skills/monet-ai-editor-monet/SKILL.md

@@ -1,367 +0,0 @@
----
-name: monet-ai-editor-monet
-description: "AI Video Editor — Agent Control Reference: the method the original skill taught, run as an AICUT film — pages that draw any moment t, cut on tracks. Runs in AICUT: the film is film.html, a page per shot, drawn by `aicut look` and `aicut render`."
-license: MIT
-source: "Monet-AI-Editor/Monet"
----
-
-# AI Video Editor — Agent Control Reference
-
-## Running it in AICUT
-
-AICUT's film is `film.html`: it cuts pages, footage, pictures and sound together on tracks. A page is a web page that
-sets `window.film = { frame(t) }` and draws that moment — no framework, no build step, no composition object, no
-`registerRoot`. Five shots are five pages cut together, not one page that changes scene, so each shot stays trimmable
-and replaceable in Studio.
-
-```sh
-npx -y @autoaiai/aicut@latest          # the manual: the format and the commands, always current
-npx -y @autoaiai/aicut@latest open .   # make this folder a film and print Studio's address
-npx -y @autoaiai/aicut@latest look     # a contact sheet of the whole film, its sound, and a determinism check
-npx -y @autoaiai/aicut@latest look 4.5 # one frame, full size — look at the PNG, not at the code
-npx -y @autoaiai/aicut@latest render   # the MP4, beside film.html
-```
-
-Run the manual before the first film: it is authoritative for the format, and this skill is about the method above it.
-
-Where the words below name another program's part, it becomes this:
-
-| elsewhere | in AICUT |
-|---|---|
-| composition, timeline, project file | `film.html`; tracks and clips inside it |
-| a scene, a sequence, a slide | a page (`pages/<name>.html`) cut onto a track |
-| `useCurrentFrame()`, `interpolate()` | `frame(t)` — the picture depends only on `t`, never on state or `Date.now()` |
-| a still, a screengrab | `aicut look <t>` |
-| `render` / `build` / `export` | `aicut render` (the person can also export from Studio) |
-| a dev server, a preview window | `aicut open` and the Studio address it prints |
-
-Hard rules that hold whatever the method says: the picture depends only on `t`; every value in the person's prompt is
-binding; look at the frames `look` writes before saying a film is done.
-
-
-## ⚠️ FINDING `editorctl` — MANDATORY (read this first)
-
-`editorctl` is the Monet CLI. Always try it directly first — Monet keeps it on `PATH` for every shell it spawns and persists the bin dir to `~/.zshrc` / `~/.bash_profile` so it survives subshells and PATH-rewriting wrappers. **If `command -v editorctl` returns nothing**, fall back in order:
-
-1. `"$HOME/Library/Application Support/Monet/bin/editorctl"` — macOS install (most users)
-2. `node /Applications/Monet.app/Contents/Resources/app.asar.unpacked/out/cli/cli/editorctl.js …`
-3. `node ./out/cli/cli/editorctl.js …` — dev tree
-
-Never give up after the first "command not found". Prefer `editorctl` over raw `curl localhost:51847` — it always exposes the current command surface and arg shapes.
-
-## ⚠️ OUTPUT FILE NAMING — MANDATORY (read this first)
-
-**Never reuse a filename when editing or regenerating a video or image.** The asset cache holds the previous file by path, so writing to the same name silently shows stale content. Every edit/regenerate must produce a **new unique filename** (e.g. `clip_v1.mp4`, `clip_v2.mp4`, or a timestamp suffix). Applies to all video renders, image generations, canvas exports, and thumbnails. If a target path already exists, append `_v2`, `_v3`, … — do not overwrite.
-
-## ⚠️ AUDIO ON MULTI-CLIP TIMELINES — MANDATORY
-
-When adding audio to a timeline with **more than one video clip**, audio cuts at every clip boundary. Required flow:
-
-1. Tell the user: *"To keep audio from cutting between clips, I'll merge all video clips into one combined video first, then add the audio. OK to proceed?"*
-2. Wait for confirmation — do not auto-merge.
-3. Concatenate all clips into a single new file (unique filename per the rule above).
-4. Replace the multi-clip video track with that merged clip, then add the audio.
-
-Single-clip timelines: skip the merge.
-
----
-
-## ⚠️ CANVAS MODE — MANDATORY RULES (read this first)
-
-When `activeView=canvas` is reported by the hook or `editorctl get-state`:
-
-**There are EXACTLY 3 canvas options. No others exist.**
-1. **Paper.js** — code drawing with vector graphics (`canvas-run-paperjs`)
-2. **Matter.js** — physics and animation (`canvas-run-matterjs`)
-3. **GPT image 2** — AI-generated image (`generate-image` + `canvas-add-image`)
-
-**REMOVED — do NOT offer these under any name:**
-- ~~Design mode~~ — removed
-- ~~Editable layers~~ — removed
-- ~~Figma-style layout~~ — removed
-- ~~Node-based design~~ — removed
-- ~~Direct canvas design~~ — removed
-
-When the user asks for something visual in canvas mode, present ONLY these three options using these EXACT labels. Copy them verbatim. Do not invent a fourth option or rephrase option 1 as anything design-related.
-
----
-
-**API Bridge:** `POST http://localhost:51847` — JSON body `{"command":"<name>","args":{...}}`
-
-```python
-import urllib.request, json
-
-def call(command, **args):
-    data = json.dumps({"command": command, "args": args}).encode()
-    req = urllib.request.Request(
-        "http://localhost:51847", data=data,
-        headers={"Content-Type": "application/json"}, method="POST"
-    )
-    return json.loads(urllib.request.urlopen(req).read())["result"]
-
-call("ping")   # → {"status":"ok","version":"1.0.0","port":51847}
-call("help")   # → full command list
-```
----
-```
-
-## Commands
-
-### Project / Settings
-| Command | Args | Returns |
-|---------|------|---------|
-| `get_project` | — | Full project JSON |
-| `get_settings` | — | Model + provider config |
-
-### Assets
-| Command | Args | Returns |
-|---------|------|---------|
-| `list_assets` | — | `[{id, name, path, type, duration, semantic}]` |
-| `get_asset` | `assetId` | Single asset with semantic + transcript |
-| `import_files` | `paths: string[]` | Imported asset records |
-| `transcribe_asset` | `assetId`, `language?` | `{segments}` via Whisper |
-| `embed_assets` | `all?: bool` | `{embedded, total}` via text-embedding-3-small |
-| `search_media` | `query, limit?` | Cosine similarity search (falls back to keyword) |
-| `search_spoken` | `query, limit?` | Substring search within transcribed segments |
-
-### Sequences & Tracks
-| Command | Args | Returns |
-|---------|------|---------|
-| `list_sequences` | — | All sequences |
-| `create_sequence` | `name` | New sequence |
-| `activate_sequence` | `sequenceId` | Activated sequence |
-| `get_tracks` | — | `[{id, name, kind, clipCount}]` for active sequence |
-| `add_track` | `kind: video\|audio\|caption` | Updated sequence |
-
-### Clips
-| Command | Args | Returns |
-|---------|------|---------|
-| `list_clips` | `sequenceId?` | All clips sorted by startTime, with trackKind |
-| `add_clip` | `assetId, trackId, startTime, duration?, inPoint?` | `{clipId, clip}` |
-| `remove_clip` | `clipId` | `{success}` |
-| `move_clip` | `clipId, startTime` | `{success}` |
-| `trim_clip` | `clipId, inPoint?, duration?, startTime?` | Updated clip |
-| `split_clip` | `clipId, time` | Updated sequence |
-| `duplicate_clip` | `clipId, offsetSeconds?` | `{clipId, clip}` |
-| `update_clip_label` | `clipId, label` | `{success}` |
-
-### Effects & Properties
-| Command | Args | Returns |
-|---------|------|---------|
-| `list_effects` | — | Available effects + parameter docs |
-| `add_effect` | `clipId, effectType, parameters` | Updated project |
-| `remove_effect` | `clipId, effectId` | Updated project |
-| `set_speed` | `clipId, speed` | Updated project (0.1–10× playback) |
-| `set_volume` | `clipId, volume` | Updated project (0–4, 1=normal) |
-| `set_transition` | `clipId, side: in\|out, type, duration?` | `{success}` |
-
-### History
-| Command | Args |
-|---------|------|
-| `undo` | — |
-| `redo` | — |
-
----
-
-## Effect Types
-| Type | Parameters |
-|------|-----------|
-| `fade_in` | `duration` (sec) |
-| `fade_out` | `duration` (sec) |
-| `color_grade` | `brightness` (-1→1), `contrast` (0.5→2), `saturation` (0→3) |
-| `blur` | `radius` (px, default 5) |
-| `sharpen` | `amount` (0→3, default 1) |
-
-## Transition Types
-`crossfade` · `dip_to_black` · `wipe` · `slide`
-
----
-
-## Key Concepts
-- `inPoint` = position in the source file where clip playback starts
-- `startTime` = position on the timeline where the clip is placed
-- `duration` = how long the clip plays (can be shorter than source)
-- Every mutation instantly pushes `project:updated` → UI reflects changes live
-- Effects are previewed in real-time (CSS) and baked via FFmpeg on export
-
-## Editing Safety Rules
-- Treat timeline gaps as a bug unless the user explicitly asks for a pause, beat, or black gap.
-- After creating a sequence or moving clips, verify continuity with `list_clips(sequenceId)` and check that each clip starts exactly when the previous clip ends if the edit is meant to be continuous.
-- Do not assume `create_sequence` or `activate_sequence` is enough on its own. Always verify the active sequence afterward with `list_sequences` or `get_project`.
-- When building a spoken highlight cut, move video, audio, captions, and markers together. Do not leave captions or markers on old timings after tightening the edit.
-- If playback appears to stop between clips, inspect the timeline first for empty gaps before assuming the preview player is broken.
-- Prefer exact target starts over cumulative offset math when tightening a cut. Recompute each clip's intended `startTime` from the cut plan.
-
----
-
-## Brand Aesthetic from a URL
-
-> **MANDATORY — NO EXCEPTIONS**: If the user's message contains any URL or domain, you MUST run the fetch commands below and extract brand tokens before writing any canvas/design code. Do not use assumed or memorized brand colors. Fetch first, design second — every time. If the fetch fails, ask the user to paste the hex values; never fall back to guessing.
-
-```bash
-curl -sL "<url>" | grep -Eo '(#[0-9a-fA-F]{3,8}|font-family:[^;"}]+|font-size:[^;"}]+|border-radius:[^;"}]+)' | sort -u | head -60
-```
-```
-Extract: background colors, surface colors, primary/accent colors, text colors, font families, font sizes/weights, border radii, spacing, and box-shadows. Also find the logo — it's the ground truth for brand colors and visual tone. Hard-code those exact values — never guess when a real URL is available.
-```
-
-# Find logo
-curl -sL "<url>" | grep -Eo '(src|href)="[^"]*logo[^"]*"' | head -10
-curl -sL "<url>" | grep 'og:image'
-```
----
-```
-
-## Canvas — Matter.js Physics Frames
-
-Use `canvas_run_matterjs` to place a live interactive physics scene on the canvas.
-
-### MCP tools
-| Tool | Args |
-|------|------|
-| `canvas_run_matterjs` | `id?` (frame id to update), `name?`, `script` (JS string), `width?`, `height?` |
-| `canvas_add_frame` | `name`, `width`, `height`, `mode: 'matterjs'` |
-| `canvas_matterjs_scene` | `style` (balls/stacks/pendulum/bridge/ragdoll), `gravity?`, `count?`, `colors?` |
-| `canvas_frames` | — → `{frames: [{id, name, mode, width, height}]}` |
-
-### Script patterns — pick ONE
-
-**Pattern A — Self-contained (rich UIs, custom 2D drawing, rAF loop)**
-```js
-const { Engine, Bodies, Composite, Mouse, MouseConstraint, Events } = Matter;
-const W = 390, H = 844;
-const engine = Engine.create({ gravity: { y: 1.5 } });
-const canvas = document.querySelector('canvas'); // ← always use this; never create a new one
-canvas.width = W; canvas.height = H;
-const ctx = canvas.getContext('2d');
-// ... add bodies, set up mouse ...
-function loop() {
-  Engine.update(engine, 1000/60);
-  ctx.fillStyle = '#121212'; ctx.fillRect(0, 0, W, H);
-  // draw with ctx
-  requestAnimationFrame(loop);
-}
-loop();
-```
-**Pattern B — Bodies only (template manages engine/render/runner)**
-```
-```js
-// engine, render, width, height, and all Matter vars are already declared — do NOT redeclare them
-var ground = Bodies.rectangle(width/2, height+25, width, 50, { isStatic: true, render: { fillStyle: '#334155' } });
-var ball = Bodies.circle(width/2, 50, 30, { restitution: 0.8, render: { fillStyle: '#5b82f7' } });
-Composite.add(engine.world, [ground, ball]);
-engine.gravity.y = 1;
-// Runner.run and Render.run are called automatically after this script — do not call them here
-
-### Critical rules
-
-- **`Runner.run` needs two args**: `Runner.run(Runner.create(), engine)` — single-arg `Runner.run(engine)` silently does nothing in Matter.js 0.20.0
-- **Never `element: document.body`** in `Render.create` — spawns an invisible second canvas; use `canvas: document.querySelector('canvas')` instead
-- **Never declare `const engine` or `let engine` in Pattern B** — the template already has `var engine`; redeclaring with `const`/`let` causes a SyntaxError that silently blanks the canvas
-- **Never call `Render.run` / `Runner.run` in Pattern B** — the template does this after your script runs; calling them twice causes double-speed or broken rendering
-- **Never import or redeclare Matter vars in Pattern B** — `Engine`, `Bodies`, `Composite`, etc. are already destructured; `const { Engine } = Matter` will SyntaxError
-
-### Pattern B available globals
-`engine` · `render` · `width` · `height` · `Engine` · `Render` · `Runner` · `Bodies` · `Composite` · `World` · `Body` · `Events` · `Constraint` · `Mouse` · `MouseConstraint`
-
-### CLI
-```bash
-editorctl canvas-add-frame "Name" 390 844 matterjs        # matterjs|paperjs|html
-editorctl canvas-run-matterjs <frameId> "$(cat script.js)"
-editorctl canvas-run-paperjs  <frameId> "$(cat script.js)"
-editorctl canvas-run-html     <frameId> "$(cat scene.html)"
-editorctl canvas-frames
-editorctl canvas-done
-```
-```
----
-```
-
-## Remotion — React Video Composition
-
-Use Remotion to generate animated video assets (title cards, lower thirds, slideshows, motion graphics) and import them directly into the timeline.
-
-### MCP tools
-| Tool | Args | Returns |
-|------|------|---------|
-| `video_editor_list_remotion_compositions` | — | List of composition IDs |
-| `video_editor_render_remotion` | `compositionId, outputFilename?, props?, durationInFrames?, fps?` | `{outputPath, assetId}` |
-
-### CLI
-```bash
-npm run remotion:studio                                          # live preview at localhost:3000
-npx -y @autoaiai/aicut@latest render
-```
-
-### Built-in compositions
-| ID | Props |
-|----|-------|
-| `TitleCard` | `title` (str), `subtitle?` (str), `backgroundColor`, `textColor`, `accentColor` — 150 frames @ 30fps |
-| `Slideshow` | `images` (abs path[]), `frameDuration` (frames), `transitionDuration` (frames) — 300 frames @ 30fps |
-| `HtmlInCanvasGlitch` | `title`, `subtitle`, `glitchIntensity` (0–40), `backgroundColor`, `textColor`, `accentColor` — 180 frames @ 30fps. RGB-split glitch via `<HtmlInCanvas>` |
-
-### HTML-in-canvas (Remotion ≥ 4.0.455)
-
-> ⚠️ **Naming collision — read first.** Remotion `<HtmlInCanvas>` (this section) produces a **video file** for the timeline. **Monet canvas HTML frames** (`canvas-add-frame ... html`, `canvas_update_frame`) produce a **live HTML scene in the canvas-tab artboard**. Different systems. Pick by destination: timeline → Remotion; canvas tab → Monet HTML frame. Never mix the two in one task.
-
-Use [`<HtmlInCanvas>`](https://www.remotion.dev/docs/html-in-canvas) to draw a DOM subtree into a `<canvas>` and post-process with Canvas 2D / WebGL / WebGPU. Best for glitch, magnifying glass, CRT, displacement, hue-rotate effects.
-
-```tsx
-import { HtmlInCanvas, type HtmlInCanvasOnPaint } from 'remotion'
-
-const onPaint: HtmlInCanvasOnPaint = ({ canvas, element, elementImage }) => {
-  const ctx = canvas.getContext('2d')!
-  ctx.reset()
-  ctx.filter = 'blur(8px)'
-  const transform = ctx.drawElementImage(elementImage, 0, 0)
-  element.style.transform = transform.toString() // <-- always reapply
-}
-
-<HtmlInCanvas width={1920} height={1080} onPaint={onPaint}>
-  <YourDomTree />
-</HtmlInCanvas>
-```
-Rules:
-- **Always** reapply the `drawElementImage` return value to `element.style.transform` so layout/input stay correct.
-- **Never** nest `<HtmlInCanvas>` inside another — Chrome paints only the outer one and Remotion throws. Merge effects into one `onPaint`.
-- `Config.setChromiumOpenGlRenderer('angle')` is already set in `remotion.config.ts` so WebGL/WebGPU shaders render correctly via `npx remotion render` and our MCP renderer.
-- Studio preview needs Chrome Canary ≥ 149 with `chrome://flags/#canvas-draw-element` enabled. Renders work everywhere — Remotion ships its own patched Chromium.
-```
-
-### Adding a composition
-1. Create `remotion/src/compositions/MyComp.tsx` — export `myCompSchema` (zod) + `MyComp` component
-2. Register in `remotion/src/Root.tsx` with `<Composition id="MyComp" ... />`
-3. Renders go to `remotion-renders/` and are auto-imported when using the MCP tool
-
-### Timing
-- Duration is in **frames** (`durationInFrames`). Default fps = 30. 30 frames = 1 second.
-- Use `useCurrentFrame()` + `spring()` + `interpolate()` for animation.
-
----
-
-## Example — Minimal Edit
-
-```python
-assets = call("list_assets")
-tracks = call("get_tracks")
-
-vid = next(a for a in assets if a["type"] == "video")
-vt  = next(t for t in tracks if t["kind"] == "video")
-
-# Place first 10s of video at t=0
-r = call("add_clip", assetId=vid["id"], trackId=vt["id"],
-         startTime=0, duration=10, inPoint=0)
-cid = r["clipId"]
-
-# Fade in over 1s, color grade, transition out
-call("add_effect", clipId=cid, effectType="fade_in", parameters={"duration": 1.0})
-call("add_effect", clipId=cid, effectType="color_grade",
-     parameters={"brightness": 0.05, "contrast": 1.1, "saturation": 1.2})
-call("set_transition", clipId=cid, side="out", type="dip_to_black", duration=0.8)
-
-## Source
-
-Rewritten for AICUT from [`Monet-AI-Editor/Monet`](https://github.com/Monet-AI-Editor/Monet)
-(MIT), SKILL.md. The method is that skill's own; the way it runs is AICUT's.
-
-The repository holds 2 skills; this is the one its entry stands for.

package/skills/motion-graphics/SKILL.md

@@ -1,206 +0,0 @@
----
-name: motion-graphics
-description: "Build frame-exact motion graphics — animated logos, kinetic typography, brand videos, animated titles and social clips — as a single HTML file driven by a paused Web Animations timeline, then export them to MP4 in 1:1, 4:5 and 9:16. Use this whenever someone wants to animate a wordmark or logo, make a video from text, build a title sequence or lower third, produce a clip for LinkedIn / Instagram / Reels / TikTok, \"turn this design into a video\", animate a landing-page hero, or export a web animation to a video file — and also when an existing animation of this kind needs fixing, retiming, restyling or re-exporting. Reach for it even if the person only says \"animate our logo\", \"make this move\", or \"I need a short video for the launch\", without naming any of the above. Runs in AICUT: the film is film.html, a page per shot, drawn by `aicut look` and `aicut render`."
-license: MIT
-source: "acelera-agency/html-animation"
----
-
-# Motion graphics as code
-
-## Running it in AICUT
-
-AICUT's film is `film.html`: it cuts pages, footage, pictures and sound together on tracks. A page is a web page that
-sets `window.film = { frame(t) }` and draws that moment — no framework, no build step, no composition object, no
-`registerRoot`. Five shots are five pages cut together, not one page that changes scene, so each shot stays trimmable
-and replaceable in Studio.
-
-```sh
-npx -y @autoaiai/aicut@latest          # the manual: the format and the commands, always current
-npx -y @autoaiai/aicut@latest open .   # make this folder a film and print Studio's address
-npx -y @autoaiai/aicut@latest look     # a contact sheet of the whole film, its sound, and a determinism check
-npx -y @autoaiai/aicut@latest look 4.5 # one frame, full size — look at the PNG, not at the code
-npx -y @autoaiai/aicut@latest render   # the MP4, beside film.html
-```
-
-Run the manual before the first film: it is authoritative for the format, and this skill is about the method above it.
-
-Where the words below name another program's part, it becomes this:
-
-| elsewhere | in AICUT |
-|---|---|
-| composition, timeline, project file | `film.html`; tracks and clips inside it |
-| a scene, a sequence, a slide | a page (`pages/<name>.html`) cut onto a track |
-| `useCurrentFrame()`, `interpolate()` | `frame(t)` — the picture depends only on `t`, never on state or `Date.now()` |
-| a still, a screengrab | `aicut look <t>` |
-| `render` / `build` / `export` | `aicut render` (the person can also export from Studio) |
-| a dev server, a preview window | `aicut open` and the Studio address it prints |
-
-Hard rules that hold whatever the method says: the picture depends only on `t`; every value in the person's prompt is
-binding; look at the frames `look` writes before saying a film is done.
-
-
-Everything here is built the same way: **one HTML file, one paused timeline, deterministic export**. No video editor, no After Effects, no timeline GUI. The animation is code, so it is diffable, reviewable, re-renderable at any size, and — crucially — *measurable*.
-
-That last word is the heart of this skill. Motion work invites eyeballing, and eyeballing lies. Nearly every real defect you will hit here is invisible to a glance and obvious to a measurement, and several things that *look* broken turn out to be the measuring script's fault. Build the habit early: when something looks wrong, get a number before you get an opinion.
-
-## The shape of the thing
-
-```
-project/
-├── video.html      # canvas, scenes, timeline — the whole animation
-├── export.js       # frame-by-frame capture → MP4, all aspect ratios
-└── verify.js       # whatever you need to assert about this piece
-```
-```
-Copy `assets/starter.html` to begin. It is a complete, working animation with the engine already wired — type that enters, a recurring mark that highlights a word, and a scene that exits. Its palette and motif are placeholders; the structure is the point. Read it before writing anything; it is faster than assembling the pieces from the references.
-
-`scripts/timeline.js` is the engine and `scripts/physics.js` the simulator — inline both into the HTML, since a single self-contained file is the deliverable. `scripts/export.js` and `scripts/verify.js` run in Node and work unchanged for any project that exposes `window.__seek` and `window.__duration`.
-```
-
-## Why a paused timeline
-
-CSS animations and libraries run on wall-clock time. That is fine for a website and useless for a video: to capture frame 847 you must be able to *put* the animation at frame 847, exactly, on demand.
-
-So: every animation is created through the Web Animations API with `fill: 'both'`, its absolute start time baked into the timing as `delay`, and immediately paused. Then
-
-```js
-function seek(s){ A.forEach(a => { a.pause(); a.currentTime = s * 1000; }); }
-```
-positions the entire piece at any instant. The exporter walks `0 → duration` in `1/fps` steps and screenshots. The result is identical on any machine and does not care whether the browser can hit 60fps in real time.
-
-This buys you something else: you can *interrogate* any moment. `seek(7.2)` then read a `getBoundingClientRect()`. That is what makes the verification below possible.
-```
-
-## Workflow
-
-**1. Lay out the canvas.** Fixed internal coordinates (1080 wide is a good default), scenes absolutely positioned and stacked, only the height varying per aspect ratio. Read `references/craft.md` before placing type — optical centering is not the same as centering the box, and getting it wrong is the single most common reason a composition "feels off" without anyone being able to say why.
-
-**2. Build the timeline.** Scene by scene. Give each element one animation covering its whole life. Keep an eye on the four failure modes below; they account for most of the time lost on work like this.
-
-**3. Verify by measuring.** Before showing anything, write the small script that checks the thing you are unsure about. `references/verify.md` has the recipes and, more importantly, the traps in the measuring scripts themselves.
-
-**4. Export.** `node export.js` → the MP4s. `references/export.md` covers the encoder flags that decide whether a platform accepts your file.
-
-## The four things that will bite you
-
-These are not style preferences. Each one produced a bug that survived visual review.
-
-### One animation per element
-
-Entrance, hold and exit go in a single keyframe list. Two animations with `fill: 'both'` touching the same property collide, and **the later-created one wins from time zero** — so an element that should appear at 14s is visible from the first frame, with its "before" state applied backwards through the whole piece.
-
-The symptom is bizarre and misleading: content from a later scene bleeding through an earlier one. If you see that, count the animations on the element.
-
-### `seek()` must pause first
-
-A preview loop keeps playing. Set `currentTime` on a *running* animation and it advances a few milliseconds before the screenshot lands. This is not a preview annoyance — it silently corrupts **every frame of the export**, and the result looks plausible enough that you will ship it.
-
-Pause, then set the time, and cancel the preview loop the first time an external seek arrives.
-
-### Keyframe times must be monotonic
-
-When you chain moves — "then it hops here, then there" — it is easy to schedule one before the previous finished. WAAPI rejects the whole animation with `Offsets must be monotonically non-decreasing`, which tells you nothing about which move overlapped.
-
-Clamp on the way in, so the times in your script are *intentions* rather than fragile arithmetic:
-
-```js
-const push = (t, s, ease) => { t = Math.max(t, lastT); lastT = t; /* ... */ };
-```
-The same hazard reappears in anything assembled from several sequences (a shared camera track, for instance). Clamp there too.
-```
-
-### Measure before you animate
-
-`fill: 'both'` applies the first keyframe immediately, so the moment you create the animations, every `getBoundingClientRect()` reflects a transform. Do all layout measurement first, then build the timeline. Ordering: build DOM → optically centre → measure targets → create animations.
-
-## Pick a motion language, then hold to it
-
-The most common way a piece looks amateur is that different elements arrive in different ways. Choose **one** way things enter and one way they leave, and apply it everywhere. Which one is a **tone** decision, not a technical one:
-
-| Language | Says | `MG.ENTER` / `MG.EXIT` |
-| --- | --- | --- |
-| Speed — arrives fast with a directional smear and brakes | urgency, sport, news, "we move fast" | `speed` |
-| Pop — grows from nothing and overshoots | playful, product, consumer, toy | `pop` |
-| Wipe — a hard edge uncovers it, nothing moves | editorial, architectural, confident | `wipe` |
-| Drift — barely moves, the fade does the work | premium, calm, luxury, serious | `drift` |
-| Rise — comes up out of its own baseline | cinematic titles, credits | `rise` |
-| Focus — comes into focus from blurred | photographic, dreamy, memory | `focus` |
-
-They return keyframe *steps*, so an entrance and an exit concatenate into one list:
-
-```js
-tl(el, [...MG.ENTER.pop(tIn, {size: fs}), ...MG.EXIT.drift(tOut, {size: fs})]);
-```
-Nothing about the rest of this skill assumes a particular one. If a brief does not suggest a tone, ask — it is a bigger decision than any timing.
-```
-
-## What holds regardless of language
-
-**Nothing should ever be perfectly still.** A frame that holds motionless for two seconds reads as *stuck*, even at a flawless 60fps. Every scene gets a slow continuous push — settle over ~1.5s, then keep drifting a fraction of a percent. Around 0.7% total; at 1.4% people notice things "levitating".
-
-**Arrivals decelerate, departures accelerate.** Whatever the language, matching the two curves makes everything feel rubbery.
-
-**Chained ease-outs read as stop-start.** Each segment decelerates to zero and the next starts fast again. Use ease-in-out for anything continuous, and reserve the braking curve for actual arrivals.
-
-**Stagger is a lever.** The same language feels completely different per-letter, per-word or per-line. Per-letter is energetic and gets tiring past a few words; per-line is calm and reads better for sentences.
-
-**Scale the exit down for large type.** Exit distance is usually proportional to size, so at 112px a default sweep crosses half the screen and collides with the next scene.
-
-**A recurring element can carry the whole piece.** One shape that persists across scenes gives a video a spine that cuts alone cannot — a rule that underlines the key word, a dot, a cursor, a colour block that reframes each card, a mask edge. Treat it as a character rather than a graphic: anticipation before it moves, overshoot on arrival, weight when it lands, a small idle vocabulary for when it waits. Drive any randomness from a seeded generator, because `Math.random()` makes the preview and the export different films.
-
-**An element that crosses text reads as a rendering bug**, even when the copy explicitly calls for a strikethrough. Keep it behind the type so letters cut through it.
-
-**Dark backgrounds change things.** A trail's colour, flat-area banding, and the fact that two stacked vignettes draw a visible ellipse edge. `MG.trail()` takes a colour for exactly this reason — hardcoded black on a dark ground is an invisible smear.
-
-## Physics, when you need it
-
-For anything thrown, dropped or bounced, integrate the motion rather than reaching for an easing curve. An `ease-out` is not a fall — it decelerates, and falls accelerate. The same goes for departures, which start slow and build.
-
-`scripts/physics.js` has this solved. `PHYS.drop()` does projectile, bounce and topple for boxes; `PHYS.roll()` does the same for anything round, which is a genuinely different solver; `PHYS.departure()` does something pulling away; `PHYS.keyframes()` turns any of them into keyframes. Use them rather than rewriting — the two bugs that make hand-rolled rigid bodies look wrong are already handled, and `references/physics.md` explains what they were.
-
-## Verify by measuring
-
-The habit, concretely: before you claim something is fixed, write six lines that check it and print a number.
-
-- Reproducing a reference exactly? Diff the rendered pixels, then — because pixel counts explode from sub-pixel antialiasing — **also compare geometry**, element by element, at matching instants. Geometry is the real claim; the pixel count is a coarse net.
-- Something "feels janky"? Measure frame times before touching the design. It is often not dropped frames.
-- Element flying off-frame? Sample its rect across the window and report the worst overflow.
-
-And a warning that will save you an hour: **when a check suddenly fails, suspect the check.** In practice most alarms were stale measurement windows, a fixed timestamp that drifted after a retime, a comparison of elements that were invisible at that moment, or a race in the harness. Confirm the failure independently before you "fix" working code.
-
-`scripts/verify.js` has each of these as a function you can import; `references/verify.md` explains what each one is really testing.
-
-## Export
-
-`node export.js` renders 1:1, 4:5 and 9:16. Three things decide whether the file is usable:
-
-- **`yuv420p`** — without it, platforms and QuickTime refuse to decode.
-- **`+faststart`** — without it, playback waits for the whole download.
-- **A silent audio track** — some platforms reject video-only uploads outright.
-
-Change aspect ratio by making the **canvas** taller, never by padding a square with flat colour. If the design has any vignette or gradient reaching the edge, flat padding leaves a visible seam.
-
-One trap specific to Playwright: `screenshot({ animations: 'disabled' })` does not freeze anything — it fast-forwards animations to their end state, and every exported frame comes out identical. The timeline is already paused; do not pass it.
-
-## When the copy is the problem
-
-If you are writing the words too and two rounds of alternatives all feel wrong, stop generating options. The words are usually fine — the *slot* has no defined job. Ask what that beat is for (name the problem? answer the objection? show proof?) and the line tends to write itself. A defensive beat dropped into the middle of a persuasive sequence will feel wrong no matter how well it is phrased.
-
-Two related instincts: consistency between scenes beats cleverness in one of them — a scene that is twice as long as its neighbours reads as a mistake even when its content earns the time. And when someone says a section is "too slow", scale its whole sequence by a factor rather than trimming one hold; the internal rhythm is usually right.
-
-## References
-
-Read the one you need, when you need it.
-
-| File | What is in it |
-| --- | --- |
-| `references/engine.md` | Timeline internals, the failure modes in depth, camera and shared tracks |
-| `references/craft.md` | Optical centering, trails, easing, recurring elements, idle vocabulary |
-| `references/physics.md` | Why the solver in `scripts/physics.js` is built the way it is |
-| `references/verify.md` | Measurement recipes, and the traps in the measuring scripts |
-| `references/export.md` | ffmpeg flags, aspect ratios, platform requirements |
-
-## Source
-
-Rewritten for AICUT from [`acelera-agency/html-animation`](https://github.com/acelera-agency/html-animation)
-(MIT), SKILL.md. The method is that skill's own; the way it runs is AICUT's.