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.
npx skills add rajitsaha/100xprism --skill motion-designergit clone --depth 1 https://github.com/rajitsaha/100xprismWrote 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.
[](https://agentmods.dev/skills/rajitsaha/100xprism/motion-designer)<a href="https://agentmods.dev/skills/rajitsaha/100xprism/motion-designer"><img src="https://agentmods.dev/badge/skills/rajitsaha/100xprism/motion-designer/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/rajitsaha/100xprism/motion-designer"><img src="https://agentmods.dev/badge/skills/rajitsaha/100xprism/motion-designer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00087 | $0.02246 |
| Opus 5 | $0.00044 | $0.01123 |
| Sonnet 5 | $0.00017 | $0.00449 |
| Haiku 4.5 | $0.00009 | $0.00225 |
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 9d 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.
How it starts
The opening of the file, as written. The whole thing — 215 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Senior Motion Designer mode: specify animations that explain change, guide attention, and acknowledge action — never decoration for its own sake. Every recommendation includes the why, the spec, the code, and the reduced-motion fallback.
Required Input
- Target surface — component, page, full app
- Stack — React + Framer Motion / GSAP / CSS only / SwiftUI / etc.
- Brand temperament — restrained / lively / playful / cinematic
- Performance budget — 60fps desktop minimum; mobile target (60fps / 30fps acceptable)
The Five Jobs Motion Should Do
Every animation in the spec must serve at least one. If it doesn't, cut it.
- Orient — show where an element came from or where it went (modal flies from the button that opened it).
- Acknowledge — confirm an input was received (button press, toggle flip).
- Express state — show loading, progress, success, failure.
- Guide attention — pull the eye to a new or important element (toast slide-in, badge pulse).
- Express brand — set tone via timing curve and personality (luxury = slow ease-out; playful = spring bounce).
Duration Tokens
| Token | ms | Use for |
|---|---|---|
motion-instant |
50 | Hover state, focus ring, color swap |
motion-fast |
150 | Tooltip, button press, small fades |
motion-base |
250 | Card flip, accordion, dropdown |
motion-slow |
400 | Modal/dialog enter, page section reveal |
motion-deliberate |
600 | Page transitions, hero entrances |
motion-cinematic |
800–1200 | Onboarding, marketing splash only |
Rule: if a user is going to wait on it more than once per minute, it must be ≤ motion-base.
Easing Catalog
Default to ease-out for entrances and ease-in for exits — things appear fast and confident, disappear gently.
| Curve | cubic-bezier | Feel | Use for |
|---|---|---|---|
linear |
0, 0, 1, 1 |
Mechanical | Progress bars, loaders |
ease-out |
0, 0, 0.2, 1 |
Confident arrival | Entrances, reveals |
ease-in |
0.4, 0, 1, 1 |
Soft departure | Exits, dismissals |
ease-in-out |
0.4, 0, 0.2, 1 |
Smooth transit | Position changes |
emphasized |
0.2, 0, 0, 1 |
Material 3 standard | Container transforms |
spring-snappy |
stiffness 400, damping 30 | Crisp bounce | Toggle, button press |
spring-bouncy |
stiffness 200, damping 12 | Playful | Onboarding, success |
spring-gentle |
stiffness 100, damping 20 | Calm | Hero content, large cards |
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 9d ago First seen · 215 lines · 87 tokens per session scan A eb5a0aabf86a
motion-designer is a skill published in the GitHub repository rajitsaha/100xprism (10 stars, last pushed 9d ago), licensed MIT. It adds 87 tokens to every session and 2,246 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-31.
Other skills, from other repositories
3d-web-experience
You bring the third dimension to the web. You know when 3D enhances and when it's just showing off. You balance visual impact with performance. You make 3D accessible to users who've never touched a 3D app. You create moments of wonder without sacrificing usability.
animation-engineer
Build smooth, accessible web animations using CSS, Framer Motion, and GSAP.
accessibility-champion
Professional Accessibility Champion Expert skill. Build accessible, performance-tuned, responsive UI components with clean design standards.
component-library
Professional Component Library Expert skill. Build accessible, performance-tuned, responsive UI components with clean design standards.
dark-mode-master
Professional Dark Mode Master skill. Build accessible, performance-tuned, responsive UI components with clean design standards.
data-table-builder
Professional Data Table Builder skill. Build accessible, performance-tuned, responsive UI components with clean design standards.