# Explainer High Energy

Make a 12, 20 second high-energy motion-graphics promo for any product, rendered from...

- Repository: https://github.com/Barty-Bart/motion-graphics (997 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-13
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Barty-Bart/motion-graphics --skill explainer-high-energy -g -a claude-code -y`
Codex: `npx skills add Barty-Bart/motion-graphics --skill explainer-high-energy -g -a codex -y`
Cursor: `npx skills add Barty-Bart/motion-graphics --skill explainer-high-energy -g -a cursor -y`
Gemini CLI: `npx skills add Barty-Bart/motion-graphics --skill explainer-high-energy -g -a gemini-cli -y`

## Description

Make a 12, 20 second high-energy motion-graphics promo for any product, rendered from code to MP4 with synthesised music. Fast beat-locked scene changes, kinetic typography, a shape that carries across every transition, a HUD frame. Use when someone wants a hype reel, teaser, launch sting or showreel-style promo for a product, app or brand.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# High-energy explainer

A 12, 20 second hype piece that hits like a showreel. Every half-second something lands on the beat, but it never feels like random cuts, because **a shape carries the eye across every transition**: a spark becomes a line, the line floods the screen into the next background, a full stop detaches and becomes the ball the next scene is built around.

You write it as one HTML page that renders any frame from a time value, then render it to MP4 with motion blur and a synthesised soundtrack.

## Step 1: Get the brief (one message, then go)

Ask everything in **one** message, then work on your own. Only the product is required; for anything left blank, decide yourself and say what you chose.

1. **Product**: name, and what it does in a few sentences. A website URL is even better.
2. **The one thing** the viewer must remember (e.g. "type an idea, get a live app").
3. **Brand**: colours, fonts, logo file, or "use the website". If none, use the default palette below.
4. **Format**: 16:9 (1920×1080) or 9:16 (1080×1920). Default 16:9.
5. **Length**: default is given below for this style.
6. **Music**: their own track (a file path), or let you synthesise one. Default: synthesise.
7. **Direction** (optional): scenes they want, a tagline, a call to action, anything to avoid.

If they gave a URL, read it (web fetch) for the product's real wording, features, colours and font names before writing anything. Use their real words for UI labels and taglines.

The rest: https://github.com/Barty-Bart/motion-graphics/blob/HEAD/skills/explainer-high-energy/SKILL.md