Smooth Motion Graphics

Calm transitions. Clear stories. Your brand.

Built with Harneloop · MIT · One reusable agent skill

A compact harness for agents making silent brand explainers: readable captions, curved connectors, softly travelling lights and separate scenes that give people time to understand. Extracted from the motion workflow used for Harneloop's explainer.

Use the skill with your existing animation tools, or use the included deterministic Canvas renderer. The renderer starts with title, component-composition and alternating workflow scenes. It is a reference to adapt, not a promise to cover every animation style.

Download the skill package · Installation and manual setup · Read the skill

Watch the 54-second fictional-brand example. The demo is a separate release asset and is never included in the installable package.

Original motion demo

Watch the full Harneloop video · 3:40. This is the original visual workflow that informed this skill. The renderer is a compact starting point to adapt for your brand; it does not reproduce every scene in that production.

Quick start

Extract the release ZIP and point your agent at skills/smooth-motion-graphics/SKILL.md. Ask it to inspect your brand and product, outline the story, adapt the example brief and verify the rendered result. An Agent Skills client can discover the complete folder from its own documented skills directory.

For the optional renderer, install Node.js 20+ and FFmpeg, then:

cd skills/smooth-motion-graphics
npm ci
node scripts/render.cjs stills assets/brand-brief.example.json output
node scripts/render.cjs video assets/brand-brief.example.json output

Edit a copy of the example JSON to set your name, colors, labels, scene timing and explicit flow directions. Inspect the stills before encoding. The example uses fictional Luma branding, not a real product claim. The output is a silent 54-second 1080p video at 60 fps.

What's inside

One skill entry point, one reference guide, one example brief, one renderer, and two dependency manifests. Node Canvas and FFmpeg are optional execution tools; this package exposes no MCP tools. No fonts, dependencies, raw traces or video files are installed with it.

The release also offers an optional promoted Harneloop thin unit. INSTALL.md explains what that snapshot contains and how to reuse it. Development runs and visual evidence remain outside this repository.

What gets checked

The skill requires accurate relationships, readable captions, gentle timing, inspected frames and actual video decoding. This release was checked on Windows with the included fictional brief, a second blue brand palette, layout failure cases and 1080p60 video encoding. Platform-specific fonts may change layout; inspect stills on your encoding machine.

For contributors: node --test tests/render.test.cjs runs meaningful layout and direction checks. python scripts/package.py builds the focused release ZIP from an explicit allowlist. Generated assets go in ignored output folders or release assets.

The code is MIT. @napi-rs/canvas is a separately installed MIT dependency; system FFmpeg licensing depends on the build you install.