Skip to main content
skill CX Codex

reference-to-motion — Claude Code skill: what it does, how to install

Turns reference videos and style boards into a scene-by-scene Claude Motion prompt for your brand. Use it when you need to recreate the rhythm of an ad with your own text.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add charlie947/motion-graphics-skills --skill reference-to-motion -a claude-code
Open on GitHub

What reference-to-motion does

The skill separates reference materials into motion dynamics and visual styling. From a video, it pulls pacing, transitions, and the central concept while dropping original branding, logos, and copy. Colors, typography, and mood come from static assets such as a website or a moodboard.

Claude produces two outputs. First comes a concise breakdown of shot lengths, transitions, type treatment, and lighting. Then it writes a paste-ready prompt for Claude Motion with scene timings and exact on-screen copy. The prompt stays under 300 words without code, HTML tags, or file names, because Claude Motion handles video playback and rendering internally.

The skill fails if you expect it to copy reference stories directly. It discards original copy by design. You must provide your own text and shot duration.

What it helps with

  • break down pacing and scene transitions from a reference video
  • extract typography and color palettes from brand websites
  • generate a scene-by-scene Claude Motion prompt with exact timings
  • adapt video motion structures to custom product messaging

Example prompts for the agent

  • "Break down this reference video and turn it into a Claude Motion prompt"
  • "Use my website for colors and fonts, and this ad for the animation rhythm"
  • "Make me a motion graphic like this reference for my product launch"

How to install reference-to-motion

1Skills CLI (Vercel)

npx skills add charlie947/motion-graphics-skills --skill reference-to-motion -a claude-code

2Manually: put the files in place

~/.claude/skills/reference-to-motion/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/reference-to-motion/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about reference-to-motion

How to install reference-to-motion in Claude Code?

Run npx skills add charlie947/motion-graphics-skills --skill reference-to-motion -a claude-code in your terminal. The skill will be available in your Claude Code sessions immediately.

What does reference-to-motion do?

It analyzes reference videos and style moodboards to build a formatted Claude Motion prompt. The resulting prompt includes scene timings, visual cues, and exact text overlays.

Can reference-to-motion include HTML or animation code in the prompt?

No, the skill explicitly avoids code, file names, HTML, and export commands. Claude Motion renders, plays, and exports animations on its own, requiring only plain scene descriptions.

Source text

SKILL.md · MIT
---
name: reference-to-motion
description: Turn references you admire into a scene-by-scene Claude Motion prompt for your own topic and brand. Takes a video for the moves (screenshots, frames or a contact sheet of a reel or ad) and, optionally, a look reference for the style (a website, a brand, a moodboard). Use when someone says "make me something like this", "break down this reference", "use my website as the look" or "turn this into a Motion prompt". Outputs a short breakdown, then one paste-ready Motion prompt with timings for every scene.
---

You turn references into a Claude Motion prompt. A reference does one of two jobs:
- A MOVES reference is a video. It gives the pace, the scene changes and the one idea.
- A LOOK reference is a website, a brand, a moodboard or my own site. It gives the colours, fonts and feel.
One reference can do both if I say so. If I do not say, a video is a moves reference and anything still (a website, a moodboard) is a look reference. You never copy a video. My topic and my words build the film.

<task>
1. Look at everything I attach and sort it into moves and look.
2. Do not ask about views. If I mention them, you may say what they suggest (people watched to the end), never use them as a gate.
3. Break the moves reference down in five short lines:
   - Pace: how long each shot holds.
   - Change: how one scene turns into the next.
   - Type: size, weight, how words arrive.
   - Colour and light.
   - The one idea that carries the whole video.
4. If I gave a look reference, add a Look line: background, text and accent colours as hex codes, fonts (or the closest Google Fonts), and how it should feel and move.
5. Then ask me, in one batch: my topic, the exact words on screen, the length in seconds and the size (9:16, 1:1, 4:5 or 16:9). Ask for brand colours and font only if there is no look reference and no brief. Skip anything I already gave you. Wait for my answers.
6. Write the prompt.
</task>

<rules>
- From a moves reference, take the pace, the scene changes and the one idea. Leave out its logo, copy, colours and characters.
- From a look reference, take the colours, fonts and feel. Never its logo or copy.
- The look comes from, in order: my look reference, then my motion brief, then a neutral dark palette labelled "Neutral default, replace with your brand".
- Never invent a number. Use only the numbers I give you.
- One visual idea per scene, and each scene grows out of the last one.
- Every timing is in seconds and the scenes add up to the exact length.
- Claude Motion builds, plays and exports the video itself. So never write code, file names, HTML, seek functions, frame captures or export steps into the prompt.
- Keep the prompt under 300 words. Short scene lines beat long specs.
</rules>

<output_format>
Part 1: the five-line breakdown, plus the Look line if I gave a look reference.
Part 2: one prompt in a code block, written to paste into a Claude Motion chat:
- First line: "Make me a motion graphic." Then the format, size and exact length.
- A look line: background, panels, one accent colour, fonts, how things move (ease-out, no bouncing).
- One line per scene: the time range in seconds, a NAME in capitals, what the viewer sees, and the exact words in quotes.
- Last line: "Before you finish, render a still every 2 seconds, check each one for cut-off or unreadable text, and fix it."
</output_format>

© charlie947 · MIT · charlie947/motion-graphics-skills

Similar skills

Everything for Design →

From the same set13

loop-cover Converts newsletter and blog covers into looping 896x640 GIFs across 180 frames. It animates a single chosen detail while keeping the loop jump-free. CX Codex +1 1,400installs apple-launch-film Builds an Apple-style Mac launch film entirely in code: menu bar, notch, widgets and gradient wallpapers. Useful when you need a launch video without screen recording or After Effects. CX Codex +1 1,500installs title-sequence-3d Creates cinematic 3D title sequences in code using Three.js and Claude Code. Best for scroll-stopping video intros, social hooks, or newsletter openers. CX Codex +1 1,500installs brand-intake A setup skill that interviews you and reads 3 to 5 reference frames, then writes brand.md and MOTION.md — the files every other skill in the pack pulls colours, type and timing from. CX Codex +1 1,500installs motion-brief-writer Turns a rough idea for an animated graphic into a precise build prompt for Claude. Asks for what's missing and never invents a number. CX Codex +1 1,500installs launch-video Builds 30-45 second product launch promo videos as self-contained HTML files with deterministic frame seeking for MP4 export. Useful for SaaS launches and course announcements. CX Codex +1 1,500installs reel-export Turns horizontal or square footage into a 1080 x 1920 vertical file for Reels and TikTok that uploads without washed-out colour. CX Codex +1 1,500installs motion-prompt-writer Writes an 8-part prompt brief for Claude Motion to produce short looping motion graphics in your brand style. CX Codex +1 851installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor