# tesseract-motion

Create editable motion graphics in Tesseract, from animated type and diagrams to overlays on supplied footage. The skill focuses on graphic work, not assembling a complete video edit.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 3000 installs · ★ 158
- Author: mirage-hq
- License: LicenseRef-Unknown · policy=link-only · description only; the file stays with the author
- Source: https://github.com/mirage-hq/Tesseract/tree/HEAD/skills/tesseract-motion/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/tesseract-motion

## What it does

The skill guides an agent through building a Tesseract composition: choose a visual concept and canvas, arrange native layers, then animate them with an AnimationGraph. It covers typography, masks, diagrams and graphics placed over supplied footage. The deliverables are an editable `.tsrct` document and a rendered preview.

When music sets the pace, the workflow calls for listening to the track and timing reveals around selected musical events. Review the animation as it develops, then check it alongside the footage. Transparent overlays can be exported with `export --format prores --fx-solo compositionId:layerId --output overlay.mov`; verify the alpha channel. A solo-layer export has no audio.

Before authoring, the agent reads the skill’s local instructions and checks the required Tesseract version. The CLI may send basic usage telemetry, so keep its opt-out preference intact. Separate guidance covers moving projects between editing tools. For assembling or revising a full footage edit, the skill points to `tesseract-video` instead.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add mirage-hq/Tesseract --skill tesseract-motion -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add mirage-hq/Tesseract --skill tesseract-motion -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add mirage-hq/Tesseract --skill tesseract-motion -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mirage-hq/Tesseract tesseract-motion
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add mirage-hq/Tesseract --skill tesseract-motion -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/mirage-hq/Tesseract --path skills/tesseract-motion
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add mirage-hq/Tesseract --skill tesseract-motion -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/mirage-hq/Tesseract/tree/HEAD/skills/tesseract-motion/SKILL.md

## When to use it
- animate titles over supplied footage
- create a moving diagram from native layers
- export a transparent overlay and check its alpha channel
- time graphic reveals to selected music events

## Example prompts
- Create animated titles over this footage in Tesseract, keeping the underlying image visible.
- Build a layered diagram, time its reveals to the music accents, and show me a preview.
- Export this graphic as a transparent overlay in `.tsrct` and verify the video’s alpha channel.

## 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

From the same set: [mirage-hq/tesseract](https://affpapa.org/en/nevibecode/by/mirage-hq/tesseract.md) — 4 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