Creative judgment.
Portable instructions.
Code-directed animation is a workflow for translating a specific viewer need into an editable, legible visual sequence.
Two purposes, separate stories.
Performance ads build from the buyer moment to a hook, product benefit, and call to action. CRO demonstrations preserve a baseline, explain a proposed UI change, and connect it to a testable hypothesis.
What it carries forward
- A brief that names the audience, intended action, visual idea, and payoff.
- An asset plan connecting product identity, use context, texture, and outcome.
- Motion tied to actions and relationships, with stable reading time.
- Image/text clearance checks that include opaque image padding and transition paths.
- Editable scenes, reproducible seeking, reviewed exports, and source attribution.
Use it in your harness
The SKILL.md and its relative resources are ordinary files. Add the folder to a compatible agent's skill directory, or provide the entrypoint as instructions. The canonical skill lives in gonor-skills; this repository includes the demo's snapshot.
Production in this project
Scenes use HTML, CSS, JavaScript, and local assets. Playwright captures deterministic frames and FFmpeg encodes the MP4s. The portfolio itself is static and has no build step. Preview videos are silent; narration can be added through a separate approved ElevenLabs workflow.
Try a focused brief
“Create an 18-second vertical ad for this product. Start with a real use moment, identify the image role in each beat, keep one message, and export a silent MP4 with editable source. Record factual claims and inspect text clearance during transitions.”