ortizssh/animonkey

What does animonkey do?

by Dustkey LLC

A studio method for making product motion graphics that feel like the ones from the best startups: a story that fits the music, titles that read on their own, transitions that transform instead of cut, characters that act out what the product solves, and the real UI front and center. It ships a Remotion template that compiles (template/), scripts for music, voice, mixing, quality control and delivery (scripts/), and reference docs with the numbers (references/).

The craft repeats; the look does not. Every film gets its own visual line —palette, typeface, character finish, light, camera, motion personality, music— defined from the client's brand. The skill gives you the parameters to make videos of this quality, not to repeat one. Never copy another film's line, music, copy or storyboard.

Before you start

• Read references/template.md (how the template is built and its API) and, before writing Remotion code, the docs for the installed version (the @remotion/media, @remotion/three and Config APIs change between versions).
• Tools: node ≥ 20, ffmpeg/ffprobe, uv (Python 3.12) for the scripts; for voice, an environment with mlx-audio, faster-whisper, mlx-whisper, speechbrain and librosa (Apple Silicon).
• Disk: ≥ 5 GB free to render (df -h /). Never delete the user's files to free space without asking.
• A new project starts as a copy: cp -R <skill>/template <project>/video && cd <project>/video && npm install.

The workflow

Every step ends in something seen. Gates (G0–G3) are approved on frames, contact sheets or video, never on a description.

0 · Brief

Gather (and ask for what's missing, in a single batch): what the product does TODAY and what it doesn't; who it's for; where the video goes (landing page, app store, ads, event); duration(s); formats (16:9, 9:16, 4:5); languages; voice or not, and in which mode; music (with a commercial license); the brand (logo, colors, typeface, tone); the real UI (screenshots, design tokens from the code, icons) and references the client likes. Write the product's truth in the plan: nothing in the film may promise what the app doesn't do.

1 · The visual line → G0

Define the ten axes of the line with references/art-direction.md and compare it against the registry of used lines (used-lines.md, private; if it doesn't exist, create it from used-lines.example.md). Write it into kit/palette.ts, style.ts, brand.ts (+ scripts/font-metrics.py if the typeface changes) and project/cast.ts. Render three line frames (the problem with the cast, the UI, the close) with scripts/still.sh and get them approved.

2 · The story and the titles

With references/storytelling.md: fill the slots (where the value is born, the cast, the raw material each character drops, the loss, the twist, the traveling brand piece, the one-tap action, the triad, the proof, the objection, the tagline). Lay the acts over the shape of the song and write the titles as specs in project/titles.ts with references/kinetic-typography.md. Read them in a row with the sound off: they must tell the whole film. Run npm run check until it passes in both languages.

3 · The music and the grid

With references/audio-and-voice.md: choose the track for the line, map it (scripts/mapear-musica.py), cut it by bars if needed (scripts/cortar-por-compases.py) and put bpm and v0 into makeGrid in project/timeline.ts. From here on, every event is written with bar()/beat().

4 · Animatic → G1

The real titles animated, the objects as silhouettes in place and the ground plan, over the music (and the scratch voice). What gets approved is the TIMING. What is approved here is what ships.

5 · Production by blocks → G2

From highest to lowest risk (the proof in the hand and the plant-and-payoff first), each block in project/blocks/ and registry.tsx:

• characters, poses, light and 3D camera: references/characters-3d.md;
• the product UI in DOM glued to the 3D, taps and readable push-ins: references/product-ui.md;
• curves, camera recipes, transformation transitions, physical grounds and handoffs: references/motion-and-grounds.md. Review each block with a contact sheet and 100 % crops (references/production-and-qa.md).

6 · Integration, checks and master → G3

npm run check, render (scripts/render.sh), scripts/film-qa.py and scripts/hoja-contacto.py on the MP4; the voice (scripts/voz/) and the mix (scripts/mezclar.py) measured. Watch the silent master as someone who doesn't know the product.

7 · Variants and delivery

Languages, verticals through a window, 6–15 s cuts with several openings, a master without voice: references/marketing-and-formats.md. Deliver with scripts/entregar.py (names that never overwrite, covers, contact sheets, manifest).

8 · Register

Add the film's line to used-lines.md and its signature to USED_LINES in the next project. Record the client's decisions in their own words: they are the taste for the next film (references/taste.md).

Non-negotiables

1. The music rules. Everything in grid frames; events within ±2 frames of a beat; move the voice, never the grid.
2. One title = one centered line of 2–5 words, measured with the real typeface (no DOM), with a single accent; if it doesn't fit, shorten the text, not the type.
3. Nothing appears by opacity or changes by crossfade: the camera, an object or a transformation carries everything.
4. The problem is acted out by characters; what they drop in the problem comes back as the product's result.
5. The UI is the real product's, redrawn in DOM and legible when it's read (≥ 3.4 px/pt).
6. A brand piece travels through the story and returns to the logo; the close holds still with the domain.
7. Verticals without remaking: the same film through a window; texts as they are; widen the window where something doesn't fit.
8. Every project has its own line; two films from the studio don't look alike (anti-similarity in art-direction.md).
9. A check has to be able to fail, and a green render proves nothing: look at the contact sheet and the 100 % frames.
10. No real customer data and no invented capabilities on screen.

What to read and when

You need…	Read
To start, understand the template, commands	references/template.md
To define the project's look (palette, type, finish, light, music)	references/art-direction.md
Structure, acts, characters acting out the process, copy and voice	references/storytelling.md
Title specs, entries and exits, measuring, another typeface or language	references/kinetic-typography.md
Curves, camera, transitions, grounds, rhythm, motion metrics	references/motion-and-grounds.md
To design a cast, poses, IK, 3D staging, hands, shadows	references/characters-3d.md
To recreate and animate the product UI and glue it to the 3D	references/product-ui.md
To choose and cut the music, AI voice, the mix	references/audio-and-voice.md
Ad cuts, verticals, languages, deliverables	references/marketing-and-formats.md
Gates, measurable rules, rendering, tools, operations	references/production-and-qa.md
To decide between two options that both work	references/taste.md

Scripts

Script	What for
template/scripts/check.sh	checks without rendering (titles, sync, grounds, contrast, cuts, repeated line) in two languages
template/scripts/still.sh	single frames to review and for the gates
template/scripts/render.sh	master and variants: silent in chunks, with a disk check, and the audio muxed with ffmpeg
template/scripts/proyecto-json.sh	the timeline as JSON for the Python scripts
template/scripts/font-metrics.py	the measurement table of another typeface (static or variable)
scripts/mapear-musica.py	tempo, first downbeat, grid and sections of a track
scripts/cortar-por-compases.py	the music cut by the grid segments, without clicks
scripts/mezclar.py	music + voice with ducking, protected lows and a measurement report
scripts/voz/	voice script from the titles → design → clone → pick → place
scripts/film-qa.py	cuts, motion, grounds and color on the MP4
scripts/hoja-contacto.py	contact sheet as PDF or PNG
scripts/comparar-videos.py	two renders compared with tolerance
scripts/entregar.py	delivery with covers, contact sheets and a manifest, never overwriting

Private cases

If a private-cases/ folder exists (it is never published), it holds the full analysis of real studio productions: read it to understand why the method is the way it is, never to copy its line, its music, its copy or its story.