# Motion Effects

Build any of 16 premium motion effects from scratch in your own brand, as one 8-second...

- Repository: https://github.com/charlie947/motion-graphics-skills (519 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-11
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add charlie947/motion-graphics-skills --skill motion-effects -g -a claude-code -y`
Codex: `npx skills add charlie947/motion-graphics-skills --skill motion-effects -g -a codex -y`
Cursor: `npx skills add charlie947/motion-graphics-skills --skill motion-effects -g -a cursor -y`
Gemini CLI: `npx skills add charlie947/motion-graphics-skills --skill motion-effects -g -a gemini-cli -y`

## Description

Build any of 16 premium motion effects from scratch in your own brand, as one 8-second looping HTML file with window.seek(seconds) so it exports frame-exact to MP4 or GIF. Interfaces (button to player, search to results, card to workspace, tabs to panels), data (chart morph, dashboard zoom, spring stack, magnetic dock), type (masked type, elastic type, text to layout, image reveal) and systems (perspective shift, glass focus, flowing paths, particle logo). Use when someone says "build the chart morph", "make a button that turns into a video player", "animate my logo with particles", "motion effect", "UI animation", "product animation", "animated dashboard", "kinetic type" or names any of the 16 effects.

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

# Motion effects, built in your brand

Sixteen effects that make a product, a number or a word move like it was made by a motion designer. Each one is a recipe: what it is, where it starts, where it ends, when each part moves inside an 8-second loop, and the one detail that makes it look premium. You pick the effect, give it your real words, and it gets built from scratch in your colours and type.

**Before you start:** read `brand.md` and `MOTION.md` if they exist. If not, run `brand-intake` first, or ask for hex codes, a font and a logo file. Never call a result on-brand without them.

## Step 1: Ask for four things, then wait

1. **The effect.** One of the 16 by name or number. If they describe a job instead ("show our pricing", "reveal the launch name"), suggest the two effects from the table below that fit best and let them pick.
2. **The real content.** The words, labels and numbers that go in it. Real figures, or say they are samples.
3. **The size.** 1080 x 1080 (square), 1080 x 1350 (LinkedIn portrait), 1080 x 1920 (Reel) or 1920 x 1080 (YouTube).
4. **Loop or hold.** Loop repeats forever (a post or a GIF). Hold plays once and stays on the finished frame (under a voiceover, so it never resets mid-sentence).

The rest: https://github.com/charlie947/motion-graphics-skills/blob/HEAD/skills/motion-effects/SKILL.md