drawn-artifacts

Files (17)

• SKILL.md
• README.md · motion-canvas/
• .gitignore · motion-canvas/template/
• package-lock.json · motion-canvas/template/
• package.json · motion-canvas/template/
• frames-to-prores.mjs · motion-canvas/template/scripts/
• motion-canvas.d.ts · motion-canvas/template/src/
• project.meta · motion-canvas/template/src/
• project.ts · motion-canvas/template/src/
• brand-card.meta · motion-canvas/template/src/scenes/
• brand-card.tsx · motion-canvas/template/src/scenes/
• tsconfig.json · motion-canvas/template/
• vite.config.ts · motion-canvas/template/
• chart.py · scripts/
• lottie_render.py · scripts/
• manim_scene.py · scripts/
• motion_canvas_template_test.py · scripts/

SKILL.md (first lines)

# Drawn Artifacts

Use this when the edit needs a drawn or rendered graphic that native
MotionScene layers can't produce: real charts from real numbers,
math/concept animations, polished decorative motion (confetti,
flourishes, animated icons), or rich custom 2D scenes.

Before reaching for a generator, call `plan_visual_support`. If the
need fits MotionScene's native subset (multi-layer text, panels,
callouts, still image layers with simple animations), use
`plan_motion_scene` instead — it previews and renders natively with no
external toolchain. This skill is the escape hatch for everything past
that subset.

Remotion was deliberately excluded from this toolset (company
licensing terms). All four lanes below are permissively licensed.

## Routing

| Need | Generator | Script |
|---|---|---|
| Chart / data viz from real numbers (bar, line, comparison) | matplotlib | `scripts/chart.py` |
| Concept / math / counter animation (animated stat, growing bars, diagrams in motion) | Manim CE | `scripts/manim_scene.py` |
| Polished decorative motion (confetti, checkmarks, flourishes, animated icons) | Lottie (python-lottie + ffmpeg) | `scripts/lottie_render.py` |
| Rich custom 2D animated scenes beyond the above | Motion Canvas optional template | `motion-canvas/template/` + `motion-canvas/README.md` |

All scripts run through `uv` — no system Python packages needed. `uv`
is on PATH (`/opt/homebrew/bin/uv`) and also bundled with the desktop
app at `binaries/uv-aarch64-apple-darwin`. ffmpeg/ffprobe live at
`/opt/homebrew/bin/`.

## Brand palette

Every artifact uses the house palette unless the user overrides it:
gold `#C8A84E` (primary data/accent), navy `#070D17` (panels,
backgrounds when opacity is wanted), ivory `#F2EDE3` (labels, axes).
Backgrounds are transparent by default.

## 1. Charts — `scripts/chart.py`

```bash
uv run --with matplotlib <skill-root>/scripts/chart.py \
  --spec-json '{"type": "bar", "title": "Quarterly Revenue",
                "labels": ["Q1", "Q2", "Q3", "Q4"],
                "values": [12, 18, 15, 24], "y_label": "$M"}' \
  --out generated/drawn/q-revenue.png
```

- Types: `bar`, `line` (single or multi `series`), `comparison`
  (grouped bars from `series: [{name, values}, ...]`).
- Output is a transparent RGBA PNG (default 1600x900 @ 200 dpi;
  `--width/--height/--dpi` to change). Pass `"panel": true` in the
  spec for an 85%-opacity navy backing panel when the underlying
  footage is too busy for floating text.
- Place as a MotionScene still image layer (preferred for stills —
  you get fades/slides for free) or `Insert PiP`.

VERIFIED: bar/line/comparison specs all render; output probes as
`png / rgba` with genuinely transparent pixels (alpha extrema 0..255).

## 2. Manim animations — `scripts/manim_scene.py`

```bash
uv run --with manim manim render -qh -t --format=mov \
  <skill-root>/scripts/manim_scene.py CounterScene \
  -o counter.mov --media_dir /tmp/manim-media
cp /tmp/manim-media/videos/manim_scene/1080p60/counter.mov \
  generated/drawn/counter.mov
```

- `-t` = transparent background; `--format=mov` writes QuickTime
  Animation (qtrle, `argb` pixel format) whose alpha survives into the
  overlay compositor. Use `-ql` (480p15) for fast iteration, `-qh`
  (1080p60) for the final asset.
- Bundled template scenes, parameterized by env vars (no file edits):
  - `CounterScene` — animated stat counter
    (`DRAWN_COUNTER_START/END/SUFFIX/LABEL/SECONDS`).
  - `BarGrowthScene` — bars growing from the baseline
    (`DRAWN_BARS_JSON='[{"label": "2024", "value": 7}, ...]'`,
    `DRAWN_BARS_TITLE`, `DRAWN_BARS_SECONDS`).
- For custom scenes, copy `manim_scene.py` into the project, add a
  `Scene` subclass with the brand constants, render the same way.
- The bundled scenes use Pango `Text` only — they need NO LaTeX.
  Avoid `MathTex`/`Tex`/`DecimalNumber` in custom scenes unless the
  machine has a TeX distribution (this one does not).
- System deps: Manim needs cairo + pango. Present on this machine
  (`pkg-config --exists cairo pango` passes). On a fresh machine:
  `brew install cairo pango pkg-config`.

VERIFIED: both template scenes render end-to-end via
`uv run --with manim`; outputs probe as `qtrle / argb` (alpha kept);
env-var parametrization confirmed.

## 3. Lottie — `scripts/lottie_render.py`

```bash
uv run --with 'lottie[all]' <skill-root>/scripts/lottie_render.py \
  --input assets/confetti.json \
  --out generated/drawn/confetti.mov
```

- Renders the Lottie JSON to a transparent PNG sequence, then
  assembles a ProRes 4444 .mov (`--codec qtrle` for the lighter
  QuickTime Animation codec). `--fps`, `--scale` to adjust;
  `--frames-dir` keeps the PNG sequence (use `--png-only
  --frames-dir ...` when you only want a single frame or a
  MotionScene still).
- Sourcing: lottiefiles.com has a large free library. Download the
  **Lottie JSON** format (if you get a `.lottie` file, unzip it and
  use `animations/*.json`). Every asset carries its own license —
  surface the asset URL to the USER and have them verify the license
  before it ships in a published edit. Don't bulk-download.

VERIFIED: sample animation rendered end-to-end; .mov probes as
`prores / yuva444p12le` (alpha kept), PNG frames probe as `rgba`.

## 4. Motion Canvas optional template

Use this only when native MotionScene, matplotlib, Manim, or Lottie

From explicit09/montage, Apache-2.0.

More from explicit09/montage