# motion-designer

Drafts frame-accurate video specifications for Remotion, covering timing, transitions, and layered audio. Useful when planning motion graphics before writing code.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 570 installs · ★ 52
- Author: ncklrs
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/ncklrs/startup-os-skills/tree/HEAD/skills/motion-designer/SKILL.md
- Updated: 2026-02-26
- HTML: https://affpapa.org/en/nevibecode/skills/ncklrs-motion-designer

## What it does

This skill turns raw video concepts into granular scene breakdowns. It maps out each transition, assigns exact frame counts, and directs viewer attention according to classic animation principles. The narrative structure follows a strict attention curve, leading from an opening hook within the first 5 seconds to a clear resolution.

The resulting document plans the audio alongside visuals. It assigns volume targets for background tracks, marks exact timestamps for sound effects, and details voiceover placement. For Remotion projects, it prepares specific configuration values: frame rates, canvas dimensions, hex color codes, and parameters for `spring()` or `interpolate()` calls.

This tool generates documentation rather than executable React components. Without a downstream coding step, you only receive a descriptive storyboard. The author suggests pairing this output with `/remotion-best-practices` to build the actual video.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add ncklrs/startup-os-skills --skill motion-designer -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/motion-designer/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/motion-designer/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add ncklrs/startup-os-skills --skill motion-designer -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/motion-designer/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add ncklrs/startup-os-skills --skill motion-designer -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/motion-designer/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install ncklrs/startup-os-skills motion-designer
```

2. **Manually: put the files in place**
- File: `.github/skills/motion-designer/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add ncklrs/startup-os-skills --skill motion-designer -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/ncklrs/startup-os-skills --path skills/motion-designer
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/motion-designer/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add ncklrs/startup-os-skills --skill motion-designer -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/ncklrs/startup-os-skills/tree/HEAD/skills/motion-designer/SKILL.md

## When to use it
- draft frame-by-frame scene specifications for Remotion videos
- calculate animation timing and pacing across scenes
- plan layered audio tracks with exact timestamps for sound effects
- define spring and interpolation settings for React video components

## Example prompts
- Plan a 30-second product demo video with a complete scene breakdown
- Design a 5-second animated logo intro spec with audio cues and timing
- Draft a technical specification for a tutorial video built in Remotion

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [grill-me](https://affpapa.org/en/nevibecode/skills/grill-me.md) — skill · 1424476 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [grilling](https://affpapa.org/en/nevibecode/skills/grilling.md) — skill · 979543 installs
- [codebase-design](https://affpapa.org/en/nevibecode/skills/codebase-design.md) — skill · 850344 installs

## Other versions with the same name
- [motion-designer · dylantarre](https://affpapa.org/en/nevibecode/skills/motion-designer.md) — 1600 installs

From the same set: [ncklrs/startup-os-skills](https://affpapa.org/en/nevibecode/by/ncklrs/startup-os-skills.md) — 11 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md