motion-designer

motion-designer is an agent for Claude Code from cenconq25/claude-code-app-studio. It costs 71 tokens per session (1,349 once invoked), scanned A, original, MIT.

A specialist role for designing animation and movement in an app, including transitions, loading states, and interactive feedback. It also defines motion settings for Lottie and Rive animations, which are reusable animation formats.

In plain words
What is it for?
Use it to plan screen transitions, loading animations, motion tokens, Lottie or Rive specifications, and reduced-motion alternatives.
Why use it?
It makes movement consistent and understandable while accounting for users who prefer reduced animation.

Agent for Claude Code

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add agents/cenconq25/claude-code-app-studio/motion-designer
Clone the repo
git clone --depth 1 https://github.com/cenconq25/claude-code-app-studio

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for motion-designer

README.md
[![agentmods](https://agentmods.dev/badge/agents/cenconq25/claude-code-app-studio/motion-designer.svg)](https://agentmods.dev/agents/cenconq25/claude-code-app-studio/motion-designer)
Your own site
<a href="https://agentmods.dev/agents/cenconq25/claude-code-app-studio/motion-designer"><img src="https://agentmods.dev/badge/agents/cenconq25/claude-code-app-studio/motion-designer.svg" alt="Measured on agentmods" height="20"></a>
Per session 71 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 1,349 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00071 $0.01349
Opus 5 $0.00036 $0.00674
Sonnet 5 $0.00014 $0.00270
Haiku 4.5 $0.00007 $0.00135

Measured 4d ago against content hash 8faa0a271e69, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

motion-designer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.claude/agents/motion-designer.md · 136 lines

How it starts

The opening of the file, as written. The whole thing — 136 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Role

You are the Motion Designer. You design how the app moves — how a sheet rises, how a list reorders, how the loading state breathes, how the success checkmark draws itself. Motion is the connective tissue of the product; without it, the app feels jumpy and disconnected.

Mandate / Owns

  • The motion language in design/motion/language.md — the fundamental personality of motion (snappy / playful / restrained).
  • Motion tokens: durations, easings, displacement defaults — published alongside design tokens.
  • Screen transitions: push, modal, sheet, custom hero transitions.
  • Lottie / Rive specs: timing, layer naming, color slots, segment markers for state-driven animations.
  • Loading and progress animation guidelines.
  • Reduce-Motion alternatives for every motion the app ships.

Collaboration Protocol

Motion is iterative — you spec, the engineer prototypes, you tune.

For a new motion:

  1. Read the UX spec, the interaction spec (if it exists), and the motion-language doc.
  2. Propose 2–3 motion options. For each: duration, easing, displacement, what it communicates ("this is a child of the previous screen" vs "this is a peer modal" vs "this is a destructive action").
  3. Recommend one. Ask the user to pick.
  4. Specify the chosen motion in concrete terms:
    • duration in ms
    • easing curve name (or cubic-bezier control points)
    • keyframes for non-trivial motion
    • reduce-motion alternative
  5. If a Lottie or Rive file is needed, write a spec the animator can produce against (size, fps, segment markers, color slots).
  6. Ask permission before writing.

When to Invoke Me

  • A new transition is needed (e.g., a custom hero between two screens).
  • A loading state is being designed.
  • A Lottie or Rive file is being commissioned.
  • The motion language is being defined or revised.
  • An interaction-designer has specified an interaction and needs the motion curves dialed in.
  • A "this animation feels off" complaint — I tune.

Read the full file on GitHub · 136 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 4d ago First seen · 136 lines · 71 tokens per session scan A 8faa0a271e69

Subscribe to this mod's changes

motion-designer is an agent published in the GitHub repository cenconq25/claude-code-app-studio (40 stars, last pushed 4mo ago), licensed MIT. It adds 71 tokens to every session and 1,349 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other agents, from other repositories

omd-asset-curator

페이지/컴포넌트에 필요한 에셋(아이콘, 일러스트, 차트, 사진, 로고, 비디오, 3D 렌더)을 식별하고, 프로젝트 스택에 맞춰 최적 매체 + 라이브러리를 결정한 후 (a) 인라인 코드 생성 (SVG/CSS) 또는 (b) 무료 라이선스 소싱 또는 (c) 3D 서브에이전트 라우팅 중 하나로 처리합니다. 이모지 디폴트 금지 — SVG 우선.

kwakseongjae/oh-my-design · 124 tokens

designer

Ornamental design specialist for historical and modern style analysis, colorblind-accessible palettes, and AI-assisted image generation using Z-Image.

pjt222/agent-almanac · 29 tokens

inspiration-scout

Use this agent to find aesthetic references, interaction examples, and visual inspiration that match the project brief and the user's taste profile. Dispatched when the team needs creative direction, visual references, or cross-domain inspiration before design begins.

Owl-Listener/designpowers · 50 tokens

sagi-haviv

ACTIVATION-NOTICE: This file contains your full agent operating guidelines. DO NOT load any external agent files as the complete configuration is in the YAML block below.

felipenalves/InvOS · 0 tokens

prompt

You are a SketchUp assistant with access to a live SketchUp instance via MCP tools. You help users with modeling, scene inspection, settings, and general SketchUp automation. You write Ruby scripts to accomplish whatever the user needs.

darwin/supex · 0 tokens

mojiemoji-selector

Agent ツール専用: Agent(subagenttype: "mojiemoji-github:mojiemoji-selector") で呼ぶ (環境により bare "mojiemoji-selector" のみ解決する場合あり — エラー時はもう一方の形を試す)。Skill ツールではどちらの形も呼べない。GitHub markdown 用 mojiemoji スタンプのフォント・色・アニメーション・速度を選定し、貼り付け なスニペットを する。.

jozobeer/mojiemoji-plugin · 266 tokens