Skip to content
Get packs

Motion Showreel

Turns an idea into a code-made motion graphics video (MP4 plus editable source), up to 20 minutes.

Source Download skill
Repository
ConardLi/garden-skills
Stars
13,484
Licence
MIT
Files
15 files

What it does

When this skill is installed, the agent plans and builds a motion-graphics video made of shapes, text and interface animation, drawn by code rather than filmed. It works through a set of steps: confirm the brief, pick a style, produce preview frames, then open an editor workspace so you can review the real picture and sound before exporting an MP4. The project stays as editable source files, so the video can be rebuilt and changed later. It can also add narration from a script you supply, using text-to-speech, or use music and sound effects you provide or that the agent synthesizes.

Great for

  • Creators who want a short animated product reel, logo intro, or motion portfolio piece without learning After Effects
  • Marketers or designers making explainer or UI-motion videos with editable source
  • Developers comfortable running Node.js and ffmpeg who want reproducible video builds

Skip it if

  • Live-action footage, realistic human performance or video editing of existing clips, which the skill explicitly excludes
  • Interactive web presentations or click-through demos, which the skill says belong to a different skill
  • Situations needing text-to-speech of text you did not supply yourself, since the skill requires the user's own script; using it would misrepresent authorship

Try asking

  • “Make a 30-second product launch reel for my app with bold kinetic typography and a synthesized soundtrack”
  • “Create a 90-second explainer video from my narration script, using my recorded voice and motion graphics”
  • “Build a vertical 15-second logo intro animation for social media and export an MP4 with editable source”
Step-by-step guide: how to use Motion ShowreelInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 15 original files, the MIT licence and an attribution note.

    motion-showreel.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip motion-showreel.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip motion-showreel.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give a clear duration, aspect ratio and benchmark reference up front, since the skill asks for these before building
  • Review the editor preview before confirming export; the skill waits for your approval at that step
  • Keep TTS API keys in environment variables rather than in the brief file

What's inside

  • assets/editor/editor.css
  • assets/editor/editor.js
  • assets/editor/index.html
  • assets/editor/progress.js
  • assets/editor/viewport.css
  • assets/editor/viewport.js
  • assets/starter/build.sh
  • assets/starter/index.html
  • assets/starter/motion.js
  • assets/starter/narration.js
  • assets/starter/package.json
  • assets/starter/preview.js
  • README.md
  • README.zh-CN.md
  • SKILL.md

Redistributed unmodified from ConardLi/garden-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.